From 65698d76b2ed6873695380957f90bc1911aed3f3 Mon Sep 17 00:00:00 2001
From: nachvil33 <mokacinez39@gmail.com>
Date: Mon, 28 Aug 2023 11:35:47 -0600
Subject: [PATCH] BUILD UP FROM GROUND OF FUNTIONAL CALCULATOR WHIT CLASIC
STYLE, JEST EVENTS TESTED
---
08_calculator/calculator-events.js | 29 +++++++++++
08_calculator/calculator.js | 56 ++++++++++------------
08_calculator/calculator.test.js | 77 ++++++++++++++++++++++++++++++
08_calculator/index.html | 42 ++++++++++++++++
08_calculator/style.css | 55 +++++++++++++++++++++
5 files changed, 228 insertions(+), 31 deletions(-)
create mode 100644 08_calculator/calculator-events.js
create mode 100644 08_calculator/calculator.test.js
create mode 100644 08_calculator/index.html
create mode 100644 08_calculator/style.css
diff --git a/08_calculator/calculator-events.js b/08_calculator/calculator-events.js
new file mode 100644
index 0000000..68fb550
--- /dev/null
+++ b/08_calculator/calculator-events.js
@@ -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;
+}
diff --git a/08_calculator/calculator.js b/08_calculator/calculator.js
index c22e8d2..ed2227e 100644
--- a/08_calculator/calculator.js
+++ b/08_calculator/calculator.js
@@ -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;
diff --git a/08_calculator/calculator.test.js b/08_calculator/calculator.test.js
new file mode 100644
index 0000000..90abf60
--- /dev/null
+++ b/08_calculator/calculator.test.js
@@ -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);
+ });
+});
\ No newline at end of file
diff --git a/08_calculator/index.html b/08_calculator/index.html
new file mode 100644
index 0000000..38fdf94
--- /dev/null
+++ b/08_calculator/index.html
@@ -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>
\ No newline at end of file
diff --git a/08_calculator/style.css b/08_calculator/style.css
new file mode 100644
index 0000000..3db5314
--- /dev/null
+++ b/08_calculator/style.css
@@ -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;
+}