From 823e30dd0ec2507d5290d95459a2fa9cd926af13 Mon Sep 17 00:00:00 2001 From: emily202777 <126031180+emily202777@users.noreply.github.com> Date: Thu, 24 Oct 2024 11:36:08 -0400 Subject: [PATCH] Create Eggscript.js --- Eggscript.js | 51 +++++++++++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 51 insertions(+) create mode 100644 Eggscript.js diff --git a/Eggscript.js b/Eggscript.js new file mode 100644 index 0000000..432b7d5 --- /dev/null +++ b/Eggscript.js @@ -0,0 +1,51 @@ +// JavaScript file: Eggscript.js + +let clickCount = 0; // To track the number of clicks + +// Select the image by its ID +const eggImage = document.getElementById('eggImage'); + +// Add an event listener to track clicks on the image +eggImage.addEventListener('click', function () { + clickCount++; // Increment the click count + + // First transition: After 3 clicks, change the image to crackingEgg.png + if (clickCount === 3) { + eggImage.src = 'crackingEgg.png'; // Change the image to the cracking egg + } + + // Second transition: After 8 total clicks, change the image to fullyCracked.png and remove other elements + if (clickCount === 8) { + eggImage.src = 'fullyCracked.png'; // Change the image to the fully cracked egg + + // Hide the existing button (if present) + const buttonContainer = document.querySelector('.button-container'); + if (buttonContainer) { + buttonContainer.style.display = 'none'; // Hide the previous button + } + + // Add a new button on top of the fully cracked image + addFullyCrackedButton(); // Call function to add the new button + } +}); + +// Function to add the new button after the image changes to fully cracked +function addFullyCrackedButton() { + const newButtonContainer = document.createElement('div'); + newButtonContainer.classList.add('button-container'); + + // Create the button element + const newButton = document.createElement('button'); + newButton.classList.add('btn'); + newButton.textContent = 'Continue to Next Module'; // Button text + newButton.onclick = function () { + location.href = 'twoModulesUnlocked.html'; // Redirect to the next page + }; + + // Add the button to the button container + newButtonContainer.appendChild(newButton); + + // Append the button container to the main header or body + const header = document.querySelector('header'); + header.appendChild(newButtonContainer); +}