JS Exercises 2

In the index.html file:

• Create a heading element for your webpage and nest it within the header element. You may use HTML or JavaScript to complete this requirement.
• Add content related to Chapters 8 and 10 to the heading 2 element and paragraph elements on the page.

Create a JavaScript file and:

• Add a comment with your name and today's date.
• Reference your JavaScript file within the index file.
• Create and use a JavaScript object.
• Use a function to create a new heading element, add content to the new heading element, and display it within an article element on the page.
• Create another function that removes a node.
• Use a minimum of two different methods from the following list:
  • getElementsByClassName()
  • getElementsByName()
  • getElementsByTagName()
  • querySelector()
  • querySelectorAll()
• Create other functions as necessary to meet project requirements.
• Create and use at least one Event Listener. Do not call any functions from the HTML file.
• Create another Event Listener that calls another function with a mouse or keyboard event.
• Comment generously. Include comments to explain the purpose of each variable, function, and statement on your script file.
• Use your own, unique variable and function names. Do not use variable names or values from your book or demo activities.

Modify the HTML and CSS files as desired.

index.html

< !DOCTYPE html >
< html lang="en" >

< head >
< title >Project 4< /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 >

< header >
< h1 >Your Name< /h1 >
< /header >

< article >

< h2 >< /h2 >

< div >

< p >< /p >
< p >< /p >
< p >< /p >

< /div >

< /article >

< /body >
< /html >

styles.css

body {
background-color: #ffebdc;
}

article {
margin: 2% 15%;
border-bottom: 2px solid #000;
}