From 5ab75c60f6fe4d2c629c43d33475d8685bd8bb1c Mon Sep 17 00:00:00 2001 From: Livia020799 <146645775+Livia020799@users.noreply.github.com> Date: Sat, 10 Feb 2024 17:19:03 +0100 Subject: [PATCH] Add files via upload --- index.html | 33 ++++++++++++++++ script.js | 114 +++++++++++++++++++++++++++++++++++++++++++++++++++++ style.css | 75 +++++++++++++++++++++++++++++++++++ 3 files changed, 222 insertions(+) create mode 100644 index.html create mode 100644 script.js create mode 100644 style.css diff --git a/index.html b/index.html new file mode 100644 index 0000000..e3cb122 --- /dev/null +++ b/index.html @@ -0,0 +1,33 @@ + + + + + CodePen - A Pen by livia oddi + + + + + + + + + + Valentine's Day Game + + + +
+ + + + +
+ + + + + + + + + diff --git a/script.js b/script.js new file mode 100644 index 0000000..358638f --- /dev/null +++ b/script.js @@ -0,0 +1,114 @@ +// main.js +var noCount = 0; +var yesPressed = false; +var yesButtonSize = noCount * 20 + 16; + +var noGifs = [ +"https://media.giphy.com/media/v1.Y2lkPTc5MGI3NjExZGczazFwYmFsc2ZzNXlqMm83eTl1aTJ5N3lkeDljdDJsMXB1Ym83OCZlcD12MV9pbnRlcm5hbF9naWZfYnlfaWQmY3Q9Zw/dJ3Fhbss0pegJE6h57/giphy.gif", + "https://media.giphy.com/media/DxGrZ1vY3I7OnA2SJp/giphy.gif", "https://media.giphy.com/media/v1.Y2lkPTc5MGI3NjExM2ZpZjVtMm4xNXFwbmF0c29wMTZpd256MDFlMnVpeDNwZW1mdDlreiZlcD12MV9pbnRlcm5hbF9naWZfYnlfaWQmY3Q9Zw/AdqYefsn2gp2ntmn9G/giphy.gif", + "https://media.giphy.com/media/f9BU5XaqJEDONLgtAX/giphy.gif", + "https://media.giphy.com/media/Sf7VG0ODkwkQ7P9N3a/giphy.gif", + "https://media.giphy.com/media/i7Bi7uJz4SgsKNyFGP/giphy.gif", + "https://media.giphy.com/media/uQeD9Z747wHH6DvQjr/giphy.gif", "https://media.giphy.com/media/v1.Y2lkPTc5MGI3NjExeTgwbTI4cGFtcjJmbmRhZ282YWo0cDVweGEyZXY3ZGh0NDVhNmZkeCZlcD12MV9pbnRlcm5hbF9naWZfYnlfaWQmY3Q9Zw/UzWcMXc4biOouz5PDr/giphy.gif", + //"https://media.giphy.com/media/a9a64w8UYWOvImkzdc/giphy.gif", + "https://media.giphy.com/media/NubDxhSINCrlP99WsZ/giphy.gif", + "https://media.giphy.com/media/hR0K2ihWQD63pWFlrB/giphy.gif", + "https://media.giphy.com/media/H33qhUPbaxww2AkFyz/giphy.gif", + "https://media.giphy.com/media/SDXUaQuG6cJf6JtJjs/giphy.gif", + "https://media.giphy.com/media/P9xqihIxP1BvU5BBDk/giphy.gif", "https://media.giphy.com/media/v1.Y2lkPTc5MGI3NjExNXAzMjFjNHQyb2t0ZnkzcGo2MzM0MXlvYTJzMTJwMm9qNHdtYnk5dCZlcD12MV9pbnRlcm5hbF9naWZfYnlfaWQmY3Q9Zw/CeNuBAIjvH7CmaKzQD/giphy.gif", "https://media.giphy.com/media/v1.Y2lkPTc5MGI3NjExdTBnN3VhMjk3OHZoOGQ2MHZjcXB1NTJhc2lrbzdmeHZmZTYzcGdzeSZlcD12MV9pbnRlcm5hbF9naWZfYnlfaWQmY3Q9Zw/bip1IyfvpRvaqSLVdp/giphy.gif", + "https://media.giphy.com/media/8MxvuVVJHvuMW86A64/giphy.gif", +]; + +function handleNoClick() { + noCount++; + yesButtonSize += noCount * 1 + 0.6; // Increase the size of the "Yes" button by 20 pixels + updateApp(); + var index = noCount % noGifs.length; // Calculate the index + var selectedGif = noGifs[index]; // Select the GIF URL based on the index + var noGifElement = document.getElementById('noGif'); // Get the GIF element + if (noGifElement) { + noGifElement.src = selectedGif; // Update the GIF source + } else { + console.error("No element with id 'noGif' found."); + } + + // Now update the text next to the "No" button + var noButtonTextElement = document.getElementById('noButtonText'); + if (noButtonTextElement) { + // Clear the existing text content before setting the new text + //noButtonTextElement.textContent = ''; + noButtonTextElement.textContent = getNoButtonText(); // Set the new text + + } else { + console.error("No element with id 'noButtonText' found."); + } +} + +// Helper function to create a text node if it doesn't exist +function createTextNode(parentElement) { + var textNode = document.createTextNode(''); + parentElement.appendChild(textNode); + return textNode; +} + + +// Event listener for the "No" button +document.getElementById('noButton').addEventListener('click', handleNoClick); + +function getNoButtonText() { + var phrases = [ + "No", + "Are you sure?", + "Really sure?", + "Think again!", + "Last chance!", + "Surely not?", + "You might regret this!", + "Give it another thought!", + "Are you absolutely certain?", + "This could be a mistake!", + "Have a heart!", + "Don't be so cold!", + "Change of heart?", + "Wouldn't you reconsider?", + "Is that your final answer?", + "You're breaking my heart 😔" + ]; + + // Check if we have reached the last phrase and reset if necessary + if (noCount >= phrases.length) { + noCount = 0; // Reset the count + yesButtonSize = 15; // Reset the button size + updateApp(); // Refresh the app state + } + return phrases[Math.min(noCount, phrases.length - 1)]; +} + +function updateApp() { + var app = document.getElementById('app'); + app.innerHTML = ''; // Clear current content + + if (yesPressed) { + app.innerHTML += '
yay 🥰🥰
'; + document.body.style.backgroundColor = "#FFCAEC"; // Set background color to #FFCAEC + } else { + app.innerHTML += `

Will you be my Valentine?

`; + var noButtonTextElement = document.getElementById('noButton'); + if (noButtonTextElement) { + noButtonTextElement.textContent = getNoButtonText(); // Set the new text + } else { + console.error("No element with id 'noButton' found."); + } + var yesButton = document.querySelector('.bg-green-500'); + if (yesButton) { + yesButton.style.fontSize = `${yesButtonSize}px`; // Update the font size of the "Yes" button + } + } +} + +function setYesPressed() { + yesPressed = true; + updateApp(); +} + +updateApp(); // Initial render \ No newline at end of file diff --git a/style.css b/style.css new file mode 100644 index 0000000..d938467 --- /dev/null +++ b/style.css @@ -0,0 +1,75 @@ +/* Basic styles for the game */ +body { + font-family: Arial, sans-serif; + background-color: #f0f0f0; +} + +#app { + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + height: calc(100vh - 16px); + margin-top: -16px; +} + +.flex { + display: flex; + align-items: center; + justify-content: center; +} + +.my-4 { + margin-top: 1rem; + margin-bottom: 1rem; +} + +.text-4xl { + font-size: 2rem; +} + +.font-bold { + font-weight: bold; +} + +.py-2 { + padding-top: 0.5rem; + padding-bottom: 0.5rem; +} + +.px-4 { + padding-left: 1rem; + padding-right: 1rem; +} + +.rounded { + border-radius: 0.50rem; +} + +.bg-green-500 { + background-color: #8FBC8B; + margin-right: 10px; + border: 2px solid #008000; +} + +.hover\:bg-green-700:hover { + background-color: #C2DFC2; +} + +.text-white { + color: black; +} + +.bg-red-500 { + background-color: #FF6961; + margin-left: 10px; + border: 2px solid #8B0000; +} + +.hover\:bg-red-700:hover { + background-color: #ff7f7f; +} + +.h-[200px] { + height: 200px; +} \ No newline at end of file