Skip to content

feat: Add reset button and light/dark mode toggle #253

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
RoshanBhagtani2005 wants to merge 1 commit into
base: master
Choose a base branch
from
Open

feat: Add reset button and light/dark mode toggle #253

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
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
37 changes: 22 additions & 15 deletions incrementing-counter/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,23 +8,30 @@
<title>Increment Counter</title>
</head>
<body>
<div class="counter-container">
<i class="fab fa-twitter fa-3x"></i>
<div class="counter" data-target="12000"></div>
<span>Twitter Followers</span>
</div>
<button id="theme-toggle" class="btn theme-toggle" aria-label="Toggle light/dark mode">🌙</button>

<div class="counter-container">
<i class="fab fa-youtube fa-3x"></i>
<div class="counter" data-target="5000"></div>
<span>YouTube Subscribers</span>
</div>
<div class="container">
<div class="counter-container">
<i class="fab fa-twitter fa-3x"></i>
<div class="counter" data-target="12000"></div>
<span>Twitter Followers</span>
</div>

<div class="counter-container">
<i class="fab fa-youtube fa-3x"></i>
<div class="counter" data-target="5000"></div>
<span>YouTube Subscribers</span>
</div>

<div class="counter-container">
<i class="fab fa-facebook fa-3x"></i>
<div class="counter" data-target="7500"></div>
<span>Facebook Fans</span>
<div class="counter-container">
<i class="fab fa-facebook fa-3x"></i>
<div class="counter" data-target="7500"></div>
<span>Facebook Fans</span>
</div>
</div>

<button id="reset-btn" class="btn">Reset Counters</button>

<script src="script.js"></script>
</body>
</html>
</html>
82 changes: 69 additions & 13 deletions incrementing-counter/script.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,21 +1,77 @@
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;

counters.forEach(counter => {
counter.innerText = '0'
// The main function that starts the counter animation
function startCounter() {
counters.forEach(counter => {
// Clear any running timers
if (counter.timer) {
clearTimeout(counter.timer);
}

// Reset the inner text to '0' before starting
counter.innerText = '0';

const updateCounter = () => {
const target = +counter.getAttribute('data-target')
const c = +counter.innerText
const increment = target / 200

if(c < target) {
// Update the text and schedule the next update
counter.innerText = `${Math.ceil(c + increment)}`
counter.timer = setTimeout(updateCounter, 1) // Store the timer ID
} else {
// Set the final target value
counter.innerText = target
}
}

// Start the animation for the current counter
updateCounter()
})
}

const updateCounter = () => {
const target = +counter.getAttribute('data-target')
const c = +counter.innerText

const increment = target / 200
// --- Reset Logic ---

if(c < target) {
counter.innerText = `${Math.ceil(c + increment)}`
setTimeout(updateCounter, 1)
} else {
counter.innerText = target
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();

updateCounter()
})
// Listen for the reset button click
resetBtn.addEventListener('click', resetCounters);
64 changes: 61 additions & 3 deletions incrementing-counter/style.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,17 +5,37 @@
}

body {
/* LIGHT MODE DEFAULTS */
background-color: #8e44ad;
color: #fff;
font-family: 'Roboto Mono', sans-serif;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
height: 100vh;
overflow: hidden;
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 {
display: flex;
flex-direction: column;
Expand All @@ -29,8 +49,46 @@ body {
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) {
body {
flex-direction: column;
.counter-container {
margin: 15px;
}
}
}