Project workshop and status updates

In groups of 2, write down

• What you’ve done on your project
• What remains
• If you have any questions

Javascript cheat sheet

Start with this Glitch page. Try out the techniques below to use Javascript alone to modify the appearance of the page.

Selecting an element

Selecting an element in Javascript is similar to doing it in CSS

• Prefix with a “.” when selecting a class, or “#” when selecting an ID
• Use document.querySelector when selecting one element, or document.querySelectorAll() when selecting multiple
• When selecting multiple items, your selection will end up being an array. So you have to loop through each item in the array to cahnge it

//select an h1 element
let h1 = document.querySelector('h1');

//select all paragraph elements 
let paras = document.querySelectorAll('p');

let div = document.createElement('div'); //create element
div.classList.add('btn'); //add class to element

To confirm your selection is working, you can always use a console.log() statement

Editing CSS

You can edit CSS directly using JS

//select all paragraph elements and change color to red
let paras = document.querySelectorAll('p');

console.log(paras);

paras.forEach(function(currentPara){
  currentPara.style.color = 'red';
	//if the style has a dash in it - you have to reference it using brackets
  currentPara.style["padding-top"] = "10px"; 
  
  //or select all paragraph elements and change multiple elements -- this will override all styles
  currentPara.style = 'color:red; font-size:16px; background: yellow';
})

// edit just one p element
let singlePara = document.querySelector('p');
singlePara.style.color = 'red';

(Recommended) alternatively, you can add a class that already has the styles you want

JS: