[Feature Request] New Final Project for Javascript Bootcamp

[lazyplatypus]

No description provided.

[danzelo1]

Week 1 Homework - Intro to HTML, Javascript for digital clock, (Radio button, and print out of the time timezone)

1. Set up environment and open up visual studio code and create a new HTML file.
2. In the body of the file, create a new form with:
   5 radio buttons
   5 labels for the radio buttons
   1 submit button
3. Outside of the form, but still in the body, open the script tag. Define a function to show the time where you generate variables to represent the date and the hour, minute, and second, of the current time and print them on the webpage.
4. Define another function in the script tag that gets the selected timezone from the radio buttons and changes the time printed based on the user’s input
5. Test your code

Week 2 homework - Intro to css and finishing off design on digital clock.

1. Open a css file in visual studio code called “style.css”. Also open your HTML file from last week. Define a body class - this will style all items defined in your code.
2. In the body class, center all items, select a font and size for your text, and change the background color of the page.
3. Also define a clock class - this is where we will design a digital clock to print the time.
4. Finally, define a timezone class to style the labels and buttons used for your timezone selector.

Week 3 homework - Javascript for analog clock and Using css for analog clock.

1. Open new css, html, and js files in visual studio code. Copy your timezone code from the digital clock into these files respectively.
2. Define a clock class in a div separate from the timezone form, but still in the body of the code. Inside of this, define divs for numbers 1-12 and as well as divs for each hand on the clock.
3. Moving to the css file, style the clock so that its a circle with a solid black border. Also add a small circle in the middle of the clock.
4. Next, style and align the numbers on the clock so that they form a perfect circle just within the border of the clock.
5. Style the hands so that the seconds hand is the longest and thinnest, and the hour hand is shortest and widest. These hands should also be set to rotate given a degree.
6. Finally, move to the javascript file to set the hands to rotate around the clock given the current date and time.

Week 4 homework - Toggling between Digital To Analog and enabling advanced features.

1. Using your code from weeks 2 and 3, design a page that shows both an analog clock and a digital clock
2. Next, create a set of radio buttons that allow a user to choose if they’d like to see the time on an analog clock or on a digital clock
3. Set up your code so that, given the user’s input, one of the clock’s will be hidden and the selected one will be shown.
4. Also, make sure to integrate the timezone features for both of these clocks.