Ein Code von adwq

Im Editor öffnen Veröffentlichen Sie Ihren Code

Empfohlen

10 February 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;
    }
});

Ein Code von adwq

Empfohlen

Ein Code von bachir123

Ein Code von lebdev

Eine Skyline bauen

HTML

CSS

JS

Empfohlen

Ein Code von bachir123

Ein Code von lebdev

Eine Skyline bauen

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS