Skip to content

Update hex.html #178

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 6 commits into
base: master
Choose a base branch
from
Open

Update hex.html #178

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
631bee9
Update hex.html
Prijitha7 Jul 24, 2025
2a4d3c7
Update hex.js
Prijitha7 Jul 24, 2025
76aa8ad
Update hex.js
Prijitha7 Jul 24, 2025
17281d7
Update app.js
Prijitha7 Jul 25, 2025
0ede2a8
Updated app.js
Prijitha7 Jul 25, 2025
5d61ee2
Create update app.js
Prijitha7 Jul 25, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
11 changes: 6 additions & 5 deletions 01-color-flipper/final/hex.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,17 +12,18 @@
<body>
<nav>
<div class="nav-center">
<h4>color flipper</h4>
<h4>🎨 Color Flipper</h4>
<ul class="nav-links">
<li><a href="index.html">simple</a></li>
<li><a href="hex.html">hex</a></li>
<li><a href="index.html">Simple</a></li>
<li><a href="hex.html">Hex</a></li>
</ul>
</div>
</nav>
<main>
<div class="container">
<h2>background color : <span class="color">#f1f5f8</span></h2>
<button class="btn btn-hero" id="btn">click me</button>
<h2>Background color: <span class="color">#f1f5f8</span></h2>
<p class="subtitle">Click the button to see magic colors!</p>
<button class="btn btn-hero" id="btn">Change Color 🎨</button>
</div>
</main>
<!-- javascript -->
Expand Down
28 changes: 25 additions & 3 deletions 01-color-flipper/final/hex.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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);
}
55 changes: 30 additions & 25 deletions 02-counter/final/app.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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();
});
});
34 changes: 34 additions & 0 deletions 02-counter/final/update app.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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();
});
});