Build Asynchronous Projects With JavaScript Using APIs

Choose and explore text editors like VS Code, Brackets, and Phoenix, and use live preview to work with HTML, CSS, and JavaScript, while this course uses VS Code.

Download the txt file APIs to use for practice and learn how to fetch APIs with async/await, preparing you to build asynchronous API projects in JavaScript.

Learn step-by-step how to use async and await with the fetch API in JavaScript within Visual Studio Code, defining async functions, awaiting fetch responses, and handling errors with try-catch.

Learn to call the fetch API with async-await, awaiting a promise, handling the response object, and parsing JSON for API data.

Learn step by step how to check a fetch response with the ok property and status code, throw HTTP errors for non-200–299 responses, and handle errors with async‑await.

Master async/await with fetch by validating the response status, throwing errors for non okay codes, and converting the JSON body into a usable JavaScript object.

Explains step-by-step async-await fetch workflow: extract json body, convert to a readable object, access nested fields (user.name, address.street, geo.lat), and handle errors with try/catch and response.ok.

master fetch calls for JSON posts with async/await, handle http errors, parse responses to JSON, and extract post titles and bodies by user id.

Learn to query json responses by user id, filter posts, and access index-based post titles and bodies using array indices. Build skills for async fetch and api data manipulation.

Learn how to fetch binary large objects (blobs) with fetch, convert responses to blobs, and display or download images using URL.createObjectURL from a free image API.

Create an image element, append it to a div, and set its src to a temporary blob URL generated by URL.createObjectURL, displaying the image in the browser.

Demonstrate an async fetch that obtains a blob, converts it, creates a temporary object URL, and renders it in an image element with dynamic set, bg, and size.

Explore blob() with fetch to retrieve avatar data, convert responses to blobs, and create temporary urls via URL.createObjectURL while handling errors with try/catch and status checks.

Master handling plain text responses with the text() method, choose between text, json, and blob as appropriate, and generate uuids from a text API using fetch and error handling.

Explore using fetch with async/await to pull weather data as text from a weather text API, handle errors, format output with template literals, and render results to a web page.

Builds a currency converter project with default USD and EUR, enforces a three-character input, and demonstrates dynamic exchange rates via an always-updated API.

Explore the HTML and CSS for a currency converter, including container and input groups. Observe asynchronous conversion and json data for amount, base, date, and rates.

Implement an async convertCurrency function that reads amount, from currency, and to currency from DOM, converts to uppercase, shows a loading state, and displays results in the currency result div.

Master convertCurrency in a currency converter using async/await with fetch, building a URL with amount, from, and to, handling HTTP errors, and parsing JSON to access data.rates.

Show building the currency converter user interface with HTML strings and template literals, inject results into the result div, compute the converted value from dynamic rates, and handle API errors.

Learn to build a qr code generator project in JavaScript, customize size and color, generate and download the qr as a png blob, and fetch the accompanying api.

Explore the HTML and CSS setup for a QR code generator interface, including a semantic main container, linked CSS and JavaScript files, and responsive input groups with styling details.

Create an async function that collects data, size, and color, cleans the color by removing hashtags, and url-encodes the data to build the qr code api url.

Learn to fetch a QR code URL asynchronously, handle HTTP errors, convert responses into a blob, create a temporary blob URL, and render the QR code image in the page.

Learn to generate a qr code with JavaScript, handle errors in catch with console.error and user messages, and create downloadable png using blob size, mime type, and a download link.

Develop a weather hub that fetches temperature, humidity, wind speed, and icons; set up HTML, CSS, and Open Weather API assets in VS Code for a JavaScript asynchronous API project.

Learn to build a weather card interface with html and css, integrate font awesome icons, create a responsive layout, and prepare for javascript fetch integration.

Configure the open weather API key and URL, set metric units, and build DOM interactions with querySelector for a search box, button, weather icon, and weather section.

Add a click event listener on the search button to call the async checkWeather function with the search box value as the city, and enable Enter key to trigger it.

Learn to implement an async function that builds a weather data URL, fetches and parses JSON, handles 404 errors, and updates the page with city name and temperature.

Learn to fetch weather data asynchronously with JavaScript, parse the json to extract temperature, humidity, wind speed, and city name, and display an icon based on the first weather condition.

Explore how this project uses asynchronous APIs with JavaScript to fetch and display three random dog images, supports breed-specific six-image results, and demonstrates responsive layouts.

Learn to set up html and css files, use the doc api for dog breeds, and implement an asynchronous fetch to display images in a responsive grid.

Create an asynchronous fetch dog images feature in JavaScript that reads breed input, lowercases and trims it, and uses a ternary URL for six images or three random images.

Fetches dog images with an asynchronous API call using await, parses JSON, builds an image grid from data.message, and handles breed not found and network errors.

Build an asynchronous language translator with audio, translating across French, Arabic, Hindi, Spanish, Chinese, Portuguese, German, Russian, Japanese and Korean using an API and text-to-speech.

Discover how to structure a language translator interface with HTML and CSS, including a locale-aware select, translation text areas, and responsive styling, preparing for JavaScript integration.

Create dom variables to select language, input text, and output text, then implement an async translate function with input validation and a translating progress state.

Wire up translate button to an async function with addEventListener. Apply try-catch-finally to re-enable button and display the translated text via fetch of input encoded with encode URI component.

Implement the speakText function to perform text-to-speech using the web speech API, creating an utterance with the selected language, validating input, and invoking speech synthesis to read the output text.

Explore building an asynchronous JavaScript project that fetches words from an api, shows definitions, examples, synonyms, antonyms, and pronunciation audio for language learning.

See how to set up a dictionary app with HTML, CSS, and a dictionary api, add script.js with an async fetch definition function, and display results in a responsive card.

Create a global audio URL, load the audio source with the new Audio constructor, and play it using a promise-based approach with catch for errors.

Learn to implement an async function that reads a word from input, shows a loading state, fetches its definition from an API, and handles errors with try-catch.

Fetches data from the API, parses JSON, validates an array, and uses the first entry to build a word entry with its word and a phonetics audio button.

Iterate through entry.phonetics with a for-of loop to locate the first audio URL, then render an onclick playAudio button only when available.

Learn to fetch phonetic data from an API, handle phonetic vs phonetics, and render audio and meanings by building and injecting HTML into the result div.

Explore how to loop through word meanings in an api response using for each iteration, access nested meanings and definitions, and render limited definitions with part of speech labels.

Explore building an asynchronous JavaScript dictionary project that finds definitions, extracts examples, and compiles synonyms and antonyms. Handle word-not-found errors gracefully with user-friendly messaging.

Build a speech to text converter using the browser’s speech recognition and clipboard APIs to convert speech to text, count words, and copy results.

Design an HTML and CSS interface with a centered container, border box, box sizing, and Segoe UI, and implement controls, a text area with overflow, and word count metadata.

Create and reference dom elements, then implement a copy to clipboard feature using navigator.clipboard.writeText with async/await to copy the text area value. Return early if the text area is empty.

Configure the speech recognition api in the browser using window.speechRecognition or WebKit speech recognition, create a recognition instance, check support, and implement start and stop controls.

Configure the speech recognition API by enabling continuous listening, disabling interim results, and setting the language, then wire up start, stop, and event handlers for a complete recognition flow.

Master event-driven speech recognition with the Web Speech API by implementing onstart and onresult handlers, managing interim results, transcripts, and UI states for robust voice interactions.

Master handling speech API events with on end, appending a period and space after each phrase, using the transcript's latest and most confident interpretation.

Learn to implement updateWordCount by trimming input, using a ternary operator, splitting on whitespace with regex, and updating the word count display in JavaScript.

In this project, build an asynchronous pokemon generator with JavaScript that fetches a pokemon API, displays random pokemon with type-based radial gradient, and shows attack, defense, and speed.

Build an interactive pokemon card interface using html, css, and javascript, featuring an asynchronous get pokemon function, a loading spinner, and dynamic theming based on type colors and gradients.

Learn to build an asynchronous Pokemon API client in JavaScript by mapping type colors, constructing the base URL, fetching a random Pokemon on load, and handling errors with try-catch.

Use a try block to fetch the pokemon api, await the response, throw an error with the status if not ok, then parse json and pass data to render Pokemon.

Extract pokemon details from the api response by accessing data.name, data.stats array (hp, attack, defense, speed), and sprites via order; render the image with a loader using asynchronous fetch.

Build dynamic pokemon type pills in a JavaScript project by mapping each type to a color and rendering pills from data.types, with a radial-gradient theme from the first type.