DOM API Lab

Objective

For this lab, you'll be recreating this simple webpage. However, you are not allowed to manipulate the index.html or the styles.css files. You will need to re-create this entire webpage in your index.js file using only JavaScript. This assignment will allow you to practice DOM manipulation. You should manually create each DOM element you need, append them to the correct parent, and edit their attributes using the DOM API. You should not use Element.innerHTML.

You should use this Code Pen to see the HTML and CSS that you will be re-creating using only JavaScript.

Methods you can use:

• ❌ Element.innerHTML
• ✅ Document.createElement
• ✅ Node.appendChild
• ✅ Element.append
• ✅ Element.attributes
• ✅ HTMLElement.style
• ✅ Any other DOM API methods

Directions

1. If this is a Practice Lab, fork this repository and clone down your forked repo. OR, if this is a Lab Assignment generated through Github Classroom, you do not need to fork and can clone down your personalized repo directly.
2. Code your solution in index.js. Open the HTML file in your web browser as you're coding to see your work.
3. Stage, commit, and push your changes regularly.
4. If this is a Practice Lab, open a pull request into The-Marcy-Lab-School:master branch to submit. OR, if this is a Lab Assignment, copy the URL of this personalized repo and submit it through Canvas.