From 631bee94d6d2dbc76d496a49ad9ad9fccb3695f1 Mon Sep 17 00:00:00 2001 From: Prijitha7 Date: Thu, 24 Jul 2025 19:16:16 +0530 Subject: [PATCH 1/6] Update hex.html --- 01-color-flipper/final/hex.html | 11 ++++++----- 1 file changed, 6 insertions(+), 5 deletions(-) diff --git a/01-color-flipper/final/hex.html b/01-color-flipper/final/hex.html index fbcbfc65..b90484a4 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!

+
From 2a4d3c766d4a555efd3faddd92502dd4dc19fbc8 Mon Sep 17 00:00:00 2001 From: Prijitha7 Date: Thu, 24 Jul 2025 20:18:14 +0530 Subject: [PATCH 2/6] Update hex.js --- 01-color-flipper/final/hex.js | 11 ++++++++--- 1 file changed, 8 insertions(+), 3 deletions(-) diff --git a/01-color-flipper/final/hex.js b/01-color-flipper/final/hex.js index e61e616c..173f5d95 100644 --- a/01-color-flipper/final/hex.js +++ b/01-color-flipper/final/hex.js @@ -7,10 +7,15 @@ btn.addEventListener("click", function () { 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); + alert("Color copied: " + color.textContent); }); function getRandomNumber() { From 76aa8ad6c9db53d62639f53b3b960ef39c460a30 Mon Sep 17 00:00:00 2001 From: Prijitha7 Date: Thu, 24 Jul 2025 20:27:05 +0530 Subject: [PATCH 3/6] Update hex.js --- 01-color-flipper/final/hex.js | 19 ++++++++++++++++++- 1 file changed, 18 insertions(+), 1 deletion(-) diff --git a/01-color-flipper/final/hex.js b/01-color-flipper/final/hex.js index 173f5d95..2a75b7fe 100644 --- a/01-color-flipper/final/hex.js +++ b/01-color-flipper/final/hex.js @@ -1,6 +1,7 @@ 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 = "#"; @@ -15,9 +16,25 @@ btn.addEventListener("click", function () { // Copy color to clipboard on click color.addEventListener("click", function () { navigator.clipboard.writeText(color.textContent); - alert("Color copied: " + 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); } From 17281d75044c2a2b062766185fb1b35f69dc90dd Mon Sep 17 00:00:00 2001 From: Prijitha7 Date: Fri, 25 Jul 2025 10:15:40 +0530 Subject: [PATCH 4/6] Update app.js --- 02-counter/final/app.js | 35 +++++++++++++++++++---------------- 1 file changed, 19 insertions(+), 16 deletions(-) diff --git a/02-counter/final/app.js b/02-counter/final/app.js index f3482794..90195acf 100644 --- a/02-counter/final/app.js +++ b/02-counter/final/app.js @@ -1,29 +1,32 @@ // set inital value to zero +// Initial count value let count = 0; -// select value and buttons + +// Select value display and all buttons const value = document.querySelector("#value"); const btns = document.querySelectorAll(".btn"); +// Loop through each button and add click events 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; - } - if (count > 0) { - value.style.color = "green"; - } - if (count < 0) { - value.style.color = "red"; - } - if (count === 0) { - value.style.color = "#222"; + // Update count based on button clicked + switch (true) { + case styles.contains("decrease"): + count--; + break; + case styles.contains("increase"): + count++; + break; + default: + count = 0; } + + // Change color based on value + value.style.color = count > 0 ? "green" : count < 0 ? "red" : "#222"; + + // Update display value.textContent = count; }); }); From 0ede2a86d0a22ef623f88fea68763ca9a76b8b29 Mon Sep 17 00:00:00 2001 From: Prijitha7 Date: Fri, 25 Jul 2025 10:34:51 +0530 Subject: [PATCH 5/6] Updated app.js --- 02-counter/final/app.js | 50 +++++++++++++++++++++-------------------- 1 file changed, 26 insertions(+), 24 deletions(-) diff --git a/02-counter/final/app.js b/02-counter/final/app.js index 90195acf..e9599eb4 100644 --- a/02-counter/final/app.js +++ b/02-counter/final/app.js @@ -1,32 +1,34 @@ -// set inital value to zero -// Initial count value -let count = 0; +// Counter App - Modified Version for Contribution + +let counterValue = 0; // Start with 0 // Select value display and all buttons -const value = document.querySelector("#value"); -const btns = document.querySelectorAll(".btn"); +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"; +}; -// Loop through each button and add click events -btns.forEach(function (btn) { - btn.addEventListener("click", function (e) { - const styles = e.currentTarget.classList; +// Function to update the display with animation +const updateDisplay = () => { + valueDisplay.textContent = counterValue; + valueDisplay.style.opacity = "0.5"; + setTimeout(() => (valueDisplay.style.opacity = "1"), 150); +}; - // Update count based on button clicked - switch (true) { - case styles.contains("decrease"): - count--; - break; - case styles.contains("increase"): - count++; - break; - default: - count = 0; - } +// Event listener for buttons +buttons.forEach((button) => { + button.addEventListener("click", (e) => { + const classes = e.currentTarget.classList; - // Change color based on value - value.style.color = count > 0 ? "green" : count < 0 ? "red" : "#222"; + if (classes.contains("decrease")) counterValue--; + else if (classes.contains("increase")) counterValue++; + else counterValue = 0; - // Update display - value.textContent = count; + updateColor(); + updateDisplay(); }); }); From 5d61ee2e77e0c80f9367df960d97a2805b1ee963 Mon Sep 17 00:00:00 2001 From: Prijitha7 Date: Fri, 25 Jul 2025 10:43:38 +0530 Subject: [PATCH 6/6] Create update app.js --- 02-counter/final/update app.js | 34 ++++++++++++++++++++++++++++++++++ 1 file changed, 34 insertions(+) create mode 100644 02-counter/final/update app.js diff --git a/02-counter/final/update app.js b/02-counter/final/update app.js new file mode 100644 index 00000000..e9599eb4 --- /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(); + }); +});