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 tools and processes given to you to build a site with CSS and JS
- gh-pages
A repo containing at least:
- index.html
- base.css
- main.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.
GETTING STARTED
- Create a new repository
- Download starter files
- Create and commit a new file called main.js
MAKE IT TICK
- 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 hexidecimal color
- Display the generated color's hex value on hover
- Mission Accomplished!
RECOMMENDED WATCHING AND READING
Watch Head First JavaScript and JavaScript Basics
Read Values, Numbers, Arithmetic, Variables, Defining A Function, Event Handlers and Events and DOM Nodes