Corporate Training

Image Editor: HTML, CSS, and JavaScript Tutorial for Web Browsers

Published on Mar 1, 2024

Hello everyone and welcome to LSET Tech Bites. In this video, we’ll create an Image Editor app using HTML, CSS, and JavaScript. Let’s go through the HTML code we have for our image editor.

We have an HTML document structure starting with the <!DOCTYPE html> declaration and the opening <html> tag with the lang attribute set to “en”. Inside the <head> section, we have meta tags for the viewport and the title of our app. We also link an external stylesheet called “styles.css”. Within the <body> element, we create a wrapper <div> to hold our image editor interface.

Inside the wrapper <div>, we have two main sections: “result” and “editor”. The “result” section contains an empty image container, an upload button linked to a file input, and another empty <div>. The “editor” section holds different filters and flip options for editing the image.

The filter section consists of sliders labelled blur, contrast, hue-rotate, and sepia, each with specific ranges and default values. The flip-buttons section contains radio buttons for “No Flip”, “Flip Horizontal”, and “Flip Vertical”.

At the end of the HTML code, we link our JavaScript file called “script.js” to provide interactivity and functionality to our image editor.

Now We’ll dive into the CSS code for our Image Editor app. Let’s break down the CSS styles we have for our app.

We start off with a universal selector (*) that removes default margin and padding from all elements and sets the font family to a serif font stack including Georgia and Times New Roman. The background colour for the entire body is set to a fresh green shade (#bfea7c).

Then, inside the .wrapper class, we define the overall layout of our app. It’s 80% wide, horizontally centred with auto margins, has some padding, rounded corners, and a subtle box shadow. The background colour for the wrapper is a light gray (#c0c0c0).

Moving on to the .image-container, we have styles for the container itself, the image within it, and the box containing the file upload button. The image container takes up 92% width, with a fixed height of 250 pixels. The image inside fills its container using object-fit: contain to maintain aspect ratio without distortion.

The box for the file upload button is styled to be displayed inline-block, with padding, a distinctive background colour, and a subtle transition effect for a smooth colour change on hover.

The rest of the styles include the slider for filters, flip button styles, and set the cursor to a pointer for better usability.

With these styles in place, our Image Editor app will have an appealing and user-friendly interface. In the next, we’ll add interactivity and functionality using JavaScript to make the app fully functional for editing images.

We start by setting up variables to store references to various elements in the DOM using document.getElementById.

Next, a function named resetFilter is defined. This function resets the filter values, sets the flip buttons to their default state, applies the filters to the image, and flips the image based on the default settings.

Then, we assign an event listener to the onchange event of the uploadButton. When an image is selected for upload, it triggers the resetFilter function, makes the image container visible, reads the selected image using FileReader, and sets the image source once the image is loaded.

The next block of code selects all input range elements within the .filter class and assigns an event listener to each of them. When the sliders are adjusted, the addFilter function is called.

The addFilter function updates the visual filters applied to the image based on the value of each slider.

Lastly, we select all radio buttons within the .flip-option class, and for each of them, attach an event listener. When a radio button is clicked, the flipImage function is called, which flips the image horizontally or vertically based on the selected radio button.

With this JavaScript code, we’ve added functionality to the Image Editor app, allowing users to upload, edit, and flip images using interactive sliders and buttons.

That’s all for this video. In the next video, we’ll discuss something exciting. Until then, don’t forget to subscribe to our channel for more tech insights.

Our Latest Blog

What Are the Best Interview Training Programs for Developers, Testers, and Managers
January 24, 2025By

What Are the Best Interview Training Programs for Developers, Testers, and Managers?

Preparing for an interview can be daunting, especially when you’re competing against top talent for...
Read More
Dream IT, Do IT Succeed in Automation Testing and Shape Your Future
January 17, 2025By

Dream IT, Do IT: Succeed in Automation Testing and Shape Your Future!

In a world where technology is advancing rapidly, staying ahead is crucial. If you’re looking...
Read More
Your Shortcut to IT Success Become an Automation Testing Expert!
January 15, 2025By

Your Shortcut to IT Success: Become an Automation Testing Expert!

The IT industry is one of the fastest-evolving sectors in the world, continuously shaped by...
Read More

Follow Us