diff --git a/brad traversy/incrementing-counter/script.js b/brad traversy/incrementing-counter/script.js index 1bb0837..7271649 100644 --- a/brad traversy/incrementing-counter/script.js +++ b/brad traversy/incrementing-counter/script.js @@ -1,21 +1,21 @@ -const counters = document.querySelectorAll('.counter') +const counters = document.querySelectorAll(".counter"); -counters.forEach(counter => { - counter.innerText = '0' +counters.forEach((counter) => { + counter.innerText = "0"; - const updateCounter = () => { - const target = +counter.getAttribute('data-target') - const c = +counter.innerText + const updateCounter = () => { + const target = +counter.getAttribute("data-target"); + const c = +counter.innerText; - const increment = target / 200 + const increment = target / 200; - if(c < target) { - counter.innerText = `${Math.ceil(c + increment)}` - setTimeout(updateCounter, 1) - } else { - counter.innerText = target - } + if (c < target) { + counter.innerText = `${Math.ceil(c + increment)}`; + setTimeout(updateCounter, 1); + } else { + counter.innerText = target; } + }; - updateCounter() -}) \ No newline at end of file + updateCounter(); +}); diff --git a/my code/15-incrementing counter/index.html b/my code/15-incrementing counter/index.html new file mode 100644 index 0000000..db7496d --- /dev/null +++ b/my code/15-incrementing counter/index.html @@ -0,0 +1,39 @@ + + + + + + + + 15 incrementing counter + + + + + + + +
+ +
+ Twitter Followers +
+ +
+ +
+ Youtube Followers +
+ +
+ +
+ Facebook Followers +
+ + + + + \ No newline at end of file diff --git a/my code/15-incrementing counter/script.js b/my code/15-incrementing counter/script.js new file mode 100644 index 0000000..58c6aa9 --- /dev/null +++ b/my code/15-incrementing counter/script.js @@ -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(); +}); diff --git a/my code/15-incrementing counter/style.css b/my code/15-incrementing counter/style.css new file mode 100644 index 0000000..ad4af7f --- /dev/null +++ b/my code/15-incrementing counter/style.css @@ -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; +}