Curso: Instrucciones a una IA para Proyectos con JavaScript

Introducción

Una IA como ChatGPT puede ayudarte a crear proyectos con JavaScript. Este curso te guiará paso a paso en cómo dar instrucciones claras y específicas para crear aplicaciones web interactivas.

Ejercicio 1: Página HTML Básica con JavaScript

Instrucción para la IA: "Crea una página HTML básica que muestre un mensaje de bienvenida usando JavaScript."

<!DOCTYPE html>
<html lang="es">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Bienvenida</title>
  <style>
    body {
      font-family: Arial, sans-serif;
      display: flex;
      justify-content: center;
      align-items: center;
      height: 100vh;
      margin: 0;
      background-color: #f0f0f0;
    }
    h1 {
      color: #333;
      text-align: center;
    }
  </style>
</head>
<body>
  <h1 id="mensaje"></h1>
  <script>
    document.getElementById("mensaje").textContent = "¡Bienvenido a mi página!";
  </script>
</body>
</html>

Ejercicio 2: Interactividad con Eventos

Instrucción para la IA: "Crea un botón que muestre un mensaje cuando se haga clic en él."

<!DOCTYPE html>
<html lang="es">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Interactividad</title>
  <style>
    body {
      display: flex;
      flex-direction: column;
      align-items: center;
      padding: 50px;
      font-family: Arial, sans-serif;
    }
    button {
      padding: 10px 20px;
      font-size: 16px;
      cursor: pointer;
      background: #4CAF50;
      color: white;
      border: none;
      border-radius: 5px;
    }
    #mensaje {
      margin-top: 20px;
      font-size: 18px;
    }
  </style>
</head>
<body>
  <button id="miBoton">Haz clic aquí</button>
  <p id="mensaje"></p>
  <script>
    document.getElementById("miBoton").addEventListener("click", function() {
      document.getElementById("mensaje").textContent = "¡Hiciste clic!";
    });
  </script>
</body>
</html>

Ejercicio 3: Generador de Números Aleatorios

Instrucción para la IA: "Crea un generador de números aleatorios entre 1 y 100."

<!DOCTYPE html>
<html lang="es">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Generador de Números</title>
  <style>
    body {
      display: flex;
      flex-direction: column;
      align-items: center;
      padding: 50px;
      font-family: Arial, sans-serif;
    }
    button {
      padding: 10px 20px;
      font-size: 16px;
      cursor: pointer;
      background: #4CAF50;
      color: white;
      border: none;
      border-radius: 5px;
    }
    #resultado {
      margin-top: 20px;
      font-size: 24px;
      font-weight: bold;
    }
  </style>
</head>
<body>
  <button id="generar">Generar Número</button>
  <p id="resultado"></p>
  <script>
    document.getElementById("generar").addEventListener("click", function() {
      let numero = Math.floor(Math.random() * 100) + 1;
      document.getElementById("resultado").textContent = "Número generado: " + numero;
    });
  </script>
</body>
</html>

Ejercicio 4: Contador Interactivo

Instrucción para la IA: "Crea un contador que aumente o disminuya con botones."

<!DOCTYPE html>
<html lang="es">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Contador</title>
  <style>
    body {
      display: flex;
      justify-content: center;
      align-items: center;
      height: 100vh;
      margin: 0;
      font-family: Arial, sans-serif;
    }
    .contador-container {
      text-align: center;
    }
    button {
      padding: 10px 20px;
      font-size: 20px;
      margin: 0 10px;
      cursor: pointer;
      background: #4CAF50;
      color: white;
      border: none;
      border-radius: 5px;
    }
    #contador {
      font-size: 40px;
      margin: 0 20px;
    }
  </style>
</head>
<body>
  <div class="contador-container">
    <button id="disminuir">-</button>
    <span id="contador">0</span>
    <button id="aumentar">+</button>
  </div>
  <script>
    let contador = 0;
    document.getElementById("aumentar").addEventListener("click", function() {
      contador++;
      document.getElementById("contador").textContent = contador;
    });
    document.getElementById("disminuir").addEventListener("click", function() {
      contador--;
      document.getElementById("contador").textContent = contador;
    });
  </script>
</body>
</html>

Ejercicio 5: Lista de Tareas (To-Do List)

Instrucción para la IA: "Crea una lista de tareas donde el usuario pueda agregar y eliminar elementos."

<!DOCTYPE html>
<html lang="es">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Lista de Tareas</title>
  <style>
    body {
      font-family: Arial, sans-serif;
      max-width: 500px;
      margin: 20px auto;
      padding: 20px;
    }
    .input-container {
      display: flex;
      gap: 10px;
      margin-bottom: 20px;
    }
    input {
      flex: 1;
      padding: 10px;
      font-size: 16px;
      border: 1px solid #ddd;
      border-radius: 5px;
    }
    button {
      padding: 10px 20px;
      background: #4CAF50;
      color: white;
      border: none;
      border-radius: 5px;
      cursor: pointer;
    }
    ul {
      list-style: none;
      padding: 0;
    }
    li {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 10px;
      background: #f8f9fa;
      margin-bottom: 5px;
      border-radius: 5px;
    }
    .eliminar {
      color: red;
      cursor: pointer;
    }
  </style>
</head>
<body>
  <div class="input-container">
    <input type="text" id="tarea" placeholder="Nueva tarea">
    <button id="agregar">Agregar</button>
  </div>
  <ul id="lista"></ul>
  <script>
    document.getElementById("agregar").addEventListener("click", function() {
      let tarea = document.getElementById("tarea").value;
      if (tarea) {
        let li = document.createElement("li");
        li.innerHTML = tarea + '<span class="eliminar">×</span>';
        document.getElementById("lista").appendChild(li);
        document.getElementById("tarea").value = "";
        
        li.querySelector(".eliminar").addEventListener("click", function() {
          li.remove();
        });
      }
    });
  </script>
</body>
</html>

Ejercicio 6: Reloj en Tiempo Real

Instrucción para la IA: "Crea un reloj que muestre la hora actual en tiempo real."

<!DOCTYPE html>
<html lang="es">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Reloj Digital</title>
  <style>
    body {
      display: flex;
      justify-content: center;
      align-items: center;
      height: 100vh;
      margin: 0;
      background: #f0f0f0;
      font-family: Arial, sans-serif;
    }
    #reloj {
      font-size: 5rem;
      font-family: monospace;
      background: white;
      padding: 2rem;
      border-radius: 10px;
      box-shadow: 0 0 10px rgba(0,0,0,0.1);
    }
  </style>
</head>
<body>
  <div id="reloj"></div>
  <script>
    function actualizarReloj() {
      let ahora = new Date();
      let hora = ahora.getHours().toString().padStart(2, '0');
      let minutos = ahora.getMinutes().toString().padStart(2, '0');
      let segundos = ahora.getSeconds().toString().padStart(2, '0');
      document.getElementById("reloj").textContent = 
        `${hora}:${minutos}:${segundos}`;
    }
    setInterval(actualizarReloj, 1000);
    actualizarReloj();
  </script>
</body>
</html>

Ejercicio 7: Juego de Adivinar el Número

Instrucción para la IA: "Crea un juego donde el usuario deba adivinar un número entre 1 y 100."

<!DOCTYPE html>
<html lang="es">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Adivina el Número</title>
  <style>
    body {
      font-family: Arial, sans-serif;
      max-width: 500px;
      margin: 40px auto;
      padding: 20px;
      text-align: center;
    }
    input {
      padding: 10px;
      font-size: 16px;
      width: 100px;
      margin: 10px;
    }
    button {
      padding: 10px 20px;
      font-size: 16px;
      background: #4CAF50;
      color: white;
      border: none;
      border-radius: 5px;
      cursor: pointer;
    }
    #resultado {
      margin-top: 20px;
      font-size: 18px;
    }
    .correcto {
      color: #4CAF50;
    }
    .incorrecto {
      color: #f44336;
    }
  </style>
</head>
<body>
  <h1>Adivina el número (1-100)</h1>
  <input type="number" id="numero" min="1" max="100">
  <button id="adivinar">Adivinar</button>
  <p id="resultado"></p>
  <script>
    let numeroSecreto = Math.floor(Math.random() * 100) + 1;
    let intentos = 0;

    document.getElementById("adivinar").addEventListener("click", function() {
      let numeroUsuario = parseInt(document.getElementById("numero").value);
      intentos++;

      if (numeroUsuario === numeroSecreto) {
        document.getElementById("resultado").innerHTML = 
          `<span class="correcto">¡Correcto! Lo lograste en ${intentos} intentos.</span>`;
        numeroSecreto = Math.floor(Math.random() * 100) + 1;
        intentos = 0;
      } else if (numeroUsuario < numeroSecreto) {
        document.getElementById("resultado").innerHTML = 
          `<span class="incorrecto">El número es mayor</span>`;
      } else {
        document.getElementById("resultado").innerHTML = 
          `<span class="incorrecto">El número es menor</span>`;
      }
    });
  </script>
</body>
</html>