Skip to content

Commit 75c70e6

Browse files
JavierSalgueroJavierSalguero
authored
Add files via upload
0 parents  commit 75c70e6

File tree

3 files changed

+172
-0
lines changed

3 files changed

+172
-0
lines changed

‎assets/index.js

Lines changed: 74 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,74 @@
1+
let currentInput = '';
2+
let operator = '';
3+
let firstOperand = '';
4+
let secondOperand = '';
5+
let result = 0;
6+
7+
function updateDisplay() {
8+
document.getElementById('display').value = currentInput;
9+
}
10+
11+
function calculateSqrt() {
12+
if (currentInput >= 0) {
13+
currentInput = Math.sqrt(currentInput);
14+
updateDisplay();
15+
} else {
16+
currentInput = 'Error: Valor negativo';
17+
updateDisplay();
18+
}
19+
}
20+
21+
function clear() {
22+
currentInput = '0';
23+
operator = '';
24+
firstOperand = '';
25+
secondOperand = '';
26+
result = 0;
27+
updateDisplay();
28+
}
29+
30+
function backspace() {
31+
currentInput = currentInput.slice(0, -1);
32+
updateDisplay();
33+
}
34+
35+
function appendNumber(number) {
36+
currentInput += number;
37+
updateDisplay();
38+
}
39+
40+
function appendDecimal() {
41+
if (!currentInput.includes('.')) {
42+
currentInput += '.';
43+
updateDisplay();
44+
}
45+
}
46+
47+
function setOperator(op) {
48+
operator = op;
49+
firstOperand = currentInput;
50+
currentInput = '';
51+
updateDisplay();
52+
}
53+
54+
function calculate() {
55+
secondOperand = currentInput;
56+
switch (operator) {
57+
case '+':
58+
result = parseFloat(firstOperand) + parseFloat(secondOperand);
59+
break;
60+
case '-':
61+
result = parseFloat(firstOperand) - parseFloat(secondOperand);
62+
break;
63+
case '*':
64+
result = parseFloat(firstOperand) * parseFloat(secondOperand);
65+
break;
66+
case '/':
67+
result = parseFloat(firstOperand) / parseFloat(secondOperand);
68+
break;
69+
default:
70+
result = currentInput;
71+
}
72+
currentInput = result.toString();
73+
updateDisplay();
74+
}

‎assets/styles.css

Lines changed: 61 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,61 @@
1+
body {
2+
font-family: Arial, sans-serif;
3+
text-align: center;
4+
background-color: #696666;
5+
}
6+
7+
h1 {
8+
margin: 20px 0;
9+
font-size: 24px;
10+
}
11+
12+
.calculator {
13+
background-color: #fff;
14+
width: 250px;
15+
margin: 0 auto;
16+
padding: 20px;
17+
border-radius: 10px;
18+
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
19+
}
20+
21+
#display {
22+
width: 100%;
23+
height: 40px;
24+
font-size: 20px;
25+
text-align: right;
26+
margin-bottom: 10px;
27+
border: 1px solid #ccc;
28+
border-radius: 5px;
29+
padding: 5px;
30+
}
31+
32+
.buttons {
33+
display: grid;
34+
grid-template-columns: repeat(4, 1fr);
35+
gap: 5px;
36+
}
37+
38+
button {
39+
width: 100%;
40+
height: 40px;
41+
font-size: 18px;
42+
background-color: #333;
43+
color: #fff;
44+
border: 1px solid #000;
45+
border-radius: 5px;
46+
cursor: pointer;
47+
transition: background-color 0.3s;
48+
}
49+
50+
button:hover {
51+
background-color: #555;
52+
}
53+
54+
.operator {
55+
background-color: #f66;
56+
}
57+
58+
.operator:hover {
59+
background-color: #f00;
60+
}
61+

‎index.html

Lines changed: 37 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,37 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<title>Mi Calculadora</title>
5+
<link rel="./stylesheet" type="./text/css" href="./styles.css">
6+
</head>
7+
<body>
8+
<h1>Mi Calculadora</h1>
9+
<div class="calculator">
10+
<input type="text" id="display" readonly>
11+
<div class="buttons">
12+
<button class="operator" id="backspace" onclick="backspace()">⌫</button>
13+
<button class="operator" id="clear" onclick="clearDisplay()">C</button>
14+
<button class="operator" id="sqrt" onclick="calculateSqrt()">√</button>
15+
<button class="operator" id="divide" onclick="setOperator('/')">/</button>
16+
<button id="7" onclick="appendNumber('7')">7</button>
17+
<button id="8" onclick="appendNumber('8')">8</button>
18+
<button id="9" onclick="appendNumber('9')">9</button>
19+
<button class="operator" id="multiply" onclick="setOperator('*')">*</button>
20+
<button id="4" onclick="appendNumber('4')">4</button>
21+
<button id="5" onclick="appendNumber('5')">5</button>
22+
<button id="6" onclick="appendNumber('6')">6</button>
23+
<button class="operator" id="subtract" onclick="setOperator('-')">-</button>
24+
<button id="1" onclick="appendNumber('1')">1</button>
25+
<button id="2" onclick="appendNumber('2')">2</button>
26+
<button id="3" onclick="appendNumber('3')">3</button>
27+
<button class="operator" id="add" onclick="setOperator('+')">+</button>
28+
<button id="0" onclick="appendNumber('0')">0</button>
29+
<button id="decimal" onclick="appendDecimal('.')">.</button>
30+
<button id="empty"></button>
31+
<button class="operator" id="equals" onclick="calculate()">=</button>
32+
</div>
33+
</div>
34+
</section>
35+
<script src="./index.js"></script>
36+
</body>
37+
</html>

0 commit comments

Comments
 (0)