From adcd5f26b56ac5124ebbd8a545800eb93e8522a2 Mon Sep 17 00:00:00 2001 From: Brad Traversy Date: Fri, 16 Oct 2020 13:24:53 -0400 Subject: [PATCH] Incrementing counter --- incrementing-counter/index.html | 30 +++++++++++++++++++++++++++ incrementing-counter/script.js | 21 +++++++++++++++++++ incrementing-counter/style.css | 36 +++++++++++++++++++++++++++++++++ 3 files changed, 87 insertions(+) create mode 100644 incrementing-counter/index.html create mode 100644 incrementing-counter/script.js create mode 100644 incrementing-counter/style.css diff --git a/incrementing-counter/index.html b/incrementing-counter/index.html new file mode 100644 index 0000000..8bab33f --- /dev/null +++ b/incrementing-counter/index.html @@ -0,0 +1,30 @@ + + + + + + + + Increment Counter + + +
+ +
+ Twitter Followers +
+ +
+ +
+ YouTube Subscribers +
+ +
+ +
+ Facebook Fans +
+ + + diff --git a/incrementing-counter/script.js b/incrementing-counter/script.js new file mode 100644 index 0000000..1bb0837 --- /dev/null +++ b/incrementing-counter/script.js @@ -0,0 +1,21 @@ +const counters = document.querySelectorAll('.counter') + +counters.forEach(counter => { + counter.innerText = '0' + + const updateCounter = () => { + const target = +counter.getAttribute('data-target') + const c = +counter.innerText + + const increment = target / 200 + + if(c < target) { + counter.innerText = `${Math.ceil(c + increment)}` + setTimeout(updateCounter, 1) + } else { + counter.innerText = target + } + } + + updateCounter() +}) \ No newline at end of file diff --git a/incrementing-counter/style.css b/incrementing-counter/style.css new file mode 100644 index 0000000..082d1fd --- /dev/null +++ b/incrementing-counter/style.css @@ -0,0 +1,36 @@ +@import url('https://fonts.googleapis.com/css?family=Roboto+Mono&display=swap'); + +* { + box-sizing: border-box; +} + +body { + background-color: #8e44ad; + color: #fff; + font-family: 'Roboto Mono', sans-serif; + display: flex; + align-items: center; + justify-content: center; + height: 100vh; + overflow: hidden; + margin: 0; +} + +.counter-container { + display: flex; + flex-direction: column; + justify-content: center; + text-align: center; + margin: 30px 50px; +} + +.counter { + font-size: 60px; + margin-top: 10px; +} + +@media (max-width: 580px) { + body { + flex-direction: column; + } +}