BUILD UP FROM GROUND OF FUNTIONAL CALCULATOR WHIT CLASIC STYLE, JEST EVENTS TESTED
This commit is contained in:
nachvil33
parent
e3810865cf
commit
65698d76b2
|
|
@ -0,0 +1,29 @@
|
|||
const display = document.getElementById('display');
|
||||
let currentInput = '';
|
||||
|
||||
document.querySelectorAll('.btn').forEach(button => {
|
||||
button.addEventListener('click', () => handleButtonClick(button.innerText));
|
||||
});
|
||||
|
||||
function handleButtonClick(value) {
|
||||
switch (value) {
|
||||
case 'C':
|
||||
currentInput = '';
|
||||
break;
|
||||
case '←':
|
||||
currentInput = currentInput.slice(0, -1);
|
||||
break;
|
||||
case '=':
|
||||
try {
|
||||
currentInput = eval(currentInput).toString();
|
||||
} catch (error) {
|
||||
currentInput = 'Error';
|
||||
}
|
||||
break;
|
||||
default:
|
||||
currentInput += value;
|
||||
break;
|
||||
}
|
||||
|
||||
display.innerText = currentInput;
|
||||
}
|
||||
|
|
@ -1,33 +1,27 @@
|
|||
const add = function() {
|
||||
|
||||
const calculator = {
|
||||
add: function (a, b) {
|
||||
return a + b;
|
||||
},
|
||||
subtract: function (a, b) {
|
||||
return a - b;
|
||||
},
|
||||
sum: function (array) {
|
||||
return array.reduce((total, current) => total + current, 0);
|
||||
},
|
||||
multiply: function (...args) {
|
||||
return args.reduce((product, current) => product * current, 1);
|
||||
},
|
||||
power: function (a, b) {
|
||||
return Math.pow(a, b);
|
||||
},
|
||||
factorial: function (n) {
|
||||
if (n === 0) return 1;
|
||||
let product = 1;
|
||||
for (let i = n; i > 0; i--) {
|
||||
product *= i;
|
||||
}
|
||||
return product;
|
||||
},
|
||||
};
|
||||
|
||||
const subtract = function() {
|
||||
|
||||
};
|
||||
|
||||
const sum = function() {
|
||||
|
||||
};
|
||||
|
||||
const multiply = function() {
|
||||
|
||||
};
|
||||
|
||||
const power = function() {
|
||||
|
||||
};
|
||||
|
||||
const factorial = function() {
|
||||
|
||||
};
|
||||
|
||||
// Do not edit below this line
|
||||
module.exports = {
|
||||
add,
|
||||
subtract,
|
||||
sum,
|
||||
multiply,
|
||||
power,
|
||||
factorial
|
||||
};
|
||||
module.exports = calculator;
|
||||
|
|
|
|||
|
|
@ -0,0 +1,77 @@
|
|||
const calculator = require('./calculator'); // Asegúrate de que la ruta sea correcta
|
||||
|
||||
describe('add', () => {
|
||||
test('adds 0 and 0', () => {
|
||||
expect(calculator.add(0, 0)).toBe(0);
|
||||
});
|
||||
|
||||
test('adds 2 and 2', () => {
|
||||
expect(calculator.add(2, 2)).toBe(4);
|
||||
});
|
||||
|
||||
test('adds positive numbers', () => {
|
||||
expect(calculator.add(2, 6)).toBe(8);
|
||||
});
|
||||
});
|
||||
|
||||
describe('subtract', () => {
|
||||
test('subtracts numbers', () => {
|
||||
expect(calculator.subtract(10, 4)).toBe(6);
|
||||
});
|
||||
});
|
||||
|
||||
describe('sum', () => {
|
||||
test('computes the sum of an empty array', () => {
|
||||
expect(calculator.sum([])).toBe(0);
|
||||
});
|
||||
|
||||
test('computes the sum of an array of one number', () => {
|
||||
expect(calculator.sum([7])).toBe(7);
|
||||
});
|
||||
|
||||
test('computes the sum of an array of two numbers', () => {
|
||||
expect(calculator.sum([7, 11])).toBe(18);
|
||||
});
|
||||
|
||||
test('computes the sum of an array of many numbers', () => {
|
||||
expect(calculator.sum([1, 3, 5, 7, 9])).toBe(25);
|
||||
});
|
||||
});
|
||||
|
||||
describe('multiply', () => {
|
||||
test('multiplies two numbers', () => {
|
||||
expect(calculator.multiply(2, 4)).toBe(8);
|
||||
});
|
||||
|
||||
test('multiplies several numbers', () => {
|
||||
expect(calculator.multiply(2, 4, 6, 8, 10, 12, 14)).toBe(645120);
|
||||
});
|
||||
});
|
||||
|
||||
describe('power', () => {
|
||||
test('raises one number to the power of another number', () => {
|
||||
expect(calculator.power(4, 3)).toBe(64); // 4 to the third power is 64
|
||||
});
|
||||
});
|
||||
|
||||
describe('factorial', () => {
|
||||
test('computes the factorial of 0', () => {
|
||||
expect(calculator.factorial(0)).toBe(1); // 0! = 1
|
||||
});
|
||||
|
||||
test('computes the factorial of 1', () => {
|
||||
expect(calculator.factorial(1)).toBe(1);
|
||||
});
|
||||
|
||||
test('computes the factorial of 2', () => {
|
||||
expect(calculator.factorial(2)).toBe(2);
|
||||
});
|
||||
|
||||
test('computes the factorial of 5', () => {
|
||||
expect(calculator.factorial(5)).toBe(120);
|
||||
});
|
||||
|
||||
test('computes the factorial of 10', () => {
|
||||
expect(calculator.factorial(10)).toBe(3628800);
|
||||
});
|
||||
});
|
||||
|
|
@ -0,0 +1,42 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Simple Calculator</title>
|
||||
<link rel="stylesheet" href="style.css">
|
||||
</head>
|
||||
<body>
|
||||
<div class="calculator">
|
||||
<div class="display" id="display">0</div>
|
||||
<div class="buttons">
|
||||
<button class="btn" id="clear">C</button>
|
||||
<button class="btn" id="backspace">←</button>
|
||||
<button class="btn" id="power">x^y</button>
|
||||
<button class="btn" id="divide">/</button>
|
||||
<button class="btn" id="7">7</button>
|
||||
<button class="btn" id="8">8</button>
|
||||
<button class="btn" id="9">9</button>
|
||||
<button class="btn" id="multiply">*</button>
|
||||
<button class="btn" id="4">4</button>
|
||||
<button class="btn" id="5">5</button>
|
||||
<button class="btn" id="6">6</button>
|
||||
<button class="btn" id="subtract">-</button>
|
||||
<button class="btn" id="1">1</button>
|
||||
<button class="btn" id="2">2</button>
|
||||
<button class="btn" id="3">3</button>
|
||||
<button class="btn" id="add">+</button>
|
||||
<button class="btn" id="0">0</button>
|
||||
<button class="btn" id="decimal">.</button>
|
||||
<button class="btn" id="equals">=</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<footer>
|
||||
A Full Tech FLow Solutions Product By Eng. Ignacio Manuel Castañeda Acuña
|
||||
</footer>
|
||||
|
||||
<script src="calculator.js"></script>
|
||||
<script src="calculator-events.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,55 @@
|
|||
body {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
height: 100vh;
|
||||
background-color: #f0f0f0;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.calculator {
|
||||
background-color: #f0f0f0; /* Cambiamos el fondo a un gris más claro */
|
||||
border-radius: 10px; /* Aumentamos el radio del borde para hacerlo más suave */
|
||||
box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.2);
|
||||
text-align: center;
|
||||
width: 350px; /* Aumentamos el ancho para dar más espacio a los botones */
|
||||
padding: 20px; /* Agregamos un poco de espacio alrededor del contenido */
|
||||
margin-top: 20px; /* Añadimos margen superior para centrar en la pantalla */
|
||||
}
|
||||
|
||||
.display {
|
||||
font-size: 36px; /* Aumentamos el tamaño del texto en el display */
|
||||
padding: 10px;
|
||||
border: 1px solid #ccc; /* Cambiamos el borde inferior a un borde completo */
|
||||
margin-bottom: 10px; /* Agregamos margen inferior para separar del contenido de los botones */
|
||||
background-color: #fff; /* Fondo blanco para el display */
|
||||
}
|
||||
|
||||
.buttons {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(4, 1fr);
|
||||
gap: 10px; /* Agregamos espacio entre los botones */
|
||||
}
|
||||
|
||||
.btn {
|
||||
font-size: 24px; /* Aumentamos el tamaño del texto en los botones */
|
||||
padding: 20px 0;
|
||||
cursor: pointer;
|
||||
border: 1px solid #ccc; /* Agregamos un borde a los botones */
|
||||
background-color: #fff; /* Fondo blanco para los botones */
|
||||
}
|
||||
|
||||
.btn:hover {
|
||||
background-color: #eee; /* Cambiamos el color de fondo al pasar el ratón */
|
||||
}
|
||||
|
||||
#equals {
|
||||
grid-column: span 4;
|
||||
background-color: #ff6600;
|
||||
color: white;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
#equals:hover {
|
||||
background-color: #cc5500;
|
||||
}
|
||||
Loading…
Reference in New Issue