Working with the DOM, Click Events, and Web APIs

Source: Dev.to

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 – used to manipulate HTML elements, their styles, and attributes. 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, call it and pass a callback function:

requestAnimationFrame(callback);

A typical animation loop consists of an animate() function that updates the animation and then requests the next frame:

function animate() {
  // Update the animation (e.g., move an element, change a style, etc.)
  update();

  // Request the next frame
  requestAnimationFrame(animate);
}

The update() function contains the actual changes you want to animate:

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

Kick off the animation by calling requestAnimationFrame() with the animate function outside of animate:

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 (clicks, scrolls) or require dynamic control such as pausing or reversing.

The Web Animations API (WAAPI) lets you create and control animations directly in JavaScript. The core is the Animation constructor, whose animate() method creates an animation from keyframes and options.

Basic Example

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

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

Controlling Playback with Buttons

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,
    // iterations: Infinity,
    direction: "alternate",
    easing: "ease-in-out"
  }
);

// Log when the animation finishes
animation.onfinish = () => {
  console.log("Animation finished!");
};

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

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

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

The Canvas API lets you draw graphics directly via JavaScript. It starts with a <canvas> element in HTML, which serves as a drawing surface.

Adding a Canvas Element

You can set its size in HTML or via JavaScript. Here’s how to set the size with JavaScript:

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

Getting the Drawing Context

const canvas = document.getElementById("my-canvas");
const ctx = canvas.getContext("2d"); // 2‑D rendering context

Drawing a Filled Rectangle

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

// Set the fill color
ctx.fillStyle = "crimson";

// Draw a rectangle (x, y, width, height)
ctx.fillRect(1, 1, 150, 100);

Drawing Text

const textCanvas = document.getElementById("my-text-canvas");
const textCtx = textCanvas.getContext("2d");

// Font settings
textCtx.font = "30px Arial";
textCtx.fillStyle = "crimson";

// Draw the text
textCtx.fillText("Hello HTML Canvas!", 1, 50);

The result is red text reading Hello HTML Canvas! on the page.

The Canvas API can be combined with requestAnimationFrame() to create custom animations, visualizations, games, and more.

How Do You Open and Close Dialog Elements Using JavaScript?

Dialogs let you display important information or a … (content truncated)