tod
/
odin-default-js-exercises
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

BUILD UP FROM GROUND OF FUNTIONAL CALCULATOR WHIT CLASIC STYLE, JEST EVENTS TESTED

This commit is contained in:
nachvil33 2023-08-28 11:35:47 -06:00
parent e3810865cf
commit 65698d76b2
5 changed files with 228 additions and 31 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

29
08_calculator/calculator-events.js Normal file
View File

@ -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;
}

56
08_calculator/calculator.js
View File

@ -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() { module.exports = calculator;
};
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
};

77
08_calculator/calculator.test.js Normal file
View File

@ -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);
});
});

42
08_calculator/index.html Normal file
View File

@ -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>

55
08_calculator/style.css Normal file
View File

@ -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;
}