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; + } +}