/u1_hw_fast_and_furious

Live life a quarter mile at a time...

Primary LanguageHTML

Working with the DOM

Dom Toretto

Overview

Can you really manipulate The DOM though?

Yea I didn't think so... Thankfully we're not talking about that Dom.

Today we're going to be practicing DOM manipulation and event handling. Rather than hard-coding HTML and CSS to affect the necessary changes to Dom's website, we'll be doing it all in JavaScript!

Getting Started

  • Fork and clone this repository
  • cd into the directory on your local machine
  • Run open index.html to open the website in your browser and cmd + option + i (MacOS) or ctrl + shift + i (Windows/Linux) to open your dev tools

Setup

You're provided a basic website with included index.html, style.css, and script.js. All of your work will go in script.js - you shouldn't have to edit index.html or style.css.

  • HINT: Remember that you can select the children of an element with multiple selectors. Example: .someClass li will select all of the list items within someClass
  • Be specific when googling information you might need to solve a problem

Accessing DOM Elements (Querying)

Let's start with some simple query selecting.

Part 1

DOM's personal website title is a bit wordy. Write a JavaScript statement that selects the #main-title ID element. Remember there are a couple of ways to query id. Change the text of the title to something shorter.

Part 2

Select the body and change the background-color to a new color of your choice.

Part 3

Select DOM's Favorite Things list and remove the last list item.

Part 4

Select all .special-title class elements and change their font-size to 2rem. Remember you might have to iterate through the list of elements

Part 5

Turns out DOM never raced in Chicago. Access the Past Races list and remove Chicago.

Michelle

Creating New DOM Elements

Part 6

Let's add to DOM's Past Races list. Create a new <li> element, change the new <li> text to the name of a city, and append it to the Past Races list.

Part 7

Create a new .blog-post corresponding to the new city added in Part 6. You will have to create a new <div> with class of .blog-post, a new <h1> with text, and a new <p> with some text. Make the new element consistent with the other posts. Think about what order you want to create the elements, and what order you want to append them in.

Requirements

  • Parts 1 - 7 fully completed

Walker

Submission Guidelines

Resources