Working with the DOM, Click Events, and Web APIs

What Is an API, and What Are Web APIs?

These types of APIs are often divided into two main categories: browser APIs and third-party APIs.

Browser APIs expose data from the browser. As a web developer, you can access and manipulate this data using JavaScript.

They also provide access to various functionalities, such as manipulating the structure of the website, handling events, working with storage, and communicating with the network.

Some examples of commonly used Browser APIs include:

The DOM API, which you can use to manipulate HTML elements, their styles, and attributes. You will learn much more about the DOM in the coming lessons. It’s a core concept in web development.

The Storage API, to store data locally on the user’s device.

What Is the requestAnimationFrame() API, and How Can It Be Used to Set Up an Animation Loop?

To use the requestAnimationFrame() method, all you need to do is to call it and pass a callback function into it: requestAnimationFrame(callback);

Calling requestAnimationFrame() must first occur inside a function that handles the animation, such as animate(), along with a function to update the animation, traditionally called update():

function animate() {
 // Update the animation...
 // for example, move an element, change a style, and more.
 update();
 // Request the next frame
 requestAnimationFrame(animate);
}

The update() function is where the magic happens. Inside it, you get to change whatever you want to animate. For example, updating a style or changing the position of an element:

function update() {
 element.style.transform = `translateX(${position}px)`;
 position += 2;
}

What finally kicks off the animation is calling requestAnimationFrame() and passing in the animate function, this time outside the animate function: requestAnimationFrame(animate);

What Is the Web Animations API, and How Does It Relate to CSS Animation Properties?

When to use: When you need animations to respond to user interactions like clicks, scrolls, or allow dynamic control such as pausing or reversing.

The Web Animations API (WAAPI) allows you to create and control animations directly within JavaScript.

At the core of WAAPI is the Animation constructor, which provides several instance methods and properties that allow you to dynamically animate elements. A significant method in the Animation constructor is animate(). It allows you to create an animation by specifying keyframes and options like duration, direction, easing, and iterations.

const square = document.querySelector("#square");

const animation = square.animate(
  [{ transform: "translateX(0px)" }, { transform: "translateX(100px)" }],
  {
    duration: 2000, // makes animation lasts 2 seconds
    iterations: Infinity, // loops indefinitely
    direction: "alternate", // moves back and forth
    easing: "ease-in-out" // smooth easing
  }
);

const square = document.querySelector("#square");
const playBtn = document.querySelector("#playBtn");
const pauseBtn = document.querySelector("#pauseBtn");

const animation = square.animate(
  [{ transform: "translateX(0px)" }, { transform: "translateX(200px)" }],
  {
    duration: 5000, // Animation lasts 5 seconds
    // iterations: Infinity, // Loops indefinitely
    direction: "alternate", // Moves back and forth
    easing: "ease-in-out" // Smooth easing function
  }
);

// Set the onfinish property to log a message when the animation ends
animation.onfinish = () => {
  console.log("Animation finished!");
};

// Play the animation when the "Play" button is clicked
playBtn.addEventListener("click", () => {
  animation.play();
  console.log("You start the animation");
});

// Pause the animation when the "Pause" button is clicked
pauseBtn.addEventListener("click", () => {
  animation.pause();
  console.log("You pause the animation");
});

What Is the Canvas API, and How Does It Work?

The Canvas API is a powerful tool that lets you manipulate graphics right inside your JavaScript file. Everything begins with a canvas element in HTML. This element serves as a drawing surface that you can manipulate using the instance methods and properties of the Canvas API.

First, you need to create a canvas element in your HTML file:

The canvas element is represented by the HTMLCanvasElement interface, which provides methods and properties for manipulating it. Additionally, you can use methods and properties from other interfaces in the Canvas API.

You can give your canvas a width and height inside the HTML:

Or you can use the width and height properties of the HTMLCanvasElement interface:

const canvas = document.getElementById("my-canvas");
canvas.width = 400;
canvas.height = 400;

For now, you can’t see anything on the screen yet. After creating your canvas element, the next thing to do is to get access to the drawing context of the canvas with the getContext() method of the HTMLCanvasElement interface.

The most common context is 2d, which allows you to draw in two dimensions:

const canvas = document.getElementById("my-canvas");
const ctx = canvas.getContext('2d');

If you log the ctx variable to the console, you’ll see the methods and properties of CanvasRenderingContext2D that you can use to create shapes, colors, lines, and more, along with their default values:

The Canvas API provides several methods and properties for drawing shapes, lines, and text. One of those is the fillStyle property, which you can combine with the fillRect() method to draw a rectangle or square: