Week 1

[github-learning-lab[bot]]

Task 1: Environment setup and starting your first HTML file

In this task, you'll be setting up your computer to get ready to code. We'll also show you how to create a simple HTML file.

If you have not already set up your environment for this course, be sure to watch the video and download Microsoft Visual Studio Code for your machine.

• Once installed, open the application and clone your repository for this class. You can follow the video linked above, or refer to this week's livestream, for instructions.

  • When choosing a location for your repository, create a folder for this class.
  • Inside of that folder, create another folder for this week's homework - you should have a separate folder for every assignment to keep your code organized.
  • Once you've selected your week 1 homework folder, create a new HTML file and title it "index.html".

• After you've opened this file, type "html" in the editor and select the shortcut "html:5". This will automatically type out some mandatory HTML syntax for you.

• When your file is all set up, add a title by typing

  Hello World

[github-learning-lab[bot]]

Task 2: Getting user input with buttons

For task 2, we'll go over how to insert a radio button, or an option button, as well as a regular button.

Next, lets set up a form for a user to select their timezone for the clock we're going to build. To do this, we'll use radio buttons since we want to give the users a few different options to select from, but, we only want to show one time. Radio buttons are the type of buttons that you'd associate with a multiple choice question - the computer only allows you to select one bullet from a given set.

Radio buttons can be defined using the HTML input field if you set the type property to "radio".

The input field is defined just like any other tag, with the name of the element and its properties enclosed by less-than and greater-than signs, like so:

<input [property1]=[value1] [property2]=[value2]>

However, the input field is special - because it isn't a tag, it doesn't need to be closed (no need for </input>).

• In order to let the computer know that these items are in a group, be sure to give each input field the same name property (I named mine "timezone").

• Each item should also have a unique value for the value property.

• Once you've set up your input fields, feel free to add some labels and breaks to make your form easier to read.

  • You can do this by assigning a unique value to the id property of your input field and then using the label tag like so:

  <label for "[id from input field]"> put your text here</label>

  • You can also do this by simply putting your text outside of your input tag and adding a break(<br>) like this:

  <input type="radio" name="tz" value="est"> Eastern Standard Time <br>

Next, we need to add a submit button.

• This can be defined using a button tag with thetype property set to "button" and value property set to "Submit".
• To add text to your button, add anything you'd like after the definition of the button tag, outside of the angle brackets (<, >). I recommend entering Submit for your text.
• Unlike the input field, the button tag does need to be closed so be sure to close it immediately after the text of your buttons.

Whenever we want to take in some user input involving input fields and a submit button, we want to make sure to group our relevant code in the form tag so that the computer knows what to look for. With that being said, make sure to surround your code related to the input fields and submit button with a form tag.

Finally, add a break and a div tag with a unique id right below the submit button, outside of the form tag. We will use this later to print the selected timezone.

By the end of this step, your page should look like this:

Open a pull request for your code

Just as you did for the last task, be sure create a new branch, titled [your GitHub username]-[week]-[task number], for your task. As a reminder my GitHub username is danzelo1 so my branch name for week 1's second task (this assignment) would be danzelo1-1-2.

After you've created your branch, commit your code to this branch and open a pull request to merge with your main branch. When creating this request, be sure to title it appropriately in accordance with your changes, and include any specific details in your comments.

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 (so this week would be week 1). A new comment should have appeared for your next task. This is where you'll find the instructions for task 3.

[github-learning-lab[bot]]

Task 3: Using JavaScript to read user input

Now that we've set up the form, we'll use JavaScript to grab the user's input for us to use in our code.

Outside of the form, but still in the body, open the script tag with its type property set to "text/javascript". This will let the computer know to read the content inside of this tag as JavaScript, not HTML.

• The script tag works like any other tag, so to open it you would type <script type="">

• It's imperative that every line of code you write in this line, except for lines with curly braces, is followed with a semicolon

• Inside here, define a function to print the user's selection from the timezone form.

  • To define a function, type function followed by the name of your function, which must be unique and must be followed by parentheses and curly braces, like this:

  function readForm(){
    //the content of your function will go here
  }

  • Inside of the curly braces is where you will write all of your code for this function

  • In your function, define two variables - you can do this using the var keyword.

  var myVariable = value;

  • Your first variable will be an array to hold all of the radio buttons. You can do this by setting your variable equal to document.getElementsByName("[name property value for the timezone buttons]"). To learn more about arrays, visit this page - w3schools is a really helpful resource that covers all the basics of any language.

    • For example, one of my input fields looks like this: <input type="radio" id="est" name="tz" value="est"> and my variable looks like this: var radioButtons = document.getElementsByName("tz");
    • This line of code references the HTML page by using the document object and gathering all elements with the same value for the HTML name property.

  • Your second variable will hold the selected radio button's value - since the value property on the input field for the radio button is what made each button unique

    • Since we don't know the selected button yet, we can just set it to a random element's value
    • The variable we made for the radio buttons is an indexable array - meaning to access an element we can use the name of the array and square brackets
    • If you named your first variable radioButtons like I did, you could grab the value of the first element of your array using radioButtons[0].value since we start counting at 0 in computer science

  • Now that these variables are initialized, we'll cycle through the array holding all of the buttons and see which one is selected.

  • First, let's make a for loop - this is when we define a task to be completed a set number of times. It's definition looks like this:

    for (var i = 0; i < radioButtons.length; i++){
    //tasks go here
    }

    where i is a variable that only exists for the scope of the for loop.

  • In this case, i starts at 0 and increases by 1 (i++) with every iteration of the loop until the loop reaches the length of the radioButtons array - 1 (i < radioButtons.length).

  • For each iteration of the loop, the tasks inside the curly braces are completed.

  • Once i reaches the value set in the second portion of the for loops definition (i < radioButtons.length), the loop breaks and the compiler moves onto the code outside of the curly brackets.

  • Now, to check if the button is selected, we will use an if statement. These check a condition and return a boolean - true or false - you can learn more about if statements here. We can check the checked condition on each button using an if statement like this:

    if (radioButtons[i].checked == true){
    //actions go here
    }

  • Since we want to check every radio button to see if it's been checked, place this if statment inside of your for loop.

  • Back to the if statement, if the checked property is true, this means we've found the selected timezone. So, inside of this if statement, save the value of the radio button at the current index (radioButton[i].value) to the second variable that you defined earlier.

Now, you've found and saved the timezone selected by the user!

• Next, use document.getElementById().innerHTML

  • Place the id of the div you defined below the submit button in the parentheses.

  • Set this line equal to the variable holding the checked radio button to print it onto your webpage.

  • For example, I set my div's id to "result" and named my variable output and my code looked like this:document.getElementById("result").innerHTML = output;

Finally, you'll want to scroll up to your submit button

• Add the onclick property to the button tag and set it equal to the name of the function you just defined
  • This will let the computer know to call this function when the submit button is clicked.
  • My function was named ValidateForm and my button tag looks like this:<button type="button" value="Submit" onclick="ValidateForm()"> Submit </button>

Now, your page should print out the value of whichever item the user has selected when they click the submit button, like so:

Open a pull request for your code

Just as you did for your previous tasks, be sure create a new branch, titled [your GitHub username]-[week]-[task number], for your task. As a reminder my GitHub username is danzelo1 so my branch name for week 1's third task (this assignment) would be danzelo1-1-3.

After you've created your branch, commit your code to this branch and open a pull request to merge with your main branch. When creating this request, be sure to title it appropriately in accordance with your changes, and include any specific details in your comments.

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 (so this week would be week 1). A new comment should have appeared for your next task. This is where you'll find the instructions for task 4.

[github-learning-lab[bot]]

Task 4: Printing the time with JS

In this task, we'll show you how to print your local machine's time onto your webpage using some basic JS tools.

Next, we will print the time on your local machine onto the webpage with a simple JavaScript function.

First, define a new function inside your script tag, but outside of the function you just wrote for finding the selected radio button.

• Define a new variable and set it equal to new Date(). This will grab the current date and time from your local machine.

Next, create variables for the current hour, minute, and second using the respective Date functions.

• Use your Date() object to define each of these variables. For example, I named my Date() object day and I declared my hour variable using the built-in getHours() function like this:

  var hour = day.getHours();

• You may also want to define a session variable that keeps track of whether your clock is showing "AM" or "PM" - you can do this using a few simple conditionals (if statements) and some math with the hours variable.

Once you've defined your time variables, define a new variable to concatenate the hour, minute, and second variables, each separated by a colon (you can also add your session variable here). This will make the time show up in hour:minute:second format on your webpage.

• Strings can be concatenated in JS using +

• JavaScript is also designed to handle type conversion, so you can concatenate any type of object to create a string to print.

• Your variable should look like:

  var time = hour + ":" + minute + ":" + second + session

We'll want our clock to be updated every second, so, at the bottom of the function, call the setTimeout() function with the name of your clock function and 1000 as parameters.

• This will call your function every 1000 ms (or 1 second) that your page is running.

Lastly, to print your clock, add a break and a div tag outside of your form tags.

• Give this element a unique tag.

Now, scroll back down to your JavaScript clock function

• Use the document's getElementById() function to print your time variable, just as you did to print the form result in your previous function.

Now, you should have a working digital clock and a form that prints the item selected!

P.S. Don't forget call your clock function once at the bottom of your script!

Open a pull request for your code

Just as you did for your previous tasks, be sure create a new branch, titled [your GitHub username]-[week]-[task number], for your task. As a reminder my GitHub username is danzelo1 so my branch name for week 1's fourth task (this assignment) would be danzelo1-1-4.

After you've created your branch, commit your code to this branch and open a pull request to merge with your main branch. When creating this request, be sure to title it appropriately in accordance with your changes, and include any specific details in your comments.

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 (so this week would be week 1). A new comment should have appeared for your next task. This is where you'll find the instructions for task 5.