JS Exercises 3

In the index.html file:

• Add your name to the heading element within the header
• Read and complete all instructions within the comments contained in the index.html file.

Create a JavaScript file and:

• Add a comment with your name and today's date
• Reference your JavaScript file within the index file
• Create a variable array with a minimum of 10 elements
• Create a function that loops through your array and displays each array element as a list item within a list, as table data, or as paragraph elements on the index file
• Create another function that displays all or part of your array using an array method
• Create another function that uses a conditional statement
• Create an Event Listener that calls one of the functions when the page loads
• Create another Event Listener that calls another function with a mouse or keyboard event
• Call at least one function from another function
• Update the index file as necessary to accommodate the content generated by each function
• Your index file should not include any JavaScript statements or events to call a function
• Include comments to explain the purpose of each variable, function, and statement on your script file
• Use your own, unique variable, ids, and function names. Do not use variable/id/function names or values from your book or class demo

index.html

< !DOCTYPE html >
< html lang="en" >
< head >
< title >Project 3< /title >
< meta charset="utf-8" >
< meta name="viewport" content="width=device-width, initial-scale=1.0" >
< link rel="stylesheet" href="styles.css" >
< script src="script.js" >< /script >
< /head >

< body >

< div id="wrapper" >

< header >

< h1 >Your Name< /h1 >

< h2 >Summary of Chapters 6 & 7< h2 >

< /header >

< main >

< article id="ch6-cond-stmt" >
< !-- Add a paragraph element here to summarize your understanding of conditional statements. How/when are they useful? -- >
Conditional statements allows a program to branch out its execution when met with a decision. A computer does this
if it arrives to this condition or does that if arrives to that condition. So the conditional statement relies on
boolean results true or false which can be derived using relational operators like checking for equality, checking
if a value is greater, checking if a value is lesser, or checking if values are not equal. These relational operators
can make more complex conditions by adding in logical operators like 'AND' and 'OR'. We can make conditional statements like
'Do this if the value is greater than a given value but at the same time it is lesser than another value or just do it if
the value is an odd number.'
< /article >

< article id="ch6-loop" >
< !-- Add a paragraph element here to summarize your understanding of loops. How/when are they useful? -- >
Loops are used to repeat executing a block of code. This saves a lot of time. For example, if we need to process some data
ten times and the data follows the same process then instead of coding it 10 times then we could just loop ten times.
Our source code is shortened and much easier to read and maintain.
< /article >

< article id="ch7-array" >
< !-- Add a paragraph element here to summarize your understanding of arrays. How/when are they useful? -- >
Arrays are almost synonymous to a list. An array stores multiple data and this array is referenced with a single variable.
It is common that a variable can only hold one value but an array can store many of them. An array has another property called
'index'. The 'index' is a number that is used to store/access values in an array. Having one variable to hold multiple sequence
of values is useful for many purposes such as storing unknown number of data and processing them via a loop. Instead of declaring
ten variables to store and process ten grades of students, I would rather choose to store them in an array instead.
< /article >

< div id="output" >< /div >
< /main >

< /div >

< /body >
< /html >

styles.css

/* CSS Reset */
body, header, main, footer, h1, ul, table, th, td {
margin: 0;
padding: 0;
border: 0;
}

/* You may modify style rules as desired */

body {
background-color: #98b4d4;
font-family: Verdana, Arial, sans-serif;
}

#wrapper {
width: 80%;
margin: 0 auto;
}

header {
text-align: center;
}