My Raw Notes for the Week of 8-30-2021

ENGLISH:

Holt: AJAX stands for "Asynchronous Javascript And XML", but we don't use the "and XML" part of it anymore, because instead we use JSON ("JavaScript Object Notation").

Holt: AJAX is used to request information from an API, which stands for "Application Programming Interface", but just remember that API means "somewhere to request data from, such as a server". This is what AJAX does. "You load a page, and then you make another request, while you have not refreshed the page, to a server to get more data back." An example: Being in your email and clicking to get more email to appear without refreshing the page. This is referred to as AJAX.

Robert: AJAX is a way to call APIs. 'AJAX' and 'API' are not synonymous.

CODE:

// HTML
<h2>Doggos</h2>
<div class="doggos"></div>

// JS
const DOG_URL = "https://dog.ceo/api/breeds/image/random" // 'DOG_URL' is called "screaming case". It's a const that will NEVER change, because the URL stored in it should NEVER change.

const promise = fetch(DOG_URL) // 'fetch()' gives you back a 'promise', which is very similar to a function that gets run later, but it's actually an object that you call '.then' on.

// What occurs below is 'promise chaining'. (A 'promise' is an object that represents the future answer to whatever you asked for.)
promise
  .then(function(response) { // This function runs whenever the 'promise' 'resolves' (i.e., completes / succeeds / the fetched URL comes back). (It takes time to request something from the internet and for it to come back to you, and things that don't happen immediately are called 'asynchronous'.)
    const processingPromise = response.json() // When the request 'resolves', it comes back as a blob of text that you need to transform into something useful. This is what 'response.json()' does. ('response' is what you got back from the URL.) 'response.json()' parses it into an object that you can use, in the form of another 'promise'.
    return processingPromise // return the 'promise'.
  })
  .then(function(processedResponse) { // 'processedResponse' is the parameter for (represents) the (nameless) JSON object.
    console.log(processedResponse)
  })

console.log("this will log first") // This is the proof that everything above is delayed/'asynchronous'.

//-------------------------------------------------------------------

// HTML
<h2>Doggos</h2>
<div class="doggos"></div>

// JS
// So now let's make an image on the page of a random dog (have to comment out whole code block above).

const DOG_URL = "https://dog.ceo/api/breeds/image/random"

const promise = fetch(DOG_URL)
const doggos = document.querySelector(".doggos")

promise
  .then(function(response) {
    const processingPromise = response.json()
    return processingPromise
  })
  .then(function(processedResponse) {
    const img = document.createElement("img")
    img.src = processedResponse.message
    img.alt = "Cute doggo"
    doggos.appendChild(img)
  })

//-------------------------------------------------------------------

// HTML
<h2>Doggos</h2>
<button class="add-doggo">Add Doggo</button>
<div class="doggos"></div>

// JS
// Doing the above multiple times by using a function (have to comment out whole code block above).

const DOG_URL = "https://dog.ceo/api/breeds/image/random"

const doggos = document.querySelector(".doggos")

function addNewDoggo() {
  const promise = fetch(DOG_URL)
  promise
    .then(function(response) {
      const processingPromise = response.json()
      return processingPromise
    })
    .then(function(processedResponse) {
      const img = document.createElement("img")
      img.src = processedResponse.message
      img.alt = "Cute doggo"
      doggos.appendChild(img)
    })
}

document.querySelector(".add-doggo").addEventListener("click", addNewDoggo)

//-------------------------------------------------------------------

// HTML
<h1>API Challenge</h1>
<ul>
  <li><h2>Random dad joke:</h2></li>
  <li><button class="generate-new-joke">New joke</button></li>
</ul>
<p class="new-joke-location"></p>

// CSS
body {
    margin: 0;
    padding: 0;
    padding: 0 100px;
}

h1 {
    text-align: center;
}

ul {
    list-style-type: none;
    padding: 0;
    margin-top: 70px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

h2 {
    font-weight: normal;
}

.generate-new-joke {
    padding: 5px 8px;
}

.new-joke-location {
    margin-top: 70px;
    text-align: center;
    font-size: larger;
}

// JS
function callAPI() {
  const DAD_JOKE_URL = 'https://icanhazdadjoke.com/' // Robert note: "In JS, 'fetch()' only needs the URL. 'curl' -- as in, 'curl -H "Accept: application/json" https://icanhazdadjoke.com/' -- is a Command Prompt tool that requires all that other stuff." // FYI: To clear Command Prompt in Windows: 'cls' + 'enter'

  const promise = fetch(DAD_JOKE_URL, { headers: {'Accept': 'application/json'} }) // this second parameter is so that what I get back is in a JSON format, instead of an HTML format, given that it says here https://icanhazdadjoke.com/api#api-response-format that the "default response format" is in HTML.

  promise
    .then(function(response) {
      const processingPromise = response.json()
      return processingPromise
    })
    .then(function(processedResponse) {
      document.querySelector('.new-joke-location').textContent = processedResponse.joke
    })
}

callAPI() // calling it here just so that a joke appears on load, not just on button click. There might be a more concise way to do this.

document.querySelector('.generate-new-joke').addEventListener('click', function() {
  callAPI()
})