Week4 js homework

Javascript/homework/responses/4.1-page-setup.md

@@ -0,0 +1,34 @@
+## Task 1: Create a new page with an analog and a digital clock
+
+#### Your final assignment is going to merge everything you've created so far onto a single webpage, and allow the user to choose between a digital clock and analog clock. This first task will help you get all of your code in one place.
+
+- Copy your files from last week into your week 4 folder.  
+- Add a div tag below your clock div (below the `</div>` tied to `<div class="clock">` ).  
+  - Make sure to give this tag a unique id attribute, my line of code looks like `<div class="digital" id="digital clock"></div>`.
+
+- Copy the function you wrote for your digital clock in week 2 to show the time.  
+- Paste the contents of this function into the function that sets the analog clock so that both clocks are set with a single function call.  
+
+Be sure to rename any repeating variables if necessary to get the function working.  Also, make sure to change the code you use to print the time to search for an element with `id="digital clock"`, so my line of code looks like `document.getElementById("digital clock").textContent = time;`. 
+
+At this point, your page should look something like this:![Screen Shot 2021-01-17 at 9.11.28 PM](../../images/Screen Shot 2021-01-17 at 9.11.28 PM.png)
+
+- Add a selector in your css file that selects the `"digital"` class like so:
+
+`.digital {}` 
+
+You may choose to style your digital clock differently this time, but if not, feel free to copy the code from week 2's CSS file in the `.clock` section and paste it into your `.digital` section.
+
+Your page should now look something like this:
+
+![Screen Shot 2021-01-17 at 9.18.06 PM](../../images/Screen Shot 2021-01-17 at 9.18.06 PM.png)
+
+Feel free to size down the digital clock so that it doesn't mess up your layout when you resize your screen.
+
+#### Open a pull request for your code
+
+Once again, be sure create a new branch, titled `[your GitHub username]-[week]-[task number]`, for your task. For example, my username is `danzelo1` so my branch would be called `danzelo1-4-1` for this task.
+
+After you've created your branch, commit your code to this branch and open a pull request to merge with your main branch.  Be sure to title and comment your pull request appropriately.
+
+As long as there are no conflicts with the base branch, you can now merge your pull request with your main branch. From here, click on "Issues" on the top left of your screen, below the name of your repository, and click on the week (week 4). A new comment should have appeared for your next task where you'll find the instructions for task 2.

Javascript/homework/responses/4.2-more-buttons.md

@@ -0,0 +1,24 @@
+## Task 2: Adding radio buttons for clock preferences
+
+#### Next, we're going to 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. This task will demonstrate a different approach to radio buttons.
+
+- Open another form tag directly below the one you have for the timezone selector.  
+- Similar to how you set up the timezone buttons, open a div tag with a unique class (I named mine "view") 
+- Insert 2 radio buttons. 
+  - Make sure these radio buttons share the same `name` attribute and have unique `value` and `id` attributes.
+
+These two radio buttons should have the user input whether they'd like to see the time on a digital clock or an analog clock.  There's no need to add a submit button as we will set up our page to change on the click of the radio button rather than on the submit button.
+
+After this step, your page should look like this:
+
+![Screen Shot 2021-01-17 at 9.31.52 PM](../../images/Screen Shot 2021-01-17 at 9.31.52 PM.png)
+
+At this point, you can customize the appearance of these two radio buttons in your CSS file by defining a block that selects all items in your "view" class.  I suggest adding some margins and padding so that items don't look so crowded.
+
+#### Open a pull request for your code
+
+Once again, be sure create a new branch, titled `[your GitHub username]-[week]-[task number]`, for your task.
+
+After you've created your branch, commit your code to this branch and open a pull request to merge with your main branch.  Be sure to title and comment your pull request appropriately.
+
+As long as there are no conflicts with the base branch, you can now merge your pull request with your main branch. From here, click on "Issues" on the top left of your screen, below the name of your repository, and click on the week (week 4). A new comment should have appeared for your next task where you'll find the instructions for task 3.

Javascript/homework/responses/4.3-more-js-functions.md

@@ -0,0 +1,53 @@
+## Task 3: Toggling between a digital and an analog clock
+
+#### Now that we have the page all set up, all that's left to do is to get our code to do what the webpage says! This task will go over some JavaScript functions using methods you've learned previously.
+
+In your JavaScript file, 
+
+- Define two functions - one called `setDigital()` and another called `setAnalog()` .  
+- Inside of each of these functions, 
+  - Use `document.getElementById()` to define 2 variables that select the analog clock and the digital clock.  
+  - So, your code for the digital clock would look like this: `var digital = document.getElementById("digital clock")` because my digital clock data is linked to a div tag with `id="digital clock"`.  
+
+- Do the same thing for a variable that holds your analog clock data 
+  - If you copied your code from week 3, the id for your analog clock should be `"clock"`.
+
+Next, we're going to use these variables to change their display so that only one will be shown at a time.  
+
+- In `setAnalog()`, set `analog.style.display` to `"flex"` so the code should look like this: `analog.style.display = "flex"`
+
+- Set the digital clock object's display to `"none"`.  
+  - This code will override the current CSS display settings to hide the digital clock and hide the analog clock.
+
+Use the same methodology to hide the analog clock and show the digital clock in your `setDigital()` function.
+
+Finally, we just have to link these functions to the radio buttons.  
+
+Back in your HTML code, 
+
+- Add the `onclick` attribute to both input fields.  
+
+In the input field for the analog clock, 
+
+- Set `onclick` to `"setAnalog()"` 
+- Set the digital clock button's `onclick` attribute to `"setDigital()"`.  
+
+This is the same way we linked a function to the submit button, so feel free to refer to that code for help.
+
+Now, if you click the "Analog" button, your screen should look like this:
+
+![Screen Shot 2021-01-17 at 10.55.15 PM](../../images/Screen Shot 2021-01-17 at 10.55.15 PM.png)
+
+And if you click the "Digital" button, it will look like this:
+
+![Screen Shot 2021-01-17 at 10.55.26 PM](../../images/Screen Shot 2021-01-17 at 10.55.26 PM.png)
+
+However, you may notice that when you first load your page, both clocks appear.  To fix this, add the `checked` attribute to the input field tag for the analog clock's radio button so that this button will be selected when the field loads.  Then, in your JavaScript file, call the `setAnalog()` function after it's defined.
+
+#### Open a pull request for your code
+
+Once again, be sure create a new branch, titled `[your GitHub username]-[week]-[task number]`, for your task.
+
+After you've created your branch, commit your code to this branch and open a pull request to merge with your main branch.  Be sure to title and comment your pull request appropriately.
+
+As long as there are no conflicts with the base branch, you can now merge your pull request with your main branch. From here, click on "Issues" on the top left of your screen, below the name of your repository, and click on the week (week 4). A new comment should have appeared for your next task where you'll find the instructions for your fourth and final task.

Javascript/homework/responses/4.4-customization.md

@@ -0,0 +1,15 @@
+## Task 4: Adding the bells and whistles
+
+#### Your final task will be to use your creativity to add anything you'd like to your clock webpage
+
+Now that your page incorporates all of your existing work and allows the user to toggle between a digital and analog clock, your task is almost complete. 
+
+For the last task of your final assignment, you must add two features of your choosing to this page.  A feature can be as simple as adding a heading to your page, or as complex as having users enter a city and setting the clock to this city's time - just be creative.  We encourage that you use outside resources to implement any features that we haven't covered in this course.
+
+#### Open a pull request for your code
+
+Finally, be sure create a new branch, titled `[your GitHub username]-[week]-[task number]`, for your task. 
+
+After you've created your branch, commit your code to this branch and open a pull request to merge with your main branch.  Be sure to title and comment your pull request appropriately.
+
+As long as there are no conflicts with the base branch, you can now merge your pull request with your main branch. That's all for this course! I hope you enjoyed making your clock and learning HTML, CSS, and JS!