solutions.md

Module 5 Solutions

• Module 5 Solutions
  • 02 - Changing CSS Classes with JS
  • 03 - Getting CSS with JS
  • 04 - Changing Attributes
  • 05 - Finding an element's size and position
  • 06 - DOM Traversals
  • 07 - Building Tabbed Component
  • 08 - Building Carousel Component
  • 09 - Building Carousel component pt2

Back to Module 4

02 - Changing CSS Classes with JS

Create a button. Do the following when the button is clicked:

<button type="button" class="button">Button</button>

const button = document.querySelector('.button')

1. Change the button's color.

button.style.color = 'red'

2. Change the button's backgroundColor.

button.style.backgroundColor = 'white'

3. Change the button's width.

button.style.width = '300px'

4. Change the button's height.

button.style.height = '250px'

Back to top

03 - Getting CSS with JS

Say you have the following HTML. Get its styles with both the style property and getComputedStyle. What's the difference between the values of these properties?

<div style="color: red; background-color: white; font-size: 5em">Big red text!</div>

const element = document.querySelector('div')

1. Get style by style property

const color = element.style.color
const backgroundColor = element.style.backgroundColor
const fontSize = element.style.fontSize
// returns values as strings

const style = element.style
// returns object with empty values except for the 3 defined inline

2. Using getComputedStyle

const style = getComputedStyle(element)
// returns all 278 properties with values

Back to top

04 - Changing Attributes

Practice adding, and removing attributes with Element.getAttribute, Element.setAttribute and Element.dataset.

<div class="element" data-hotdogs="1"></div>

const element = document.querySelecto('.element')

1. Set an attribute with Element.setAttribute

element.setAttribute('checked', true)

2. Get an attribute with Element.getAttribute

element.getAttribute('checked')

3. Get an attribute with Element.dataset

const numHotdogs = element.dataset.hotdogs
// 4

4. Set an attribute with Element.dataset

element.dataset.hotdogs = 6

5. Remove attribute with Element.removeAttribute

element.removeAttribute('checked')

Back to top

05 - Finding an element's size and position

Go to any web page, open up your console and get use getBoundingClientRect to get at the DomRect of at least one element. You should see eight values.

06 - DOM Traversals

Practice traversing the DOM with the methods taught in this lesson. With the HTML given below, do these tasks:

<div class="characters">
  <ul class="hobbits">
    <li>Frodo Baggins</li>
    <li>Samwise "Sam" Gamgee</li>
    <li>Meriadoc "Merry" Brandybuck</li>
    <li>Peregrin "Pippin" Took</li>
    <li>Bilbo Baggins</li>
  </ul>
  <ul class="humans">
    <li>Gandalf</li>
    <li>Saruman</li>
    <li>Aragorn</li>
    <li>Boromir</li>
    <li>Faramir</li>
  </ul>
  <ul class="elves">
    <li>Legolas</li>
    <li>Glorfindel</li>
    <li>Elrond</li>
    <li>Arwen Evenstar</li>
  </ul>
  <ul class="enemies">
    <li>Sauron</li>
    <li>Nazgûl</li>
  </ul>
</div>

1. Select .characters with document.querySelector

const charactersList = document.querySelector('.characters')

2. Select .humans from .characters

const humansList = charactersList.querySelector('.humans')

3. Select all humans with querySelectorAll, starting from .humans

const humans = humansList.querySelectorAll('li')

4. Select all hobbits with children

const hobbitsList = charactersList.querySelector('.hobbits')
const hobbitses = hobbitsList.children

5. Select the Merry (the hobbit)

const merry = hobbitses[2]

6. Select .enemies from Sauron

const individuals = charactersList.querySelectorAll('li')
const sauron = individuals[14]
const enemiesList = sauron.parentElement

7. Select the .characters div from Nazgûl

const individuals = charactersList.querySelectorAll('li')
const nazgul = individuals[15]
const enemiesList = nazgul.parentElement
const charactersList = enemiesList.parentElement

8. Select Elrond from Glorfindel

const charactersList = document.querySelector('.characters')
const elvesList = charactersList.querySelector('.elves')
const elves = elvesList.querySelectorAll('li')
const glorfindel = elves[1]
const elrond = glorfindel.nextElementSibling

9. Select Legolas from Glorfindel

const legolas = glorfindel.previousElementSibling

10. Select Arwen from Glorfindel

const list = glorfindel.parentElement
const arwen = list[list.length -1]

07 - Building Tabbed Component

08 - Building Carousel Component

09 - Building Carousel component pt2

Back to top

On to Module 6