Home >Web Front-end >JS Tutorial >Building a Measuring Tool with the Resize Observer API
Web APIs - a very interesting and rarely well explored territory. And yet, there's a large number of unique and very useful APIs that can help you to create tools for your projects.
For example, tracking size changes is key to creating dynamic, responsive experiences. This is where the Resize Observer API comes in.
In this article, we’ll build a measuring tool that displays the width and height of a resizable box in real-time. This is a project that demonstrates the power of the Resize Observer API and Browser APIs in general in a practical and interactive way.
The Resize Observer API is a browser feature that allows you to detect changes to the size of an element. Resize Observer works on individual elements. It works out-of-the-box, and can be a great addition to your toolset for building responsive design and dynamic UIs.
Here’s what makes it great:
We’ll create a resizable box with dimensions displayed inside of it. As the user resizes the box, the displayed dimensions will update in real time.
First, let’s set up the basic structure for our project:
resize-tool/ ├── index.html ├── styles.css ├── script.js
Here’s a simple layout for our app. The resizable box includes a text span to display its dimensions:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Measuring Tool with Resize Observer API</title> <link rel="stylesheet" href="styles.css"> </head> <body> <div> <h2> Step 3: Styling the App </h2> <p>We’ll add some styles to make the resizable box more visually appealing:<br> </p> <pre class="brush:php;toolbar:false">body { font-family: Arial, sans-serif; margin: 0; padding: 0; display: flex; justify-content: center; align-items: center; height: 100vh; background: #f0f0f0; } .container { position: relative; width: 80%; height: 80%; } .resizable { position: absolute; width: 300px; height: 200px; border: 2px dashed #007bff; background: rgba(0, 123, 255, 0.1); display: flex; justify-content: center; align-items: center; resize: both; overflow: auto; } .resizable span { background: white; padding: 5px; border-radius: 4px; font-size: 20px; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); }
Now let’s bring the project to life using the Resize Observer API:
resize-tool/ ├── index.html ├── styles.css ├── script.js
In this tutorial, we built a fun and interactive measuring tool using the Resize Observer API. This project demonstrates how browser APIs can simplify complex tasks.
If you try this out or extend it further, feel free to share your creations in the comments!
Also, check out the CKEditor blog for articles around rich-text editors, and start your journey with CKEditor 5 by signing up for a free trial today!
The above is the detailed content of Building a Measuring Tool with the Resize Observer API. For more information, please follow other related articles on the PHP Chinese website!