JavaScript\js\numeros.
js
1 // Array inicial de números
2 let numeros = [7, 5, 8, 4, 5, 0];
3 // Selección del contenedor donde se mostrará la tabla
4 let capa = document.querySelector('#num');
5
6 // Función que genera la tabla HTML con los números y sus operaciones
7 let num = (numeros) => {
8 let msg = "<table class='table table-bordered'>";
9 msg += "<thead><tr><th>No</th>";
10 msg += "<th>Números</th>";
11 msg += "<th>Raíz</th>";
12 msg += "<th>Cubo</th>";
13 msg += "<th>Factorial</th>";
14 msg += "<th>Suma Serie</th>";
15 msg += "</tr></thead>";
16 msg += "<tbody>";
17 for (let i = 0; i < numeros.length; i++) {
18 msg += "<tr>";
19 msg += `<td>${i}</td>`; // Índice
20 msg += `<td>${numeros[i]}</td>`; // Número
21 msg += `<td>${raiz(numeros[i])}</td>`; // Raíz cuadrada del número
22 msg += `<td>${cubo(numeros[i])}</td>`; // Cubo del número
23 msg += `<td>${fact(numeros[i])}</td>`; // Factorial del número
24 msg += `<td>${sumSerie(numeros[i])}</td>`; // Suma de la serie hasta el número
25 msg += "</tr>";
26 }
27 msg += "</tbody>";
28 msg += "</table>";
29 return msg;
30 };
31
32 // Función que calcula la raíz cuadrada de un número
33 let raiz = (numero) => {
34 return Math.sqrt(numero).toFixed(2);
35 };
36
37 // Función que calcula el cubo de un número
38 let cubo = (numero) => {
39 return Math.pow(numero, 3);
40 };
41
42 // Función que calcula el factorial de un número
43 let fact = (numero) => {
44 if (numero === 0 || numero === 1) {
45 return 1;
46 }
47 let fact = 1;
48 for (let i = 2; i <= numero; i++) {
49 fact *= i;
50 }
51 return fact;
52 };
53
54 // Función que calcula la suma de la serie hasta un número
55 let sumSerie = (numero) => {
56 if (numero === 0 || numero === 1) {
57 return 1;
58 }
59 let suma = 0;
60 for (let i = 1; i <= numero; i++) {
61 suma += i;
62 }
63 return suma;
64 };
65
66 // Selección de los botones de "Ver" y "Borrar"
67 let ver = document.querySelector("#ver");
68 let borrar = document.querySelector("#borrar");
69
70 // Event listener para mostrar la tabla cuando se hace clic en el botón "Ver"
71 ver.addEventListener("click", () => {
72 capa.innerHTML = num(numeros);
73 });
74
75 // Event listener para borrar la tabla cuando se hace clic en el botón "Borrar"
76 borrar.addEventListener("click", () => {
77 capa.innerHTML = "";
78 });
79
80 // Selección del formulario y el campo de entrada de número
81 let formulario = document.querySelector("#formulario");
82 let numero = document.querySelector("#numero");
83
84 // Event listener para agregar un número a la lista cuando se envía el formulario
85 formulario.addEventListener("submit", (event) => {
86 // Convertir el valor de entrada a número entero
87 let nume = parseInt(numero.value);
88 let error = document.querySelector("#error");
89 let msg = "";
90 let centinela = false;
91
92 // Validación del número
93 if (isNaN(nume)) {
94 msg = "Debe proporcionar un número válido";
95 centinela = true;
96 }
97
98 if (centinela) {
99 error.innerHTML = msg;
100 // Mostrar mensaje de error si la validación falla
101 } else {
102 numeros.push(nume);
103 // Agregar el número a la lista
104 capa.innerHTML = num(numeros);
105 // Actualizar la tabla
106 numero.value = "";
107 // Limpiar el campo de entrada
108 }
109
110 // Prevenir el envío del formulario
111 event.preventDefault();
112 });
113
114 // Event listener para limpiar el mensaje de error cuando el campo de entrada recibe foco
115 numero.addEventListener("focus", () => {
116 let error = document.querySelector("#error");
117 error.innerHTML = "";
118 });
