In this lab, we'll practice manipulating the DOM with JavaScript using the tools we just learned in our previous lesson. Don't be afraid, you've got this!
- Fork and Clone this repo and
cd js-dom-quotes-lab - Open the index page in your browser:
index.html - Open Chrome's developer tools: command + option + i
- Select and inspect the "elements" from top ribbon
This is an exercise in finding elements on the page (in the DOM).
Your task is to write JavaScript in the script.js file to retrieve the objects which represent these elements.
Start with these:
- Select the
<body> - Select the
<header> - Select all of the elements with class "quote"
- Select all of the subject elements
- Select the navigation links
- Select all the quotes in the "life" section.
- Select the
<p>element containing the second Mark Twain quote without using query selector. Use relative selection. - Now select the same elements from #7 by using query selector.
- Select the 'Quotes About Motivation' heading
- The first section has a class 'subject', preserve it, and add a class 'simplicity' as well.
- Create an element with the text of your favorite quote.
- Add the element that you created in the previous step to the layout by appending it to a corresponding subject section.
- Add the author's last name, as a class name, to one of the quotes.
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent