This assignment serves to reinforce JS fundamentals with setInterval, writing to the DOM, practicing CSS animations, positions and transforms, and finally, breaking down complex problems into simple sequences in code.
After completing this assignment, you should:
- Have familiarity with general JS syntax
- Be able to write a series of functions that achieve a series of steps
- Understand arrays and loops, Math operations, String operations, and DOM accessors
- Be able to breakdown a simple process of mathematical steps into a series of statements in JS
After completing this assignment, you should be able to effectively use:
- The install tools and processes given to you to build a site with SCSS and JS
- gh-pages
A repo containing at least:
- A main.js file that holds your JS
- All functions should be complete and produce the expected output
- The clock should modify the colors of the background based on the time
- Create a new Github repo, setup your project files, and recreate the screen capture below as a webpage.
## I'm a Web Developer Mode
**GETTING STARTED**
* Create a new repository
* Create and commit index.html
* Add initial HTML
* Create site content and structure using HTML
**MAKE IT TICK**
* Create and commit a new file called main.js
* console.log the current time on page load
* console.log the current time every second
* Display the current time every second
* Display the current time, padded with zeros to be exactly two digits long, every second
* console.log the percentage of a minute that the current seconds represents (e.g., if 30 seconds have elapsed, console.log 0.5)
* Using the percent above, dynamically modify the length of the timer bar
* console.log a hexidecimal color that is based on the current second, every second
* Dynamically update the background color of the page using the color
* Display the generated color's hex value on hover
* Mission Accomplished!
**Recommended Watching and Reading**
Watch [Head First JavaScript](https://www.youtube.com/playlist?list=PL055Epbe6d5ZMPV1biOmaI7oCc7nEMxh4) and [JavaScript Basics](https://teamtreehouse.com/library/javascript-basics)
Read [Values](http://eloquentjavascript.net/01_values.html#h_sVZPaxUSy/), [Numbers](http://eloquentjavascript.net/01_values.html#h_flOCH3CuFg), [Arithmetic](http://eloquentjavascript.net/01_values.html#h_RfBT3HMnYs), [Variables](http://eloquentjavascript.net/02_program_structure.html#h_rAGNsfewCX), [Defining A Function](http://eloquentjavascript.net/03_functions.html#h_tqLFw/oazr), [Event Handlers](http://eloquentjavascript.net/14_event.html#h_HQoLxG2r2l) and [Events and DOM Nodes](http://eloquentjavascript.net/14_event.html#h_Kx1VwAV7ei)
