Week 1 - Githubissues

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 put your title here<title> within the <head> section and make sure within your <body> section thats it prints "Hello World!"</p> </li> </ul> <h4>Open a pull request for your code</h4> <p><a rel="noreferrer nofollow" target="_blank" href="https://tinyurl.com/js-twilio-bitcamp-2">This tutorial</a> will walk you through opening a pull request and merging your branch, but you can also follow the steps below or the ones described in this week's livestream.</p> <p>Once you've completed this task, be sure create a new branch titled <code>[your GitHub username]-[week]-[task number]</code>. For example my GitHub username is <code>danzelo1</code> so my branch name for week 1's first task (this assignment) would be <code>danzelo1-1-1</code>.</p> <p>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.</p> <p>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 2.</p> </div> </div> <div class="comment"> <div class="user"> <a rel="noreferrer nofollow" target="_blank" href="https://github.com/github-learning-lab[bot]"><img src="https://avatars.githubusercontent.com/in/10572?v=4" />github-learning-lab[bot]</a> commented <strong> 3 years ago</strong> </div> <div class="markdown-body"> <h2>Task 2: Getting user input with buttons</h2> <h4>For task 2, we'll go over how to insert a radio button, or an option button, as well as a regular button.</h4> <p>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.</p> <p>Radio buttons can be defined using the HTML <code>input</code> field if you set the <code>type</code> property to <code>"radio"</code>. </p> <p>The <code>input</code> 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:</p> <p><code><input [property1]=[value1] [property2]=[value2]></code></p> <p>However, the input field is special - because it isn't a tag, it doesn't need to be closed (no need for <code></input></code>).</p> <ul> <li> <p>In order to let the computer know that these items are in a group, be sure to give each input field the same <code>name</code> property (I named mine <code>"timezone"</code>). </p> </li> <li> <p>Each item should also have a unique value for the <code>value</code> property.</p> </li> <li> <p>Once you've set up your input fields, feel free to add some labels and breaks to make your form easier to read. </p> <ul> <li>You can do this by assigning a unique value to the <code>id</code> property of your <code>input</code> field and then using the <code>label</code> tag like so:</li> </ul> <pre><code class="language-{html}"><label for "[id from input field]"> put your text here</label></code></pre> <ul> <li>You can also do this by simply putting your text outside of your <code>input</code> tag and adding a break(<code><br></code>) like this:</li> </ul> <pre><code class="language-{html}"><input type="radio" name="tz" value="est"> Eastern Standard Time <br></code></pre> </li> </ul> <p>Next, we need to add a submit button. </p> <ul> <li>This can be defined using a <code>button</code> tag with the<code>type</code> property set to <code>"button"</code> and <code>value</code> property set to <code>"Submit"</code>. </li> <li>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 <code>Submit</code> for your text.</li> <li>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. </li> </ul> <p>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 <code>form</code> 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.</p> <p>Finally, add a break and a <code>div</code> tag with a unique <code>id</code> right below the submit button, outside of the form tag. We will use this later to print the selected timezone.</p> <p>By the end of this step, your page should look like this:</p> <p><img src="https://user-images.githubusercontent.com/32557138/106407959-4762b080-640b-11eb-874f-3aa4b09ab8c7.png" alt="tz-buttons-1-2" /></p> <h4>Open a pull request for your code</h4> <p>Just as you did for the last task, be sure create a new branch, titled <code>[your GitHub username]-[week]-[task number]</code>, for your task. As a reminder my GitHub username is <code>danzelo1</code> so my branch name for week 1's second task (this assignment) would be <code>danzelo1-1-2</code>.</p> <p>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.</p> <p>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.</p> </div> </div> <div class="comment"> <div class="user"> <a rel="noreferrer nofollow" target="_blank" href="https://github.com/github-learning-lab[bot]"><img src="https://avatars.githubusercontent.com/in/10572?v=4" />github-learning-lab[bot]</a> commented <strong> 3 years ago</strong> </div> <div class="markdown-body"> <h2>Task 3: Using JavaScript to read user input</h2> <h4>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.</h4> <p>Outside of the form, but still in the body, open the <code>script</code> tag with its <code>type</code> property set to <code>"text/javascript"</code>. This will let the computer know to read the content inside of this tag as JavaScript, not HTML.</p> <ul> <li> <p>The script tag works like any other tag, so to open it you would type <code><script type=""></code> </p> </li> <li> <p>It's imperative that every line of code you write in this line, except for lines with curly braces, is followed with a semicolon</p> </li> <li> <p>Inside here, define a function to print the user's selection from the timezone form. </p> <ul> <li>To define a function, type <code>function</code> followed by the name of your function, which must be unique and must be followed by parentheses and curly braces, like this:</li> </ul> <pre><code class="language-{js}">function readForm(){ //the content of your function will go here }</code></pre> <ul> <li> <p>Inside of the curly braces is where you will write all of your code for this function</p> </li> <li> <p>In your function, define two variables - you can do this using the <code>var</code> keyword.</p> </li> </ul> <p><code>var myVariable = value;</code></p> <ul> <li> <p>Your first variable will be an array to hold all of the radio buttons. You can do this by setting your variable equal to <code>document.getElementsByName("[name property value for the timezone buttons]")</code>. To learn more about arrays, visit <a href="https://www.w3schools.com/js/js_arrays.asp">this page</a> - w3schools is a really helpful resource that covers all the basics of any language.</p> <ul> <li>For example, one of my input fields looks like this: <code><input type="radio" id="est" name="tz" value="est"></code> and my variable looks like this: <code>var radioButtons = document.getElementsByName("tz");</code></li> <li>This line of code references the HTML page by using the <code>document</code> object and gathering all elements with the same value for the HTML <code>name</code> property.</li> </ul> </li> <li> <p>Your second variable will hold the selected radio button's <code>value</code> - since the <code>value</code> property on the input field for the radio button is what made each button unique</p> <ul> <li>Since we don't know the selected button yet, we can just set it to a random element's value</li> <li>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</li> <li>If you named your first variable <code>radioButtons</code> like I did, you could grab the value of the first element of your array using <code>radioButtons[0].value</code> since we start counting at 0 in computer science</li> </ul> </li> <li> <p>Now that these variables are initialized, we'll cycle through the array holding all of the buttons and see which one is selected.</p> </li> <li> <p>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:</p> <pre><code class="language-{javascript}">for (var i = 0; i < radioButtons.length; i++){ //tasks go here }</code></pre> <p>where <code>i</code> is a variable that only exists for the scope of the for loop. </p> </li> <li> <p>In this case, <code>i</code> starts at 0 and increases by 1 (<code>i++</code>) with every iteration of the loop until the loop reaches the length of the <code>radioButtons</code> array - 1 (<code>i < radioButtons.length</code>). </p> </li> <li> <p>For each iteration of the loop, the tasks inside the curly braces are completed.</p> </li> <li> <p>Once <code>i</code> reaches the value set in the second portion of the for loops definition (<code>i < radioButtons.length</code>), the loop breaks and the compiler moves onto the code outside of the curly brackets.</p> </li> <li> <p>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 <a href="https://www.w3schools.com/js/js_if_else.asp">here</a>. We can check the <code>checked</code> condition on each button using an if statement like this:</p> <pre><code class="language-{javascript}">if (radioButtons[i].checked == true){ //actions go here }</code></pre> </li> <li> <p>Since we want to check every radio button to see if it's been checked, place this if statment inside of your for loop.</p> </li> <li> <p>Back to the if statement, if the <code>checked</code> 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 (<code>radioButton[i].value</code>) to the second variable that you defined earlier.</p> </li> </ul> </li> </ul> <p>Now, you've found and saved the timezone selected by the user!</p> <ul> <li> <p>Next, use <code>document.getElementById().innerHTML</code> </p> <ul> <li> <p>Place the id of the div you defined below the submit button in the parentheses. </p> </li> <li> <p>Set this line equal to the variable holding the checked radio button to print it onto your webpage. </p> </li> <li> <p>For example, I set my div's id to <code>"result"</code> and named my variable <code>output</code> and my code looked like this:<code>document.getElementById("result").innerHTML = output;</code></p> </li> </ul> </li> </ul> <p>Finally, you'll want to scroll up to your submit button </p> <ul> <li>Add the <code>onclick</code> property to the <code>button</code> tag and set it equal to the name of the function you just defined <ul> <li>This will let the computer know to call this function when the submit button is clicked. </li> <li>My function was named <code>ValidateForm</code> and my button tag looks like this:<code><button type="button" value="Submit" onclick="ValidateForm()"> Submit </button></code></li> </ul></li> </ul> <p>Now, your page should print out the value of whichever item the user has selected when they click the submit button, like so:</p> <p><img src="https://user-images.githubusercontent.com/32557138/106407858-15514e80-640b-11eb-9ffa-0782a722937d.png" alt="printing-tz-1-3" /></p> <h4>Open a pull request for your code</h4> <p>Just as you did for your previous tasks, be sure create a new branch, titled <code>[your GitHub username]-[week]-[task number]</code>, for your task. As a reminder my GitHub username is <code>danzelo1</code> so my branch name for week 1's third task (this assignment) would be <code>danzelo1-1-3</code>.</p> <p>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.</p> <p>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.</p> </div> </div> <div class="comment"> <div class="user"> <a rel="noreferrer nofollow" target="_blank" href="https://github.com/github-learning-lab[bot]"><img src="https://avatars.githubusercontent.com/in/10572?v=4" />github-learning-lab[bot]</a> commented <strong> 3 years ago</strong> </div> <div class="markdown-body"> <h2>Task 4: Printing the time with JS</h2> <h4>In this task, we'll show you how to print your local machine's time onto your webpage using some basic JS tools.</h4> <p>Next, we will print the time on your local machine onto the webpage with a simple JavaScript function.</p> <p>First, define a new function inside your <code>script</code> tag, but outside of the function you just wrote for finding the selected radio button. </p> <ul> <li>Define a new variable and set it equal to <code>new Date()</code>. This will grab the current date and time from your local machine.</li> </ul> <p>Next, create variables for the current hour, minute, and second using the respective <code>Date</code> functions. </p> <ul> <li> <p>Use your <code>Date()</code> object to define each of these variables. For example, I named my <code>Date()</code> object <code>day</code> and I declared my <code>hour</code> variable using the built-in <code>getHours()</code> function like this:</p> <p><code>var hour = day.getHours();</code></p> </li> <li> <p>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.</p> </li> </ul> <p>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 <code>hour:minute:second</code> format on your webpage.</p> <ul> <li> <p>Strings can be concatenated in JS using <code>+</code></p> </li> <li> <p>JavaScript is also designed to handle type conversion, so you can concatenate any type of object to create a string to print.</p> </li> <li> <p>Your variable should look like:</p> <p><code>var time = hour + ":" + minute + ":" + second + session</code></p> </li> </ul> <p>We'll want our clock to be updated every second, so, at the bottom of the function, call the <code>setTimeout()</code> function with the name of your clock function and <code>1000</code> as parameters. </p> <ul> <li>This will call your function every 1000 ms (or 1 second) that your page is running.</li> </ul> <p>Lastly, to print your clock, add a break and a div tag outside of your form tags. </p> <ul> <li>Give this element a unique tag. </li> </ul> <p>Now, scroll back down to your JavaScript clock function </p> <ul> <li>Use the document's <code>getElementById()</code> function to print your time variable, just as you did to print the form result in your previous function.</li> </ul> <p>Now, you should have a working digital clock and a form that prints the item selected!</p> <p>P.S. Don't forget call your clock function once at the bottom of your script!</p> <h4>Open a pull request for your code</h4> <p>Just as you did for your previous tasks, be sure create a new branch, titled <code>[your GitHub username]-[week]-[task number]</code>, for your task. As a reminder my GitHub username is <code>danzelo1</code> so my branch name for week 1's fourth task (this assignment) would be <code>danzelo1-1-4</code>.</p> <p>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.</p> <p>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.</p> </div> </div> <div class="comment"> <div class="user"> <a rel="noreferrer nofollow" target="_blank" href="https://github.com/github-learning-lab[bot]"><img src="https://avatars.githubusercontent.com/in/10572?v=4" />github-learning-lab[bot]</a> commented <strong> 3 years ago</strong> </div> <div class="markdown-body"> <h2>Task 5: Changing your clock based on user input</h2> <h4>Now we'll show you how to write a JavaScript function that takes the user's input from the radio button and prints the time in the timezone they selected.</h4> <p>Finally, let's integrate the functions we wrote to produce a clock that changes given a selected timezone.</p> <ul> <li>First, define a global variable and set it to 0. <ul> <li>This variable will be how we keep track of how many hours we need to change the clock by.</li> </ul></li> </ul> <p>Now, scroll down to the function you wrote to find the selected timezone. </p> <ul> <li> <p>Using either conditionals or a switch statement, change the offset based on the timezone selected. </p> <ul> <li> <p>For example, if your computer is set to eastern standard time and the user selected pacific standard time, then you would set the offset to 3.</p> </li> <li> <p>Using conditionals, you would just have a series of <code>if</code> and <code>else if</code> statements that would check if your timezone variable is equal to a string that represents the <code>value</code> of each input field. If the condition is satisfied, the offset would be assigned a new value</p> </li> <li> <p>You could also use a switch statement which would look something like this if you lived in the pacific timezone:</p> </li> </ul> <pre><code class="language-{javascript}"> switch(timezone): case "cst": offset = 2; break; case "est": offset = 3; break; default: offset = 0; break</code></pre> <ul> <li>You can learn more about switch statements <a href="https://www.w3schools.com/js/js_switch.asp">here</a>.</li> </ul> </li> </ul> <p>Once you've set up your conditionals, revisit your function that sets your clock. </p> <ul> <li>In the line where you define your variable that holds your current hour, add <code>+ offset</code> so that the offset is added to whatever hour your computer's clock is set to and then that new hour is saved to the hour variable.</li> </ul> <p>Finally, call the function that sets your clock at the end of your function that changes the timezone so that the time gets updated. Now, your clock should change when you select a timezone and hit submit.</p> <p><img src="https://user-images.githubusercontent.com/32557138/106408005-606b6180-640b-11eb-8cb3-8108d3c063f0.png" alt="week-1-final" /></p> <h4>Open a pull request for your code</h4> <p>Just as you did for your previous tasks, be sure create a new branch, titled <code>[your GitHub username]-[week]-[task number]</code>, for your task. As a reminder my GitHub username is <code>danzelo1</code> so my branch name for week 1's third task (this assignment) would be <code>danzelo1-1-3</code>.</p> <p>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.</p> <p>As long as there are no conflicts with the base branch, you can now merge your pull request with your main branch. This is the last task for week 1 so there's nothing else for you to do from here. Until next week!</p> </div> </div> <div class="comment"> <div class="user"> <a rel="noreferrer nofollow" target="_blank" href="https://github.com/github-learning-lab[bot]"><img src="https://avatars.githubusercontent.com/in/10572?v=4" />github-learning-lab[bot]</a> commented <strong> 3 years ago</strong> </div> <div class="markdown-body"> <h2>Providing Feedback</h2> <p>What was confusing about this week? If you could change or add something to this week, what would you do? Your feedback is valued and appreciated!</p> </div> </div> <div class="comment"> <div class="user"> <a rel="noreferrer nofollow" target="_blank" href="https://github.com/3vil8unny"><img src="https://avatars.githubusercontent.com/u/80551644?v=4" />3vil8unny</a> commented <strong> 3 years ago</strong> </div> <div class="markdown-body"> <p>I feel the task instructions could have been a bit clearer, with more concise examples of how the finished code should look.<br /> I found this very challenging as someone who is a complete beginner and spent alot of time going around in circles trying to figure out the correct syntax and order of the elements. </p> </div> </div> <div class="comment"> <div class="user"> <a rel="noreferrer nofollow" target="_blank" href="https://github.com/github-learning-lab[bot]"><img src="https://avatars.githubusercontent.com/in/10572?v=4" />github-learning-lab[bot]</a> commented <strong> 3 years ago</strong> </div> <div class="markdown-body"> <p><a href="https://github.com/3vil8unny/javascript-course-repo/issues">That's it for Week 1! Click here to move on to Week 2!</a></p> </div> </div> <div class="page-bar-simple"> </div> <div class="footer"> <ul class="body"> <li>© <script> document.write(new Date().getFullYear()) </script> Githubissues.</li> <li>Githubissues is a development platform for aggregating issues.</li> </ul> </div> <script src="https://cdn.jsdelivr.net/npm/jquery@3.5.1/dist/jquery.min.js"></script> <script src="/githubissues/assets/js.js"></script> <script src="/githubissues/assets/markdown.js"></script> <script src="https://cdn.jsdelivr.net/gh/highlightjs/cdn-release@11.4.0/build/highlight.min.js"></script> <script src="https://cdn.jsdelivr.net/gh/highlightjs/cdn-release@11.4.0/build/languages/go.min.js"></script> <script> hljs.highlightAll(); </script> </body> </html>

3vil8unny / javascript-course-repo

Week 1 #1

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.