Amazing Mini Image Editor with Vanilla JavaScript

Welcome to Day 3 of the JavaScript30 challenge, and today we’re going to build this amazing Mini Image Editor with pure HTML, CSS, and JavaScript.

If you want to know more about JavaScript30, watch the video below and go here

Those of you who want to know how will our finished project look like, click here

Starter Files

Before moving forward, copy the initial HTML, and CSS files from the snippets below and set up your local environment to get started

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Scoped CSS Variables and JS</title>
  <link rel="stylesheet" href="style.css">
</head>

<body>
  <h2>Update CSS Variables with <span class='hl'>JS</span></h2>

  <div class="controls">
    <label for="spacing">Spacing:</label>
    <input id="spacing" type="range" name="spacing" min="10" max="200" value="10" data-sizing="px">

    <label for="blur">Blur:</label>
    <input id="blur" type="range" name="blur" min="0" max="25" value="10" data-sizing="px">

    <label for="base">Base Color</label>
    <input id="base" type="color" name="base" value="#ffc600">
  </div>

  <img src="https://source.unsplash.com/7bwQXzbF6KE/800x500">
  <script src="script.js"></script>
</body>
</html>

:root {
    --base: #ffc600;
    --spacing: 10px;
    --blur: 10px;
}

img {
    padding: var(--spacing);
    background-color: var(--base);
    filter: blur(var(--blur));
}

.hl {
    color: var(--base);
}

/*
    misc styles, nothing to do with CSS variables
*/

body {
    text-align: center;
    background: #193549;
    color: white;
    font-family: 'helvetica neue', sans-serif;
    font-weight: 100;
    font-size: 50px;
}

.controls {
  margin-bottom: 50px;
}

input {
  width: 100px;
}

Once you’re done with setting up the code locally, your HTML file will look like this 👇

Screenshot of our Mini Editor

The project is fine, but the spacing, blur, and color will not work, as we have to do that with JavaScript, but before going towards JavaScript, let’s first learn about CSS Variables.

CSS Variables

The main purpose of this project is to teach us CSS variables,

So let’s learn what CSS variable is how are we going to use it on our project, we’ll take the example which we have used in the code above –

:root {
    --base: #ffc600;
    --spacing: 10px;
    --blur: 10px;
}

img {
    padding: var(--spacing);
    background-color: var(--base);
    filter: blur(var(--blur));
}

.hl {
    color: var(--base);
}

Explanation

CSS Variables can have a global or local scope, global variables can be used throughout the document while local variable can be used

To declare a global variable, you have to use :root{} selector, and then you can declare a custom property with — in the beginning with any valid CSS value

Now, you can use this variable with any property with the help of var() function, e.g. In the above code we have declared a –spacing variable and reused it with padding property of img using var(–spacing)

JavaScript Logic

To make our inputs function, we’ll first store our inputs in a variable.

Create a function to handle the update of inputs.

Add a event listener to call this function.

const inputs = document.querySelectorAll('.controls input')

function handleUpdate() {
    const suffix = this.dataset.sizing || '' //blank value is for color as they don't hold px value
    document.documentElement.style.setProperty(`--${this.name}`, this.value + suffix) 
}

inputs.forEach(input => input.addEventListener('change', handleUpdate)) 
inputs.forEach(input => input.addEventListener('mousemove', handleUpdate))

Explanation

We wrote a function called handleUpdate() to make the inputs function

Suffix variable stores the string ‘px’ or a blank string for colors to be suffixed with the value of inputs

document.getElement is used to get access to the element of the HTML document, we used the same to change the value of spacing, blur and color on the element so that it automatically affects the whole document.

In the end, we added ‘change’ event listener for the color and ‘mousemove’ for spacing and blur to work dynamically.

Conclusion

Congratulations, you’ve made it this far and your Editor should be working fine now.

If not or you have any question or confusion regarding this project, shoot a comment below.

I’ll see you in the next post, till then,

Happy Coding