Last Lecture : Fetch API with Project | JavaScript Full Course

Main ideas / lessons

• This lecture is the final chapter of a complete JavaScript course focused on the Fetch API.
• It reviews earlier concepts (especially Promises) and connects them to making API calls.
• It explains APIs conceptually as Request–Response systems:
  • You send a request to an endpoint (URL).
  • The server/API sends back a response, which can include data (often in JSON).

Fetch API in practice

It demonstrates how to perform API calls in JavaScript using:

• fetch(url) returning a Promise
• handling results via Promise chaining or async/await

It also teaches core API terminology and workflow:

• Endpoint (URL where requests are sent)
• Request / Response objects
• HTTP verbs (e.g., GET, POST, DELETE, etc.)
• HTTP status codes (examples: 200 success, 400 bad request, 404 not found, 500 server error)
• Headers (extra metadata sent with requests/responses)

AJAX + JSON

• The term AJAX is introduced as the concept of asynchronous web requests.
• Why today’s data is commonly JSON instead of XML:
  • AJAX = asynchronous JavaScript + (formerly) XML; now often JSON
  • JSON is described as JavaScript-object-like structured data
• After fetch, the response body must be converted using .json() to get usable JavaScript data.

Mini project: Currency Converter

The lecture ends with a mini project that uses:

• two dropdowns for “from” and “to” currencies
• an API call to fetch exchange rates
• dynamic UI updates based on user selection

It concludes with notes on additional learning (“back end”, frameworks like React, etc.) and mentions that code is available in the description box.

---

Methods / instruction-like content (detailed bullets)

1) Making a Fetch API call (core workflow)

• Use fetch() with a URL
  • fetch(url)
• Understand the return value
  • fetch() returns a Promise
  • Initially the promise is pending
  • When fulfilled, you receive a Response object (example fields: status, statusText, headers)
• Handle async behavior
  • Option A: Use async/await
    • Create an async function (e.g., async function getFacts() { ... })
    • const response = await fetch(url)
    • check response.status (e.g., 200)
  • Option B: Use Promise chaining
    • fetch(url).then(response => response.json()).then(data => ...)
• Convert response to JSON (critical)
  • After getting a Response object:
    • const data = await response.json()
  • This produces a second promise that resolves to parsed JSON
• Use extracted JSON data
  • Access fields/arrays from the parsed result
  • Example concept: JSON data can be returned as an array, accessed via indexes like [0]

2) Getting “readable” data from fetch

• Do not assume the raw fetch() result is immediately readable.
• Instead:
  • Use response.json() to parse it into a usable JavaScript object/array.
• Then set results into the DOM (example concept):
  • element.innerText = factText

3) AJAX + JSON explanation workflow

After making an API call:

1. Send request (fetch / browser behavior)
2. Receive response (typically JSON today)
3. Convert response body using .json()
4. Extract needed values from the resulting JavaScript object
5. Use values to update the UI

4) Currency Converter project instructions (high-level build steps)

HTML layout

• Heading: “Currency Converter”
• Form with:
  • amount input (default value shown in the example)
  • From currency dropdown
  • To currency dropdown
  • button like “Get Exchange Rate”
• Message area to show the computed conversion result

Dropdown options + flags

• Use a countries list file (provided externally / described in the description box) containing:
  • currency codes
  • country codes
• Each currency selection updates a displayed flag image
  • src is computed from the selected country code

JavaScript setup

• Select DOM elements using document.querySelector(...)
• Populate dropdowns by looping through the country/currency list:
  • create <option> elements dynamically
  • set option text/value to the currency code
• Set default selected currencies (example: USD in “from” and INR in “to”)
• Add event listeners:
  • on dropdown change → update flag
  • on button submit/click → fetch exchange rate and compute final amount

API usage for exchange rates

• Build an endpoint URL using:
  • from currency code (e.g., USD)
  • to currency code (e.g., INR)
• Use fetch() to call the endpoint
• await response.json() to parse exchange rate data
• Extract the exchange rate value
• Compute:
  • finalAmount = amount * exchangeRate
• Display final result in the message element using innerText

Validation + avoiding reload

• If the amount is invalid (e.g., less than 1 or blank), it’s adjusted (e.g., forcing a minimum).
• Submitting the form normally reloads the page; the lecture implies preventing default behavior so the experience stays smooth.

Initialization

• Add logic on initial page load to show a default conversion automatically.

5) Homework assignment (from the lecture)

• Task: “Learn how to send a POST request using Fetch API”
• Instruction:
  • Visit Fetch API docs on MDN
  • Use fetch(url, options)
  • In options, set:
    • method: "POST"

---

Speakers / sources featured (as stated or implied)

Speakers

• The video instructor / lecturer (“Hi everyone… welcome…”) — no name provided in subtitles.

Sources / external references mentioned

• Free public API listings: “Free APIs” / “Free API” (referenced generally)
• Cat Facts API (used as an example)
• GitHub-hosted cat facts endpoint (referenced as the lecture’s example API)
• MDN Web Docs:
  • Fetch API documentation
  • HTTP verbs / status codes
• Currency exchange API (referenced generally; explained using a GitHub currency API)
• HTML/CSS/DOM usage (implied)
• Font Awesome (icons referenced)
• Countries list file for codes/flags (mentioned as downloadable/linkable via the description)