I've been on a bit of a break from the 50 Projects in 50 Days course while I've been making my way through the official pre-work for my upcoming coding bootcamp. However I decided to jump back in this evening, and day 15 provided a quick re-entry.
The project itself is very straightforward. It's essentially a widget to count up to a number of followers/fans/etc. on three big social networks.
Quick concept reviews:
- The social icons are from FontAwesome
- The three divs holding the numbers share a class, so they are pulled into a node list in the JS for the project using the document.querySelectorAll() method
- The counters are 'animated' by way of a setTimeout() function
All of these have turned up in earlier projects but it was definitely good to work through them again.
This project is actually just a little heavier on the JavaScript than on the HTML or CSS. The main JS/DOM method used is innerText on the three divs that contain the actual numbers. The numbers are arbitrary but in a real-world scenario could easily be determined by API. There is an updateCounter function that is called that increments the counters by a pre-determined interval. The previously-mentioned setTimeout() staggers the repeated calling of updateCounter by a millisecond to slow the incrementation just enough to give a nice count-up effect.