Hey! 👋🏼

Javascript: DOM Manipulation Pt.2

Redi School Munich - Spring 2021

Recap

Document Object Model

Javascript's interface for interacting with HTML

MDN: Document Object Model
  • getElementById()
    document.getElementById('main')
  • querySelector()
    document.querySelector('li') document.querySelector('.someclass')
  • innerHTML
    document.querySelector('li').innerHTML = 'Email Mom.';;

Some more on DOM

  • textContent
    document.querySelector('li').textContent
  • createElement()
    const newParagraph = document.createElement('p')
  • appendChild()
    firstHeading.appendChild(newParagraph)

In-class exercise!

1.5 hours! 🕘

  • Display 10 movie titles according to an array of nominees from this years Oscar!
  • If an item is more than 5 stars, a highlight should be shown (maybe a background or a star should appear – up to you!)
  • Use functions, conditionals and loops and whatever you feel like you have learned over the past classes

✨ Make usage of the following (if there's time enough):

  • - Make usage of grid / flexbox (if possible)

More DOM Manipulation!

This time with CSS styles

The basic of style manipulation

elem.style

Modify classes

elem.classList.add('MyClass'); elem.classList.remove('MyClass');

Your semester project

Previous submissions

Spend some thought on the website you would like to create!

🤔💡

Homework!

Further advance your movie application. Add three buttons for the jury to highlight nominees, winners, and to clear the highlights. Nominees could for example be highlighted by blue boxes while winners would be highlighted by enlarging the corresponding card and color it in gold. Other than that be creative!

Any Questions or Feedback?