Un code par adwq

Ouvrir dans l'éditeur Publiez votre code

Recommandé

26 May 2025

Générateur de code QR en JavaScript

25 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;
    }
});

Un code par adwq

Recommandé

Un code de Metehan

Générateur de code QR en JavaScript

Un code par securearray494

HTML

CSS

JS

Recommandé

Un code de Metehan

Générateur de code QR en JavaScript

Un code par securearray494

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS