Un codice di adwq

Apri nell'Editor Pubblica il Tuo Codice

Consigliato

27 May 2025

<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="style.css">
    <title>¿love?</title>
</head>
<body>                              
    <div class="container">

<h1 id="question">¿sabías que te amo?</h1>
        <div id="messageContainer" style="display: none;"></div>

</div>

CSS

body {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100vh;
  margin: 0;
  background-color: purple;
}

.container {
  text-align: center;
}

#gifContainerImg {
  width: 60%;
  height: 60%;
}

button {
  padding: 10px 20px;
  font-size: 16px;
  margin: 10px;
  cursor: pointer;
}

#siBtn {
  padding: 10px 20px;
  font-size: 16px;
  margin: 10px;
  cursor: pointer;
  background-color: #009705; /* verde */
  color: white;
  border: 2px solid #ffc0cb; /* Bordes rosa */
  border-radius: 10px; /* Esquinas redondeadas */
}

#noBtn {
  padding: 10px 20px;
  font-size: 16px;
  margin: 10px;
  cursor: pointer;
  background-color: #ff5733; /* Rojo */
  color: white;
  border: 2px solid #ffc0cb; /* Bordes rosa */
  border-radius: 10px; /* Esquinas redondeadas */
}

#noBtn span {
  font-size: 18px;
  color: #fcf4f4; /* Cambia el color del texto según tus preferencias */
}

#siBtn:hover {
  background-color: #006e00; /* Cambia a otro color en hover */
}

#noBtn:hover {
  background-color: #641e0d; /* Cambia a otro color en hover */
}

.bg-green {
  background-color: #ffffff; /* Nuevo color de fondo verde */
}

#messageContainer {
  font-size: 30px;
  color: #ff0000; /* Color rojo */
  font-family: "Arial", sans-serif; /* Fuente personalizada */
  text-shadow: 2px 2px 4px #000; /* Borde simulado */
  animation: pulse 0.5s infinite alternate; /* Animación de palpitación */
}

@keyframes pulse {
  from {
    transform: scale(1);
  }
  to {
    transform: scale(1.3); /* Zoom más grande */
  }
}

JS

let noButtonClickCount = 0; // Contador para el botón "No"
let noButtonState = 0; // Estado actual del botón "No"

// Mostrar el gif inicial
document.getElementById('gifContainer').style.display = 'block';

document.getElementById('siBtn').addEventListener('click', function() {
    // Ocultar el gif triste y mostrar el gif feliz
    document.getElementById('sadGifContainer').style.display = 'none';
    document.getElementById('sadGifContainer1').style.display = 'none';
    document.getElementById('sadGifContainer2').style.display = 'none';
    document.getElementById('gifContainer').style.display = 'none';
    document.getElementById('happyGifContainer').style.display = 'block';

// Ocultar los botones "Pregunta Sí" y "No "
    document.getElementById('question').style.display = 'none';
    document.getElementById('siBtn').style.display = 'none';
    document.body.classList.add('bg-green');
    document.getElementById('noBtn').style.display = 'none';

// Mostrar el mensaje específico
    document.getElementById('messageContainer').style.display = 'block';
    document.getElementById('messageContainer').innerHTML = '¡ahhhhhh si sabias, te amooooo';

// Mostrar otro gif después de 3 segundos
    setTimeout(function() {
        document.getElementById('happyGifContainer').style.display = 'none';
        document.getElementById('happyGifContainer2').style.display = 'block';
    }, 1000);

setTimeout(function() {
        document.getElementById('happyGifContainer2').style.display = 'none';
        document.getElementById('happyGifContainer3').style.display = 'block';
    }, 2000);

setTimeout(function() {
        document.getElementById('happyGifContainer3').style.display = 'none';
        document.getElementById('happyGifContainer4').style.display = 'block';
    }, 3000);
});

document.getElementById('noBtn').addEventListener('click', function() {
    switch (noButtonState) {
        case 0:
            // Primera vez haciendo clic en "No"
            document.getElementById('happyGifContainer').style.display = 'none';
            document.getElementById('gifContainer').style.display = 'none';
            document.getElementById('sadGifContainer').style.display = 'block';
            document.getElementById('noBtn').innerHTML = '¡no sabías?';
            noButtonClickCount++;
            noButtonState++;
            break;

case 1:
            document.getElementById('noBtn').innerHTML = '¡¿de verdad no sabías?!';
            document.getElementById('sadGifContainer').style.display = 'none';
            document.getElementById('sadGifContainer2').style.display = 'block';
            noButtonState++;
            break;

case 2:
            document.getElementById('noBtn').innerHTML = 'Estás segurita que no sabías, ¿eh?';
            document.getElementById('sadGifContainer').style.display = 'none';
            document.getElementById('sadGifContainer1').style.display = 'block';
            noButtonState++;
            break;

case 3:
            document.getElementById('noBtn').innerHTML = '¿enserio no sabías?';
            noButtonState++;
            break;

case 4:
            document.getElementById('noBtn').innerHTML = 'deberías saber';
            noButtonState++;
            break;

default:
            document.getElementById('noBtn').innerHTML = 'yo creo que si sabías';
            noButtonState = 0;
            break;
    }
});

Un codice di adwq

Consigliato

Carta di pagamento

Pulsante di download

Un codice di alejandrokundrah

HTML

CSS

JS

Consigliato

Carta di pagamento

Pulsante di download

Un codice di alejandrokundrah

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS