Proyectos (DIA 1 - 13)

Realizados gracias al curso "JAVASCRIPT TOTAL"
2026-08-15 02:50:10 +00:00 · 2026-01-30 19:16:11 -05:00
commit 03a7ef3253
67 changed files with 2204 additions and 0 deletions
@@ -0,0 +1,143 @@
+<!DOCTYPE html>
+<html lang="es">
+<head>
+    <meta charset="UTF-8">
+    <title>Responde Rápido!</title>
+    <link rel="stylesheet" href="styles.css">
+</head>
+
+<body onload="comenzarCuentaRegresiva()">
+
+    <div class="contenedor">
+        <h2>
+            Responde a las preguntas lo más rápido que puedas!
+            <span id="cuentaRegresiva">30</span>
+        </h2>
+
+        <p>1. ¿Cuál es la capital de Francia?</p>
+        <input type="text" id="respuesta1">
+
+        <p>2. (7 × 5) + 15</p>
+        <input type="text" id="respuesta2">
+
+        <p>3. Símbolo químico del agua?</p>
+        <input type="text" id="respuesta3">
+
+        <p>4. Año del descubrimiento de América?</p>
+        <input type="text" id="respuesta4">
+
+        <p>5. En qué año se creó el fútbol?</p>
+        <input type="text" id="respuesta5">
+
+        <br><br>
+
+        <button onclick="finalizado()">Terminé</button>
+        <br><br>
+        <button onclick="volverIntentar()">Volver a intentar</button>
+
+        <div id="resultado"></div>
+    </div>
+
+    <audio id="audioFinal">
+        <source src="gameover.mp3" type="audio/mpeg">
+    </audio>
+
+<script>
+let tiempo = 30;
+let intervalo;
+let tiempoLimite;
+
+function comenzarCuentaRegresiva() {
+    intervalo = setInterval(ticTac, 1000);
+    tiempoLimite = setTimeout(tiempoCumplido, 30000);
+}
+
+function ticTac() {
+    if (tiempo > 0) {
+        tiempo--;
+        document.getElementById("cuentaRegresiva").textContent = tiempo;
+    }
+
+    if (tiempo <= 10) {
+        document.getElementById("cuentaRegresiva").style.color = "darkred";
+    }
+
+    if (tiempo === 0) {
+        clearInterval(intervalo);
+    }
+}
+
+
+function tiempoCumplido() {
+    clearInterval(intervalo);
+    document.getElementById("cuentaRegresiva").textContent = 0
+    document.getElementById("audioFinal").play();
+
+    bloquearInputs();
+    alert("⏰ GAME OVER\nSe acabó el tiempo");
+}
+
+function finalizado() {
+    clearTimeout(tiempoLimite);
+    clearInterval(intervalo);
+
+    let puntaje = 0;
+    let resultado = "";
+
+    const r1 = document.getElementById("respuesta1").value.toLowerCase();
+    const r2 = document.getElementById("respuesta2").value;
+    const r3 = document.getElementById("respuesta3").value.toLowerCase();
+    const r4 = document.getElementById("respuesta4").value;
+    const r5 = document.getElementById("respuesta5").value;
+
+    if (r1 === "parís" || r1 === "paris") {
+        puntaje++; resultado += "1 ✅\n";
+    } else resultado += "1 ❌ (París)\n";
+
+    if (r2 === "50") {
+        puntaje++; resultado += "2 ✅\n";
+    } else resultado += "2 ❌ (50)\n";
+
+    if (r3 === "h2o" || r3 === "H2O") {
+        puntaje++; resultado += "3 ✅\n";
+    } else resultado += "3 ❌ (H2O)\n";
+
+    if (r4 === "1492") {
+        puntaje++; resultado += "4 ✅\n";
+    } else resultado += "4 ❌ (1492)\n";
+
+    if (r5 === "1863") {
+        puntaje++; resultado += "5 ✅\n";
+    } else resultado += "5 ❌ (1863)\n";
+
+    alert(
+        "📊 RESULTADOS\n\n" +
+        resultado +
+        "\n🎯 Puntaje final: " + puntaje + " / 5"
+    );
+
+    document.querySelectorAll("input").forEach(input => {
+        input.disabled = true;
+    });
+
+    document.querySelector("button").disabled = true;
+
+}
+
+function volverIntentar() {
+    location.reload();
+}
+
+document.getElementById("resultado").textContent = `Puntaje final: ${puntaje} / 5`;
+
+function bloquearInputs() {
+    document.querySelectorAll("input").forEach(input => {
+        input.disabled = true;
+    });
+}
+
+
+
+</script>
+</body>
+</html>
@@ -0,0 +1,67 @@
+html {
+    font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
+}
+
+body {
+    text-align: center;
+    background-color: #f4f1e6;
+}
+
+.contenedor {
+    background-color: white;
+    width: 420px;
+    margin: 40px auto;
+    padding: 20px;
+    border-radius: 12px;
+    box-shadow: 0 0 15px rgba(0, 0, 0, 0.15);
+}
+
+h2 {
+    color: darkkhaki;
+}
+
+p {
+    font-weight: bold;
+    font-style: italic;
+}
+
+input {
+    width: 180px;
+    height: 30px;
+    border-radius: 6px;
+    border: 1px solid #888;
+    text-align: center;
+}
+
+button {
+    width: 180px;
+    height: 50px;
+    background-color: darkkhaki;
+    border-radius: 6px;
+    border: none;
+    font-weight: bold;
+}
+
+button:hover {
+    background-color: olive;
+    cursor: pointer;
+}
+
+input:disabled {
+    background-color: #eee;
+    cursor: not-allowed;
+}
+
+#cuentaRegresiva {
+    border: 2px solid red;
+    color: red;
+    padding: 4px 10px;
+    font-size: 22px;
+    margin-left: 8px;
+}
+
+#resultado {
+    margin-top: 20px;
+    font-size: 20px;
+    font-weight: bold;
+}