index.html
1 <!DOCTYPE html> 2 <html lang="es"> 3 4 <head> 5 <meta charset="UTF-8"> 6 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 7 <title>Laboratorio 2</title> 8 <script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4"></script> 9 </head> 10 11 <body class="bg-slate-50 text-slate-900 font-sans p-8 max-w-4xl mx-auto"> 12 13 <section class="mb-12 p-8 bg-white rounded-2xl shadow-sm border border-slate-200"> 14 <h2 class="text-3xl font-extrabold mb-6 text-indigo-600 border-b-2 border-indigo-50 pb-3">1: Tabla de Cuadrados 15 y Cubos</h2> 16 <div id="resultado1" class="overflow-x-auto"></div> 17 <table class="w-full border-collapse rounded-lg overflow-hidden shadow-sm"> 18 <thead> 19 <tr class="bg-indigo-600 text-white"> 20 <th class="p-3 text-left">Número</th> 21 <th class="p-3 text-left">Cuadrado</th> 22 <th class="p-3 text-left">Cubo</th> 23 </tr> 24 </thead> 25 <tbody class="divide-y divide-slate-100"> 26 <script> 27 (() => { 28 const num = parseInt(prompt("Problema 1: Ingresa un número:")); 29 30 if (!isNaN(num)) { 31 for (let i = 1; i <= num; i++) { 32 document.write(` 33 <tr class="hover:bg-slate-50 transition-colors"> 34 <td class="p-3 font-medium text-slate-600">${i}</td> 35 <td class="p-3 text-slate-600">${i * i}</td> 36 <td class="p-3 text-slate-600">${i * i * i}</td> 37 </tr>`); 38 } 39 } 40 })(); 41 </script> 42 </tbody> 43 </table> 44 </section> 45 46 <section class="mb-12 p-8 bg-white rounded-2xl shadow-sm border border-slate-200"> 47 <h2 class="text-3xl font-extrabold mb-6 text-indigo-600 border-b-2 border-indigo-50 pb-3">2: Suma Aleatoria</h2> 48 <div id="resultado2" class="space-y-2"></div> 49 <script> 50 (() => { 51 const n1 = Math.floor(Math.random() * 100); 52 const n2 = Math.floor(Math.random() * 100); 53 const inicio = Date.now(); 54 const respuesta = parseInt(prompt(`Problema 2: ¿Cuánto es ${n1} + ${n2}?`)); 55 const fin = Date.now(); 56 const tiempo = (fin - inicio) / 1000; 57 const esCorrecto = respuesta === (n1 + n2); 58 document.getElementById('resultado2').innerHTML = ` 59 <p class="text-lg">Resultado: <span class="font-bold ${esCorrecto ? "text-green-600" : "text-red-600"}">${esCorrecto ? "Correcto" : "Incorrecto"}</span></p> 60 <p class="text-slate-500 italic">Tiempo tardado: ${tiempo} segundos</p> 61 `; 62 })(); 63 </script> 64 </section> 65 66 <section class="mb-12 p-8 bg-white rounded-2xl shadow-sm border border-slate-200"> 67 <h2 class="text-3xl font-extrabold mb-6 text-indigo-600 border-b-2 border-indigo-50 pb-3">3: Contador</h2> 68 <div id="resultado3" 69 class="bg-slate-50 p-4 rounded-lg font-mono text-sm border border-slate-100 whitespace-pre"></div> 70 <script> 71 function contador(arreglo) { 72 let negativos = 0, ceros = 0, positivos = 0; 73 for (let n of arreglo) { 74 if (n < 0) negativos++; 75 else if (n === 0) ceros++; 76 else positivos++; 77 } 78 return {negativos, ceros, positivos}; 79 } 80 81 const arr3 = [-5, 0, 10, -2, 0, 5, 8]; 82 const res3 = contador(arr3); 83 document.getElementById('resultado3').innerText = `Arreglo: [${arr3}] 84 Negativos: ${res3.negativos}, Ceros: ${res3.ceros}, Positivos: ${res3.positivos}`; 85 86 console.assert(JSON.stringify(contador([-1, 0, 1])) === JSON.stringify({negativos: 1, ceros: 1, positivos: 1})); 87 console.assert(JSON.stringify(contador([0, 0, 0])) === JSON.stringify({negativos: 0, ceros: 3, positivos: 0})); 88 </script> 89 </section> 90 91 <section class="mb-12 p-8 bg-white rounded-2xl shadow-sm border border-slate-200"> 92 <h2 class="text-3xl font-extrabold mb-6 text-indigo-600 border-b-2 border-indigo-50 pb-3">4: Promedios</h2> 93 <div id="resultado4" 94 class="bg-slate-50 p-4 rounded-lg font-mono text-sm border border-slate-100 whitespace-pre"></div> 95 <script> 96 function promedios(matriz) { 97 return matriz.map(fila => fila.reduce((a, b) => a + b, 0) / fila.length); 98 } 99 100 const matriz4 = [[10, 10, 10], [5, 15], [1, 2, 3, 4]]; 101 const res4 = promedios(matriz4); 102 document.getElementById('resultado4').innerText = `Matriz: ${JSON.stringify(matriz4)} 103 Promedios: [${res4}]`; 104 105 console.assert(JSON.stringify(promedios([[2, 4], [10, 20]])) === JSON.stringify([3, 15])); 106 </script> 107 </section> 108 109 <section class="mb-12 p-8 bg-white rounded-2xl shadow-sm border border-slate-200"> 110 <h2 class="text-3xl font-extrabold mb-6 text-indigo-600 border-b-2 border-indigo-50 pb-3">5: Inverso</h2> 111 <div id="resultado5" 112 class="bg-slate-50 p-4 rounded-lg font-mono text-sm border border-slate-100 whitespace-pre"></div> 113 <script> 114 function inverso(num) { 115 const s = Math.abs(num).toString().split('').reverse().join(''); 116 return parseInt(s) * Math.sign(num); 117 } 118 119 const num5 = 12345; 120 document.getElementById('resultado5').innerText = `Número: ${num5} 121 Inverso: ${inverso(num5)}`; 122 123 console.assert(inverso(123) === 321); 124 console.assert(inverso(-456) === -654); 125 console.assert(inverso(100) === 1); 126 </script> 127 </section> 128 129 <section class="mb-12 p-8 bg-white rounded-2xl shadow-sm border border-slate-200"> 130 <h2 class="text-3xl font-extrabold mb-6 text-indigo-600 border-b-2 border-indigo-50 pb-3">6: Gestión de Tareas 131 </h2> 132 <p class="mb-4 text-slate-600 italic">Este sistema permite gestionar tareas pendientes, permitiendo marcarlas 133 como completadas y obtener su descripción formateada.</p> 134 <div id="resultado6" class="space-y-3"></div> 135 <script> 136 class Tarea { 137 138 constructor(titulo, prioridad) { 139 this.titulo = titulo; 140 this.prioridad = prioridad; 141 this.completada = false; 142 } 143 144 145 completar() { 146 this.completada = true; 147 }; 148 149 obtenerInfo() { 150 const statusClass = this.completada ? "bg-green-100 text-green-700" : "bg-amber-100 text-amber-700"; 151 const priorityClass = this.prioridad === "Alta" ? "text-red-600 font-bold" : "text-slate-500"; 152 return ` 153 <div class="flex items-center space-x-3 p-3 rounded-lg border border-slate-100 shadow-sm"> 154 <span class="px-2 py-1 rounded text-xs font-bold uppercase ${statusClass}"> 155 ${this.completada ? "SI" : "NO"} 156 </span> 157 <span class="flex-grow font-medium">${this.titulo}</span> 158 <span class="text-xs ${priorityClass}">${this.prioridad}</span> 159 </div>`; 160 }; 161 } 162 163 const t1 = new Tarea("Estudiar JS", "Alta"); 164 const t2 = new Tarea("Hacer ejercicio", "Media"); 165 t1.completar(); 166 167 document.getElementById('resultado6').innerHTML = ` 168 ${t1.obtenerInfo()} 169 ${t2.obtenerInfo()} 170 `; 171 172 const testTarea = new Tarea("Test", "Baja"); 173 console.assert(testTarea.completada === false); 174 testTarea.completar(); 175 console.assert(testTarea.completada === true); 176 </script> 177 </section> 178 179 </body> 180 181 </html>