El código proporcionado es una página web simple que presenta dos botones (“Sí” y “No”) y un título (“¿Me amas?”). Cuando se hace clic en el botón “Sí”, aparece un mensaje emergente que dice “Te amo”. Cuando se hace clic en el botón “No”, el botón “Sí” crece en tamaño gradualmente. Además, al hacer clic en el botón “No”, se abre una ventana emergente que muestra un mensaje “Te amo” acompañado de un GIF animado.

El código está escrito en HTML, CSS y JavaScript. A continuación, se detallan los pasos clave de cómo se creó:

  1. Estructura HTML: Se utilizó HTML para crear la estructura básica de la página web. Se incluyeron elementos como <div>, <button>, <img> y <script> para definir los contenedores, botones, imágenes y scripts JavaScript.
  2. Estilización CSS: Se aplicaron estilos CSS para dar formato y diseño a la página. Se centraron los elementos en la página, se establecieron estilos para los botones y se agregaron transiciones para animaciones suaves.
  3. Funcionalidad JavaScript: Se empleó JavaScript para agregar funcionalidades interactivas a la página. Se añadieron event listeners a los botones para responder a los clics del usuario. Cuando se hace clic en el botón “Sí”, se muestra una alerta con el mensaje “Te amo”. Cuando se hace clic en el botón “No”, el tamaño del botón “Sí” aumenta gradualmente y se abre una ventana emergente con un mensaje y un GIF.

Con estos elementos combinados, se logró crear una página web interactiva y visualmente atractiva que responde a las acciones del usuario de diversas formas.

Sitio web : https://www.000webhost.com/
Código listo:

<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset=”UTF-8″>
<meta name=”viewport” content=”width=device-width, initial-scale=1.0″>
<title>Botones Si y No</title>
<style>
body {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
margin: 0;
flex-direction: column;
}

#buttonContainer {
position: relative;
text-align: center;
}

#title {
font-size: 24px;
margin-bottom: 20px;
}

.button {
padding: 10px 20px;
font-size: 16px;
border-radius: 5px;
cursor: pointer;
transition: font-size 0.3s ease;
}

.green {
background-color: #4CAF50;
color: white;
border: none;
}

.red {
background-color: #f44336;
color: white;
border: none;
}

.green:hover {
transform: scale(1.1);
}

.red:active {
animation: grow 1s infinite alternate;
}

@keyframes grow {
to {
font-size: 1000px;
}
}

#gif {
position: absolute;
top: -150px;
left: 50%;
transform: translateX(-50%);
z-index: -1;
}
</style>
</head>
<body>

<div id=”title”>¿Me amas?</div>

<div id=”buttonContainer”>
<img id=”gif” src=”https://media.giphy.com/media/TgZJIdfAkv9Xe/giphy.gif” alt=”Corazón latiendo”>
<button id=”yesButton” class=”button green”>Si</button>
<button id=”noButton” class=”button red”>No</button>
</div>

<script>
document.getElementById(“yesButton”).addEventListener(“click”, function() {
alert(“Te amo”);
});

document.getElementById(“noButton”).addEventListener(“click”, function() {
var currentSize = parseInt(window.getComputedStyle(document.getElementById(“yesButton”)).fontSize);
var newSize = currentSize + 30;
if (newSize <= 1000) {
document.getElementById(“yesButton”).style.fontSize = newSize + “px”;
var popup = window.open(“”, “_blank”, “width=200, height=200”);
popup.document.write(“<img src=’https://media.giphy.com/media/TgZJIdfAkv9Xe/giphy.gif’ alt=’corazon latiendo’>”);
popup.document.write(“<h1>Te amo</h1>”);
}
});
</script>

</body>
</html>

🌟 ¡Descubre, Aprende y Disfruta! 🌟 🔥 Sumérgete en un mundo de contenido fascinante y déjate cautivar por artículos emocionantes que abarcan desde tecnología hasta cultura. ¡La aventura te espera! 🔥
RushBet es una plataforma de apuestas en línea que brinda una experiencia emocionante a sus usuarios. Sin embargo, como en ...
Recuperar una cuenta de Google hackeada puede ser una experiencia desalentadora, pero con los pasos adecuados y las medidas de ...
La comunidad de ayuda de Google es un recurso invaluable para obtener respuestas a preguntas sobre una variedad de productos ...

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Recommended
Canva es una herramienta popular y fácil de usar para…
Cresta Posts Box by CP