Skip to content

Commit ec2c25d

Browse files
bytecode001bytecode001
authored
Add files via upload
1 parent 914d58e commit ec2c25d

File tree

3 files changed

+137
-1
lines changed

3 files changed

+137
-1
lines changed

‎036-animated-counter/index.html‎

Lines changed: 20 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1 +1,20 @@
1-
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<!-- Page title displayed on the browser tab -->
6+
<title>Animated Counter</title>
7+
<!-- Link to the external CSS stylesheet -->
8+
<link rel="stylesheet" href="styles.css">
9+
</head>
10+
<body>
11+
<!-- Main container for the counter -->
12+
<div class="counter-container">
13+
<!-- Counter element with a data-target attribute specifying the final number -->
14+
<div class="counter" data-target="1000">0</div>
15+
</div>
16+
17+
<!-- Include the external JavaScript file -->
18+
<script src="script.js"></script>
19+
</body>
20+
</html>

‎036-animated-counter/script.js‎

Lines changed: 35 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,35 @@
1+
// Wait for the DOM to be fully loaded before executing the code
2+
document.addEventListener('DOMContentLoaded', () => {
3+
// Select all elements with the class 'counter'
4+
const counters = document.querySelectorAll('.counter');
5+
6+
// Iterate through each 'counter' element found
7+
counters.forEach(counter => {
8+
// Function to animate the counter
9+
const animateCounter = () => {
10+
// Get the target value from data-target attribute and convert it to a number
11+
const target = +counter.getAttribute('data-target');
12+
// Get the current value displayed in the counter and convert it to a number
13+
const current = +counter.innerText;
14+
// Calculate the increment for each animation frame
15+
const increment = target / 200;
16+
17+
// Check if the current value is less than the target
18+
if (current < target) {
19+
// Update the counter text by incrementing the current value
20+
counter.innerText = Math.ceil(current + increment);
21+
// Request the next animation frame
22+
requestAnimationFrame(animateCounter);
23+
} else {
24+
// If the current value has reached or surpassed the target
25+
// Set the counter text to the exact target value
26+
counter.innerText = target;
27+
// Add the 'animate' class to trigger CSS animations
28+
counter.classList.add('animate');
29+
}
30+
};
31+
32+
// Start the counter animation
33+
animateCounter();
34+
});
35+
});

‎036-animated-counter/styles.css‎

Lines changed: 82 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,82 @@
1+
/* Style for the body of the page */
2+
body {
3+
/* Light and pleasant background color */
4+
background-color: #f0f4f8;
5+
/* Use Flexbox to center content */
6+
display: flex;
7+
justify-content: center;
8+
align-items: center;
9+
/* Set height to viewport height to occupy the full window */
10+
height: 100vh;
11+
/* Remove default margins */
12+
margin: 0;
13+
/* Use a sans-serif font for a modern look */
14+
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
15+
}
16+
17+
/* Style for the counter container */
18+
.counter-container {
19+
/* White background for contrast */
20+
background-color: #ffffff;
21+
/* Internal padding for spacing */
22+
padding: 40px 60px;
23+
/* Rounded corners for a softer design */
24+
border-radius: 12px;
25+
/* Light shadow for depth */
26+
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
27+
/* Center the text */
28+
text-align: center;
29+
}
30+
31+
/* Style for the counter number */
32+
.counter {
33+
/* Large font size for visibility */
34+
font-size: 80px;
35+
/* Bold text */
36+
font-weight: bold;
37+
/* Initial text color */
38+
color: #3a86ff;
39+
/* Relative positioning for pseudo-elements */
40+
position: relative;
41+
/* Inline-block display to manage dimensions and margins */
42+
display: inline-block;
43+
/* Transition for color change */
44+
transition: color 0.3s ease;
45+
}
46+
47+
/* Style applied when the 'animate' class is added */
48+
.counter.animate {
49+
/* Change text color for animation */
50+
color: #8338ec;
51+
}
52+
53+
/* Style for the plus sign that appears after the number */
54+
.counter::after {
55+
/* Add content: the '+' sign */
56+
content: '+';
57+
/* Font size for the plus sign */
58+
font-size: 40px;
59+
/* Absolute positioning relative to the counter */
60+
position: absolute;
61+
/* Position at the top-right of the number */
62+
top: 10px;
63+
right: -30px;
64+
/* Initial color of the plus sign */
65+
color: #3a86ff;
66+
/* Initial opacity set to zero for animation */
67+
opacity: 0;
68+
/* Initial translation for sliding effect */
69+
transform: translateX(10px);
70+
/* Transitions for opacity and transformation */
71+
transition: opacity 0.3s ease-out, transform 0.3s ease-out;
72+
}
73+
74+
/* Animation style for the plus sign when 'animate' class is present */
75+
.counter.animate::after {
76+
/* Full opacity to make the plus sign visible */
77+
opacity: 1;
78+
/* Reset translation to bring the plus sign into position */
79+
transform: translateX(0);
80+
/* Change color of the plus sign for animation */
81+
color: #8338ec;
82+
}

0 commit comments

Comments
 (0)