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

day 15 completed

Browse Source
pull/106/head
couldntfindabetterusername 4 years ago
parent bec1c4a75a
commit 6b99d650a0
4 changed files with 106 additions and 15 deletions
Show Stats Download Patch File Download Diff File

24
brad traversy/incrementing-counter/script.js
Unescape View File

@ -1,21 +1,21 @@
const counters = document.querySelectorAll('.counter') const counters = document.querySelectorAll(".counter");
counters.forEach(counter => { counters.forEach((counter) => {
counter.innerText = '0' 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) {
counter.innerText = `${Math.ceil(c + increment)}` counter.innerText = `${Math.ceil(c + increment)}`;
setTimeout(updateCounter, 1) setTimeout(updateCounter, 1);
} else { } else {
counter.innerText = target counter.innerText = target;
}
} }
};
updateCounter() updateCounter();
}) });

39
my code/15-incrementing counter/index.html
Unescape View File

@ -0,0 +1,39 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>15 incrementing counter</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.14.0/css/all.min.css"
integrity="sha512-1PKOgIY59xJ8Co8+NE6FZ+LOAZKjy+KY8iq0G4B3CyeY6wYHN3yt9PW0XpSriVlkMXe40PTKnXrLnZ9+fkDaog=="
crossorigin="anonymous" />
<link rel="stylesheet" href="style.css">
</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>
<div class="counter-container">
<i class="fab fa-youtube fa-3x"></i>
<div class="counter" data-target="5000"></div>
<span>Youtube Followers</span>
</div>
<div class="counter-container">
<i class="fab fa-facebook fa-3x"></i>
<div class="counter" data-target="7500"></div>
<span>Facebook Followers</span>
</div>
<script src="script.js"></script>
</body>
</html>

23
my code/15-incrementing counter/script.js
Unescape View File

@ -0,0 +1,23 @@
const counters = document.querySelectorAll(".counter");
counters.forEach((counter) => {
counter.innerHTML = 0;
const updateCounter = () => {
const target = parseInt(counter.getAttribute("data-target"));
const text = parseInt(counter.innerText);
const inc = target / 2000;
if (text < target) {
counter.innerText = Math.ceil(text + inc);
setTimeout(() => {
updateCounter();
}, 100);
} else {
counter.innerText = target;
}
};
updateCounter();
});

29
my code/15-incrementing counter/style.css
Unescape View File

@ -0,0 +1,29 @@
* {
margin: 0;
padding: 0;
}
body {
height: 100vh;
display: flex;
justify-content: space-evenly;
align-items: center;
background-color: rgb(201, 53, 201);
}
.counter-container {
font-family: sans-serif;
color: #fff;
display: inline-flex;
flex-direction: column;
align-items: center;
font-size: 30px;
}
.counter {
margin: 10px 0;
}
span {
font-size: 18px;
}
Write Preview
Loading…
Cancel
Save