Skip to content

js-dom-lab.md

Latest commit

 

History

History
138 lines (77 loc) · 3.6 KB

js-dom-lab.md

File metadata and controls

138 lines (77 loc) · 3.6 KB

code differently

JavaScript and the DOM Lab

The Set-Up

  • Fork and clone this repository locally and in Visual Studio Code

  • Push up your changes to the remote repository

Tasks

Part One

  1. Create an HTML file called js-dom.html

    • Must have global HTML document structure

  2. Add two <p> elements without content.

  3. Give each <p> element an id and value

  4. Stage, commit, and push changes. Let Git be on your team.

  5. Create scripts for each exercise:

    • Write a script to add "We are coders!" to the <p> element.

    • Find the first <p> element and change its text to "Developers for life!"

    • Add an image to the HTML document using DOM methods

      Stage, commit, and push changes. Let Git be on your team.

    • Write a script to change the color of the text from black to your favorite color

    • Add a script to change the font size of the first <p> element to 40px

      Stage, commit, and push changes. Let Git be on your team.

    • Add a button to the HTML document

    • Add a script that hides the image when the button is clicked

      Stage, commit, and push changes. Let Git be on your team.

Part Two

  1. Create an HTML file called about.html

    • Must have global HTML document structure

  2. Stage, commit, and push changes. Let Git be on your team.

  3. Create a simple "About Me" webpage and using JS and the DOM to manipulate elements.

  4. Title your webpage About Me and add this code

<ul>
    <li>Nickname: booboo</li>
    <li>Favorites: music, pizza, The Office</li>
    <li>Hometown: Wilmington </li>
    <li>Random Fact: Black is my favorite color.</li>
</ul>

  1. Stage, commit, and push changes. Let Git be on your team.

  2. Nest those values within a span element and give each an id

  3. Create a JS file named main.js and link to the HTML document

  4. Stage, commit, and push changes. Let Git be on your team.

  5. Complete the following tasks below using the DOM methods:

    • Change the body style so it has a font-family of Arial, sans-serif.

    • Replace each of the values with your own information.

      Stage, commit, and push changes. Let Git be on your team.

    • Change the <li> style to a color of your choosing. Cannot be black.

      Stage, commit, and push changes. Let Git be on your team.

    • Find a picture and add to the project.

    • Create a new img element and set its src attribute to a picture of you. Append the image to the web page.

      Stage, commit, and push changes. Let Git be on your team.

Part Three

Using the great power of the DOM and its methods, iterate through the elements in the HTML document and create a Table of Contents that will be at the top of the webpage.

  1. Create a new HTML file and add the code below.
<body>
    <div >
        <h3>Table of Contents</h3>
    </div>
    <hr/>
    <div >
        <h1>Fruits</h1>
        <h2>Red Fruits</h2>
        <h3>Apple</h3>
        <h3>Raspberry</h3>
        <h2>Orange Fruits</h2>
        <h3>Orange</h3>
        <h3>Tangerine</h3>
        <h1>Vegetables</h1>
        <h2>Vegetables Which Are Actually Fruits</h2>
        <h3>Tomato</h3>
        <h3>Eggplant</h3>
    </div>
</body>

  1. Stage, commit, and push changes. Let Git be on your team.

  2. Add a script to the HTML document that iterates through the elements and creates a table of contents. The table of contents should be at the top of the webpage.

  3. Stage, commit, and push changes. Let Git be on your team.