¿Alguna vez has querido hacer una página web que sea divertida y que haga reír a tus amigos? Bueno, eso es justo lo que vamos a hacer hoy. Usaremos un poco de JavaScript, CSS, y una biblioteca genial llamada SweetAlert2 para crear una página que invita a tus amigos a comer alitas picantes. Pero aquí está el truco: el botón de «No» se moverá cada vez que intentes hacer clic en él. ¡Veamos cómo se hace!
¿Qué hace este código?
Aquí te explico el código que vamos a usar. Es simple pero efectivo, y te garantiza unas cuantas risas.
1. La Estructura HTML
Este es el esqueleto de la página. Básicamente, tenemos dos botones y un título que dice «¿Vamos por alitas, ultra mega picantes?».
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>.VAMOS POR ALITAS.</title>
<script src="https://unpkg.com/sweetalert2@9.5.3/dist/sweetalert2.all.min.js"></script>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="contenedor">
<p class="title">¿VAMOS POR ALITAS, ULTRA MEGA PICANTES?</p>
<button onclick="mostrar()" id="yesBtn"><p>SI</p></button>
<button id="noBtn"><p>NO</p></button>
</div>
<script src="index.js"></script>
</html>
2. La Magia de JavaScript
Este es el cerebro detrás de la diversión. Tenemos una función que muestra un mensaje gracioso cuando haces clic en «Sí» y un código que hace que el botón de «No» huya cuando intentas acercarte.
function mostrar(){
Swal.fire({
html: `
<h1>SABIA QUE DIRIAS SI</h2>
<img decoding="async" src="alitas.jpg" alt="">
<h2>LAS ALITAS NOS ESPERAN</h2>
`,
confirmButtonText: "VAMOS",
})
.then((confirmButtonText) => {
let url = new URL('https://blog.albertoguaman.com/');
open(url);
console.log('funciona xD');
})
}
const noBtn = document.querySelector('#noBtn');
noBtn.addEventListener('mouseover', function () {
const randomX = parseInt(Math.random() * 100);
const randomY = parseInt(Math.random() * 100);
noBtn.style.setProperty('top', randomY + '%');
noBtn.style.setProperty('left', randomX + '%');
noBtn.style.setProperty('transform', `translate(-${randomX}%,-${randomY}%)`);
})
Función
mostrar: Cuando haces clic en «Sí», aparece una ventana emergente con un mensaje divertido y una imagen de alitas, y luego te lleva a un enlace de WhatsApp para planear la salida.Botón Escurridizo «No»: Este botón no quiere que le digas que no a las alitas, así que cada vez que lo intentas, ¡se escapa a otra parte de la pantalla!
3. Estilos con CSS
El estilo es clave para que todo se vea bien. Aquí tenemos una animación de fondo que cambia de color y algunos estilos para los botones y el texto.
* {
margin: 0;
}
body {
background-image: linear-gradient(135deg, #00e7d4, #505488, #ef3f80, #161569, #ef3f80, #505488, #00E7D4);
background-size: 500%;
animation: fanimado 60s infinite;
}
.contenedor {
position: relative;
width: 100vw;
height: 100vh;
text-align: center;
}
.title{
padding: 50px;
}
p {
font-size: xx-large;
font-weight: bold;
}
p:hover {
color:#1df800;
}
h1{
color:black;
}
h2{
font-size: 25px;
color:black;
}
img{
border-style: dashed ;
width: 300px;
}
button {
font-size: xx-large;
padding: 0.75em;
color: #161569
}
#yesBtn {
transform: translate(-130%, 0);
position: absolute;
top: 50%;
left: 50%;
margin: -25px 0 0 -25px;
}
#noBtn {
position: absolute;
top: 50%;
left: 50%;
margin: -25px 0 0 -25px;
}
#yesBtn:hover{
color:#1df800;
}
@keyframes animat {
0% {
transform: scale(0);
}
100% {
transform: scale(1);
}
}
@keyframes fanimado {
0% {
background-image: 0% 50%;
}
50% {
background-position: 100% 50%;
}
100% {
background-position: 0% 50%;
}
}
Fondo Animado: El fondo cambia de color constantemente para mantener la página interesante.
Botones y Texto: Todo está diseñado para ser grande, claro y fácil de leer. Además, el botón «Sí» se ilumina al pasar el cursor sobre él.
Conclusión
¡Y ahí lo tienes! Una página web simple pero muy divertida que puedes compartir con tus amigos. Este ejemplo es perfecto para bromear un poco y aprender cómo usar JavaScript, CSS, y un poco de HTML para hacer que tus páginas sean más interactivas. ¡Anímate a personalizarla y ver qué otras ideas se te ocurren!
Visita mi sitio web Para acceder a mi GITHUB: albertoguaman.com
