msb-public
/
50projects50days
mirror of https://github.com/bradtraversy/50projects50days
1
0
Code Issues Projects Releases Wiki Activity

feat: Add reset button and light/dark mode toggle

Browse Source
pull/253/head
Roshan Bhagtani 1 month ago
parent c92b0bc3a8
commit 7b18208092
3 changed files with 152 additions and 31 deletions
Show Stats Download Patch File Download Diff File

7
incrementing-counter/index.html
Unescape View File

@ -8,6 +8,9 @@
<title>Increment Counter</title> <title>Increment Counter</title>
</head> </head>
<body> <body>
<button id="theme-toggle" class="btn theme-toggle" aria-label="Toggle light/dark mode">🌙</button>
<div class="container">
<div class="counter-container"> <div class="counter-container">
<i class="fab fa-twitter fa-3x"></i> <i class="fab fa-twitter fa-3x"></i>
<div class="counter" data-target="12000"></div> <div class="counter" data-target="12000"></div>
@ -25,6 +28,10 @@
<div class="counter" data-target="7500"></div> <div class="counter" data-target="7500"></div>
<span>Facebook Fans</span> <span>Facebook Fans</span>
</div> </div>
</div>
<button id="reset-btn" class="btn">Reset Counters</button>
<script src="script.js"></script> <script src="script.js"></script>
</body> </body>
</html> </html>

62
incrementing-counter/script.js
Unescape View File

@ -1,21 +1,77 @@
const counters = document.querySelectorAll('.counter') const counters = document.querySelectorAll('.counter')
const resetBtn = document.getElementById('reset-btn');
const themeToggle = document.getElementById('theme-toggle'); // Select the toggle button
const body = document.body;
// The main function that starts the counter animation
function startCounter() {
counters.forEach(counter => { counters.forEach(counter => {
counter.innerText = '0' // Clear any running timers
if (counter.timer) {
clearTimeout(counter.timer);
}
// Reset the inner text to '0' before starting
counter.innerText = '0';
const updateCounter = () => { const updateCounter = () => {
const target = +counter.getAttribute('data-target') const target = +counter.getAttribute('data-target')
const c = +counter.innerText const c = +counter.innerText
const increment = target / 200 const increment = target / 200
if(c < target) { if(c < target) {
// Update the text and schedule the next update
counter.innerText = `${Math.ceil(c + increment)}` counter.innerText = `${Math.ceil(c + increment)}`
setTimeout(updateCounter, 1) counter.timer = setTimeout(updateCounter, 1) // Store the timer ID
} else { } else {
// Set the final target value
counter.innerText = target counter.innerText = target
} }
} }
// Start the animation for the current counter
updateCounter() updateCounter()
}) })
}
// --- Reset Logic ---
function resetCounters() {
counters.forEach(counter => {
// 1. Stop any current animations
if (counter.timer) {
clearTimeout(counter.timer);
}
// 2. Reset the display value to zero
counter.innerText = '0';
});
// 3. Restart the entire animation process after a short delay
setTimeout(startCounter, 50);
}
// --- Theme Toggle Logic ---
themeToggle.addEventListener('click', () => {
// Toggle the dark-mode class on the body element
body.classList.toggle('dark-mode');
// Change the button icon for better UI feedback
if (body.classList.contains('dark-mode')) {
themeToggle.innerText = '☀️'; // Change to Sun icon for light mode
} else {
themeToggle.innerText = '🌙'; // Change to Moon icon for dark mode
}
});
// --- Event Listeners and Initial Run ---
// Start the animation when the page loads
startCounter();
// Listen for the reset button click
resetBtn.addEventListener('click', resetCounters);

62
incrementing-counter/style.css
Unescape View File

@ -5,17 +5,37 @@
} }
body { body {
/* LIGHT MODE DEFAULTS */
background-color: #8e44ad; background-color: #8e44ad;
color: #fff; color: #fff;
font-family: 'Roboto Mono', sans-serif; font-family: 'Roboto Mono', sans-serif;
display: flex; display: flex;
flex-direction: column;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
height: 100vh; height: 100vh;
overflow: hidden; overflow: hidden;
margin: 0; margin: 0;
transition: background-color 0.3s, color 0.3s; /* Smooth transition */
}
/* --- DARK MODE STYLES --- */
body.dark-mode {
background-color: #1a1a1a;
color: #f1c40f; /* Yellow text for dark mode contrast */
}
body.dark-mode .btn {
background-color: #f1c40f; /* Yellow button */
color: #1a1a1a;
} }
body.dark-mode .btn:hover {
background-color: #e6b908;
}
/* --- End Dark Mode Styles --- */
.counter-container { .counter-container {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
@ -29,8 +49,46 @@ body {
margin-top: 10px; margin-top: 10px;
} }
/* --- Button Styles --- */
.btn {
background-color: #47bcf3;
color: white;
border: none;
padding: 10px 20px;
margin-top: 20px;
border-radius: 5px;
font-size: 1rem;
cursor: pointer;
transition: transform 0.1s ease, background-color 0.3s ease;
}
.btn:active {
transform: scale(0.95);
}
.btn:hover {
background-color: #38a5d3;
}
/* --- Theme Toggle Button Styles --- */
.theme-toggle {
position: absolute;
top: 20px;
right: 20px;
margin: 0; /* Override margin-top */
width: 50px;
height: 50px;
border-radius: 50%;
font-size: 1.5rem;
padding: 0;
line-height: 50px; /* Center icon vertically */
z-index: 10;
}
/* --- End Theme Toggle Styles --- */
@media (max-width: 580px) { @media (max-width: 580px) {
body { .counter-container {
flex-direction: column; margin: 15px;
} }
} }
Write Preview
Loading…
Cancel
Save