Cómo crear un generador de frases con ChatGPT

La capacidad de crear scripts HTML sin conocimientos avanzados de programación se ha ampliado muchísimo gracias a herramientas como ChatGPT. Cualquier persona puede generar código funcional con solo describir lo que necesita.

En este post te enseño cómo crear un generador de frases aleatorias que puedes usar en tu web o enviar como detalle a alguien especial 😍

¿Qué vamos a crear?

Un generador de frases que:

Muestra frases aleatorias al hacer clic en un botón
Tiene una animación de carga
Se puede personalizar con tus propias frases
Es responsive y se ve bien en móvil

Prompt para ChatGPT

El truco está en darle instrucciones claras a ChatGPT. Aquí tienes el prompt listo para copiar:

Genera código HTML, CSS y JavaScript para un generador de frases aleatorias con estas características:

1. Diseño centrado y responsive
2. Botón con hover effect
3. Animación de carga (1 segundo)
4. Las frases deben aparecer con un fade-in
5. Estilo moderno con bordes redondeados

Frases a incluir:
1. Hoy tendrás un día MARAVILLOSO 😇
2. Hoy tendrás un día ESPECTACULAR 😇
3. Hoy tendrás un día FENOMENAL 😊
4. Hoy tendrás un día EXTRAORDINARIO 🤩
5. Hoy tendrás un día IMPRESIONANTE 🥳
6. Hoy tendrás un día GENIAL 🤩
7. Hoy tendrás un día FABULOSO 🥳
8. Hoy tendrás un día MAGNÍFICO 😉
9. Hoy tendrás un día SUBLIME 🤭
10. Hoy tendrás un día ESTUPENDO 😉

Usa colores pastel y un estilo limpio.

Código listo para usar

Si prefieres ahorrarte el paso anterior, aquí tienes el código ya funcionando. Solo copia y pega en un archivo .html:

<!DOCTYPE html>
<html lang="es">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Generador de frases</title>
  <style>
    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }

    body {
      min-height: 100vh;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      background: linear-gradient(135deg, #ffecd2 0%, #fcb69f 100%);
      font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
      padding: 20px;
    }

    .container {
      text-align: center;
      background: white;
      padding: 40px;
      border-radius: 20px;
      box-shadow: 0 10px 40px rgba(0,0,0,0.1);
      max-width: 500px;
      width: 100%;
    }

    h1 {
      color: #e74c3c;
      font-size: 24px;
      margin-bottom: 30px;
    }

    button {
      background: linear-gradient(135deg, #ff6b6b, #ee5a5a);
      color: white;
      font-size: 18px;
      font-weight: 600;
      padding: 15px 40px;
      border: none;
      border-radius: 50px;
      cursor: pointer;
      transition: all 0.3s ease;
      box-shadow: 0 4px 15px rgba(238, 90, 90, 0.4);
    }

    button:hover {
      transform: translateY(-2px);
      box-shadow: 0 6px 20px rgba(238, 90, 90, 0.5);
    }

    button:active {
      transform: translateY(0);
    }

    .loading {
      font-size: 30px;
      margin-top: 30px;
      animation: spin 1s linear infinite;
      display: none;
    }

    @keyframes spin {
      from { transform: rotate(0deg); }
      to { transform: rotate(360deg); }
    }

    #frase {
      font-size: 22px;
      color: #2c3e50;
      margin-top: 30px;
      min-height: 60px;
      opacity: 0;
      transition: opacity 0.5s ease;
    }

    #frase.visible {
      opacity: 1;
    }

    .emoji {
      font-size: 40px;
      margin-top: 15px;
    }
  </style>
</head>
<body>
  <div class="container">
    <h1>✨ Generador de buenos deseos ✨</h1>
    <button onclick="generarFrase()">Descubre tu mensaje</button>
    <div class="loading" id="loading">⏳</div>
    <p id="frase"></p>
  </div>

  <script>
    const frases = [
      "Hoy tendrás un día MARAVILLOSO 😇",
      "Hoy tendrás un día ESPECTACULAR 😇",
      "Hoy tendrás un día FENOMENAL 😊",
      "Hoy tendrás un día EXTRAORDINARIO 🤩",
      "Hoy tendrás un día IMPRESIONANTE 🥳",
      "Hoy tendrás un día GENIAL 🤩",
      "Hoy tendrás un día FABULOSO 🥳",
      "Hoy tendrás un día MAGNÍFICO 😉",
      "Hoy tendrás un día SUBLIME 🤭",
      "Hoy tendrás un día ESTUPENDO 😉",
      "Hoy tendrás un día INCREÍBLE 😇",
      "Hoy tendrás un día GRANDIOSO 🤭",
      "Hoy tendrás un día SENSACIONAL 🌟",
      "Hoy tendrás un día SOBRESALIENTE 🥳",
      "Hoy tendrás un día EXCEPCIONAL 🥳",
      "Hoy tendrás un día ALUCINANTE 😇",
      "Hoy tendrás un día ESTELAR ⭐"
    ];

    function generarFrase() {
      const fraseElement = document.getElementById('frase');
      const loadingElement = document.getElementById('loading');
      
      // Ocultar frase anterior y mostrar loading
      fraseElement.classList.remove('visible');
      loadingElement.style.display = 'block';
      
      // Esperar 1 segundo y mostrar nueva frase
      setTimeout(() => {
        const indice = Math.floor(Math.random() * frases.length);
        fraseElement.textContent = frases[indice];
        loadingElement.style.display = 'none';
        fraseElement.classList.add('visible');
      }, 1000);
    }
  </script>
</body>
</html>

Cómo personalizarlo

Cambiar las frases

Busca el array frases en el código JavaScript y modifica o añade las que quieras:

const frases = [
  "Tu primera frase aquí 🎉",
  "Otra frase personalizada 💪",
  "Las que quieras añadir ✨"
];

Cambiar los colores

Modifica estas propiedades en el CSS:

Elemento	Propiedad	Valor actual
Fondo	`background` en body	Gradiente naranja pastel
Botón	`background` en button	Gradiente rojo
Texto frase	`color` en #frase	#2c3e50 (azul oscuro)

Personalizar el botón

button {
  background: linear-gradient(135deg, #667eea, #764ba2); /* Morado */
  /* o un color sólido: */
  background: #3498db; /* Azul */
}

Más ideas de generadores

Puedes adaptar este código para crear:

Generador de frases motivacionales:

const frases = [
  "El éxito es la suma de pequeños esfuerzos repetidos día tras día 💪",
  "No cuentes los días, haz que los días cuenten ⏰",
  "El único límite eres tú mismo 🚀",
  "Cree en ti, aunque nadie más lo haga 🌟"
];

Generador de frases de amor:

const frases = [
  "Eres lo mejor que me ha pasado ❤️",
  "Contigo todo es mejor 💕",
  "Mi lugar favorito es junto a ti 🥰",
  "Gracias por existir 💝"
];

Generador de chistes:

const frases = [
  "¿Qué le dice un jaguar a otro? Jaguar you! 🐆",
  "Me robaron todas las lámparas. Estoy deluminado 💡",
  "¿Cómo se llama el pez más negativo? Pesimista 🐟"
];

Cómo usarlo en tu web

Opción 1: Archivo HTML independiente

Copia el código en un archivo .html
Ábrelo directamente en el navegador
Compártelo como quieras

Opción 2: Incrustar en WordPress

Ve a tu página/post en WordPress
Añade un bloque “HTML personalizado”
Pega el código
Publica

Opción 3: Como página standalone

Sube el archivo HTML a tu hosting
Comparte el enlace directo

💡

Si quieres enviárselo a alguien, puedes crear un archivo HTML, subirlo a tu hosting y compartir el enlace. Es un detalle original.

Añadir más funcionalidades

Si quieres ir un paso más allá, pide a ChatGPT que añada:

Modifica el código del generador de frases para añadir:
- Botón para copiar la frase al portapapeles
- Opción de compartir en WhatsApp
- Animación de confetti al mostrar la frase
- Sonido al hacer clic (opcional)

ChatGPT te devolverá el código actualizado con las nuevas funciones.

Crear un generador de frases con ChatGPT es muy sencillo y es un buen ejercicio para empezar a usar IA para programar. Puedes personalizarlo como quieras y usarlo para sorprender a alguien especial.

¿Tienes alguna duda? Déjamela en los comentarios.