10/27 Week 3, Day 2: CSS, DOM Manipulation

[ajlee12]

StarWars Species Exercise

• Write an async function, getAllSpecies(),
  • await the fetch call to the API URL.
  • await the parsing of the response from JSON into JavaScript (use the .json() method)
  • Return the results property from this data
• Write another function, populateTable()
  • Within this func., await the invocation of getAllSpecies(). (Remember what the returned result from that func. is...)
  • Target the <tbody> in the HTML
  • Iterate over the results (it's an array!) with .map(), and make a table row out of each result
  • Join and append all rows to <tbody>
  • Use .innerHTML

CSS

SpeciFISHity Cheatsheet!

Center the table

• auto for margin
• center for text-align

  table {
  margin: auto;
  text-align: center;
  border: 1px solid white;
  border-collapse: collapse;
  }

  Text-align

  Compare the different effects here.

Border collapse

Check out what border-collapse does here.

Text transform

You can capitalize all letters by setting the text-transform property:

{ text-transform: capitalize; }

Apply hovering rules:

body {
  background-color: black;
}

tr:hover {
  background-color: darkgrey;
}

• The main bg color is black, but when you hover over the table rows, each row's bg color turns grey.

While Loop

let myNum = 8;

while (myNum < 29) {
  console.log(myNum);
  myNum++;
}

This loop will print out myNum's values from 8 to 28 in the console.

The loop runs while myNum is less than 29.

• Note that if we omit the myNum++, the loop will run infinitely (dangerous!), because myNum will always be 8, which is less than 29.

Try-Catch

We "try" something, and if it produces an error, we "catch" it.

try {
  const response = await fetch(`api_url`);
  const data = response.json();
} catch(error) {
  throw error;
}

Event Listeners

Quick overview of event listeners: https://www.w3schools.com/js/js_htmldom_eventlistener.asp

Let's target a button first:

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

• Note that this selects the first instance of all <button>s that exist on the HTML.

Now let the button react to clicks:

button.addEventListener('click', _someFunction_);

Upon clicking this button, the function _someFunction_ will be called.

Class vs. ID

Let's say you have some buttons on the HTML:

<div class="button-wrapper">
  <button id="A">I'm Button A</button>
  <button id="B">I'm Button B</button>
</div>
<div class="button-wrapper">
  <button>Random Button</button>
  <button>Random Button</button>
</div>

Using JS to target specific elements:

// Selecting Button A
const btnA = document.querySelector('#A');
// Selecting Button B
const btnA = document.querySelector('#B');

// Selecting the 2 divs with class name "button-wrapper"
const divs = document.querySelectorAll('.button-wrapper');

You can target them in CSS to apply targeted styling:

div.button-wrapper {
  /* You can style both divs here */
}
button {
  /* This styles ALL 4 buttons */
}
button#A {
  /* This only styles Button A */
}

Event Target

We have the button within a <div>:

<div class="meal">
  <div class="dish"></div>
  <button id="chicken">Chicken Button</button>
</div>

The meal is...

Chicken Button

Now, define a function that's triggered by a button-click event: ```JS // Note the "event" param. function handleClick(event) { // Target the button that got clicked. const theBtnThatGotClicked = event.currentTarget; // Find the cloest div with class name "meal". const theClosestMeal = theBtnThatGotClicked.closest('.meal'); // Select the div with class "dish" within the "meal" div. const theDishInside = theClosestMeal.querySelector('.dish'); } ``` Then let's write another function that ```JS function cook(rawEmoji) { const food = { '🐓': '🍗', '🐄': '🍔', '🌽': '🍿', }; return food[rawEmoji]; } ``` Now we can add the functionality of "cooking" to finish off this previous func.: ```JS // Note the "event" param. function handleClick(event) { const theBtnThatGotClicked = event.currentTarget; const theClosestMeal = theBtnThatGotClicked.closest('.meal'); const theDishInside = theClosestMeal.querySelector('.dish'); // Cook using the `cook` function! theDishInside.textContent = cook(theDishInside.textContent); theBtnThatGotClicked.disabled = true; theBtnThatGotClicked.textContent = 'Cooked!'; } ```