10/28 Week 3, Day 3: APIs, DOM Manipulation, and CSS

[ajlee12]

Morning Exercise Review

Let's make a func. that gets the data from the turtles API:

async function getTurtles() {
  const response = await fetch('https://TMNT-API.rbi.repl.co');
  const turtles = await response.json();
  return turtles;
}

Then let's put the turtles onto the DOM after getting data:

async function showTurtles() {
  // Call the func. above. Remember to wait for its results.
  const turtles = await getTurtles;

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

  // Make a div out of each turtle:
  const content = turtles.map((turtle) => {
    return `
      <div>
        <h2>${turtle.name}</h2>
        <p></p>
        <img src="${turtle.image}" alt="${turtle.name}" />
        <h3>Weapon: ${turtle.weapon}</h3>
      </div>
    `;
  }).join('');

  // Insert the divs we made:
  main.innerHTML = content;
}

// Finally, fire everything away:
showTurtles();

Let's style it a bit:

header {
  position: fixed;
  background-color: black;
  color: white;

  /* Note that for the value 0, you don't need to provide a unit. */
  top: 0;
  left: 0;
  right: 0;
}

main {
  /* Flex options */
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
  margin: auto;
  max-width: 40rem;

  /* Grid options */
  display: grid;
  grid-gap: 1rem;
  grid-template-columns: auto auto;
}

• This is a GREAT place to learn about CSS Grid: https://css-tricks.com/snippets/css/complete-guide-grid/

• And here for CSS Flexbox: https://css-tricks.com/snippets/css/a-guide-to-flexbox/

  /* Give all imgs set values so they have the same size. */
  img {
  width: 15rem;
  height: 20rem;
  
  /* Crop the imgs intelligently */
  object-fit: cover;
  }

• Read more about object-fit property: https://www.w3schools.com/css/css3_object-fit.asp

  
  /* Center the text within the `turtle` divs. */
  .turtle {
  text-align: center;
  }

/ Give the

s that contain texts a fixed height / .turtlel p { height: 2rem; font-style: italic; }

/ Turn turtle names into all uppercase / .turtle h2 { text-transform: uppercase; }

## Min-max function for grid-template
- Read about it here: https://developer.mozilla.org/en-US/docs/Web/CSS/minmax

```css
{
  grid-template-columns: repeat(auto-fill, minmax(20rem, 1fr));
}

• auto-fill: Let the browser decide however many columns there should be
• Let each column have min 20rem width
• When the window view gets too small for more than 1 column,
• fr: fractional unit
  • 1 = 100% = take up all the available space
  • Learn more about fr in CSS Grid here: https://www.digitalocean.com/community/tutorials/css-css-grid-layout-fr-unit

Dog Age Calculator

Input Field

Let's make an input field in HTML:

<input type="number" id="dog-age" value="1" min="1" required />

• Note that <input> is a self-closing tag.

It looks like this:

• Note that the value cannot go below 1 and the default is 1.

Make Input Field Interactive

Target the input box with JS:

const dogAgeInput = document.querySelector('#dog-age');

// This is the div where we want to display our calculations later.
const answer = document.querySelector('#answer');

Add an event listener to the input box:

dogAgeInput.addEventListener('input', convert);

• The specific event we're listening to here is "input" (read more about it on MDN).
• Note that all input values are turned into strings. We may have to turn them into numbers later.

The "input" event triggers the convert function, which we define here:

• We can access the value of the input box here by accessing its .value property.

• Note that we're turning the stringified input values into numbers.

  function convert() {
  const dogYears = Number(dogAgeInput.value) * 7;
  
  answer.textContent = `That's ${dogYears} in dog years!`;
  }

  Afternoon Review

  <form>

  An example:

  <form>
  <h1>🍺 Whopoer Bar 🍔</h1>
  <div>
  <label for="first-name">First Name</label>
  <!-- We made the attributes vertical simply for readability -->
  <input
    id="first-name"
    name="firstName"
    type="text"
    autocomplete="off"
    required
  >
  </div>
  <div>  
  <label for="age">Age</label>
  <input
    id="age"
    type="number"
    min="0"
    autocomplete="off"
    required
  >
  </div>
  <div>  
  <button type="submit">SUBMIT</button>
  </div>
  </form>

  • Note that we used kebab-cases for id and camelCase for name.
• It's because we later need to use JS to access the name attribute, and JS doesn't recognize kebab case.
  • For accessibility reasons, include for attributes for your labels.
• Match the values for for to those of id.

  • We wrapped each <input> and <button> in a <div> so they stack up vertically.

Our form looks like this:

Style it!

body {
  display: grid;
  place-items: center;
}
form div {
  margin: 1rem auto;
}

Default Behavior of <form>

By default, when you submit a form, the webpage will reload, and the form values are added as query params in the URL.

What if we don't want these default behaviors?

Use JavaScript to preventDefault:

• preventDefault() is an Event Method; read about it here: https://www.w3schools.com/jsref/event_preventdefault.asp

const drinkingAge = 21;
const form = document.querySelector('form');

// Note the "event" param here.
function handleSubmit(event) {
  event.preventDefault();

  // We're accessing the specific input fields within the form by "name".
  const name = form.firstName.value;
  const age = Number(form.age.value);

  if (age >= drinkingAge) {
    // Display something on document.body that cheers the visitor.
  } else {
    // Display some restriction.
  }
}

// Run the func when form is submitted.
form.addEventListener('submit', handleSubmit);