diff --git a/01-color-flipper/final/hex.html b/01-color-flipper/final/hex.html index fbcbfc65a..b90484a41 100644 --- a/01-color-flipper/final/hex.html +++ b/01-color-flipper/final/hex.html @@ -12,17 +12,18 @@
-

background color : #f1f5f8

- +

Background color: #f1f5f8

+

Click the button to see magic colors!

+
diff --git a/01-color-flipper/final/hex.js b/01-color-flipper/final/hex.js index e61e616cb..2a75b7fe4 100644 --- a/01-color-flipper/final/hex.js +++ b/01-color-flipper/final/hex.js @@ -1,18 +1,40 @@ const hex = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, "A", "B", "C", "D", "E", "F"]; const btn = document.getElementById("btn"); const color = document.querySelector(".color"); +const resetBtn = document.getElementById("reset"); // NEW Reset button btn.addEventListener("click", function () { let hexColor = "#"; for (let i = 0; i < 6; i++) { hexColor += hex[getRandomNumber()]; } - // console.log(hexColor); - - color.textContent = hexColor; + color.textContent = hexColor.toUpperCase(); document.body.style.backgroundColor = hexColor; + btn.textContent = "Change Again!"; +}); + +// Copy color to clipboard on click +color.addEventListener("click", function () { + navigator.clipboard.writeText(color.textContent); + showCopiedMessage(); // Custom message instead of alert }); +// Reset background color +resetBtn.addEventListener("click", function () { + document.body.style.backgroundColor = "#ffffff"; + color.textContent = "#FFFFFF"; + btn.textContent = "Change Color"; +}); + +// Function to show copied message +function showCopiedMessage() { + const message = document.createElement("div"); + message.textContent = "Color Copied!"; + message.className = "toast"; + document.body.appendChild(message); + setTimeout(() => message.remove(), 1000); +} + function getRandomNumber() { return Math.floor(Math.random() * hex.length); } diff --git a/02-counter/final/app.js b/02-counter/final/app.js index f34827948..e9599eb4c 100644 --- a/02-counter/final/app.js +++ b/02-counter/final/app.js @@ -1,29 +1,34 @@ -// set inital value to zero -let count = 0; -// select value and buttons -const value = document.querySelector("#value"); -const btns = document.querySelectorAll(".btn"); +// Counter App - Modified Version for Contribution -btns.forEach(function (btn) { - btn.addEventListener("click", function (e) { - const styles = e.currentTarget.classList; - if (styles.contains("decrease")) { - count--; - } else if (styles.contains("increase")) { - count++; - } else { - count = 0; - } +let counterValue = 0; // Start with 0 - if (count > 0) { - value.style.color = "green"; - } - if (count < 0) { - value.style.color = "red"; - } - if (count === 0) { - value.style.color = "#222"; - } - value.textContent = count; +// Select value display and all buttons +const valueDisplay = document.querySelector("#value"); +const buttons = document.querySelectorAll(".btn"); + +// Function to update color based on value +const updateColor = () => { + valueDisplay.style.color = counterValue > 0 ? "green" : + counterValue < 0 ? "red" : "#222"; +}; + +// Function to update the display with animation +const updateDisplay = () => { + valueDisplay.textContent = counterValue; + valueDisplay.style.opacity = "0.5"; + setTimeout(() => (valueDisplay.style.opacity = "1"), 150); +}; + +// Event listener for buttons +buttons.forEach((button) => { + button.addEventListener("click", (e) => { + const classes = e.currentTarget.classList; + + if (classes.contains("decrease")) counterValue--; + else if (classes.contains("increase")) counterValue++; + else counterValue = 0; + + updateColor(); + updateDisplay(); }); }); diff --git a/02-counter/final/update app.js b/02-counter/final/update app.js new file mode 100644 index 000000000..e9599eb4c --- /dev/null +++ b/02-counter/final/update app.js @@ -0,0 +1,34 @@ +// Counter App - Modified Version for Contribution + +let counterValue = 0; // Start with 0 + +// Select value display and all buttons +const valueDisplay = document.querySelector("#value"); +const buttons = document.querySelectorAll(".btn"); + +// Function to update color based on value +const updateColor = () => { + valueDisplay.style.color = counterValue > 0 ? "green" : + counterValue < 0 ? "red" : "#222"; +}; + +// Function to update the display with animation +const updateDisplay = () => { + valueDisplay.textContent = counterValue; + valueDisplay.style.opacity = "0.5"; + setTimeout(() => (valueDisplay.style.opacity = "1"), 150); +}; + +// Event listener for buttons +buttons.forEach((button) => { + button.addEventListener("click", (e) => { + const classes = e.currentTarget.classList; + + if (classes.contains("decrease")) counterValue--; + else if (classes.contains("increase")) counterValue++; + else counterValue = 0; + + updateColor(); + updateDisplay(); + }); +});