WEBLEB
Home
AI Editor
Login
Pro
English
English
Français
Español
Motivation message
1,186
sergioarmijo30
Open In Editor
Publish Your Code
0
HTML
Copy
<!DOCTYPE html> <html lang="es"> <head> <meta charset="UTF-8"> <title>Sxrgio</title> <link rel="stylesheet" href="styles.css"> </head> <body> <h1>¡Bienvenido!</h1> <p>Escribe tu nombre para recibir un saludo y un mensaje motivador:</p> <p>Write your name to receive a greeating and a motivating message:</p> <input type="text" id="nombre" placeholder="Tu nombre aquí..."> <button onclick="saludar()">Enviar</button> <div id="resultado" class="mensaje"></div> <script src="java.js"></script> </body> </html>
CSS
Copy
body { font-family: 'Segoe UI', sans-serif; background: linear-gradient(to right, #d00303, #1bf6bf); color: #333; text-align: center; padding-top: 100px; } h1 { color: #dad1d1; } p{ color: #ffffff; } input, button { padding: 10px 20px; border: none; border-radius: 8px; font-size: 16px; margin: 10px; } input { width: 250px; } button { background-color: #000000; color: white; cursor: pointer; transition: background-color 0.3s; } button:hover { background-color: #1de28d; } .mensaje { margin-top: 30px; font-size: 20px; color: #222; background-color: rgba(255, 255, 255, 0.7); display: inline-block; padding: 20px; border-radius: 12px; }
JS
Copy
function saludar() { const nombre = document.getElementById("nombre").value.trim(); const mensajes = [ "¡Hoy es un gran día para empezar algo nuevo!", "¡Tienes un potencial increíble, no lo olvides!", "¡Confía en ti mismo y ve tras tus sueños!", "¡Cada paso que das te acerca a tu meta!", "¡No te rindas, lo mejor está por venir!" ]; if (nombre === "") { alert("Por favor, escribe tu nombre."); return; } const mensaje = mensajes[Math.floor(Math.random() * mensajes.length)]; document.getElementById("resultado").innerHTML = `<strong>¡Hola, ${nombre}!</strong><br>${mensaje}`; }
