Prerequisite

[github-learning-lab[bot]]

Prerequisite: Fundamentals of JavaScript(This should be done already! Read the bottom of the doc to continue)

Welcome to Bit Camp, where students get hands-on experience with software engineering. Before the program starts, please find some time to complete the following assignment: learn/review JavaScript fundamentals that will later be used in the program. To complete this assignment, you will be creating a digital clock using JavaScript to demonstrate your skills! If you need any help, refer to these resources:

W3Schools: https://www.w3schools.com/js/default.asp

Tutorialspoint: https://www.tutorialspoint.com/javascript/javascript_overview.htm

Modern JS: https://javascript.info/

If you have specific questions, try out Stack Overflow (it is super duper helpful):

Stack Overflow: https://stackoverflow.com/

After you have learned/refreshed your knowledge of JavaScript, let's get started on making that clock. Here is the list of the requirements and some extensions you can complete if you have extra time!

Requirements:

• Display 12/24 HR time with hours, minutes, and seconds.
• Must be created using JavaScript (plus appropriate HTML and CSS for formatting and styling)

Extensions:

• Turn your clock from digital to analog mode (hint: you're gonna need a lot of CSS for this...)
• Use CSS to style your clock (ie: make it blue, green, yellow, etc)
• Create animations for your clock (ie. when the minute hand changes, it rotates/spins)

Don't know where to get started? Start off by creating a new function that starts your clock:

function startTime() {}

After this, you will need to create three variables:

var hr = " ";
var min = " ";
var sec = " ";

Also, make sure to reference the HTML you created the "clock" id in:

document.getElementById("clock").innerHTML = " ";

Good job, hopefully your digital clock is fully working and your jQuery is linked to our HTML and CSS files. Your next task is a bit more tricky... you're making another clock but this time... in analog mode!

If you have any other questions or need further assistance, feel free to reach out to your TAs!

To continue, press the close issue bottom at the bottom of the page!

[github-learning-lab[bot]]

Nice!

When a section is completed, a new issue will be created with the next step. Click here to start!