DEV Community

loading...
Cover image for Amazing Mini Image Editor with Vanilla JavaScript

Amazing Mini Image Editor with Vanilla JavaScript

Ashutosh Mishra
Front-End Developer && Blogger Fellow at HackerNoon
Originally published at clearprogrammer.com Updated on ・3 min read

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>
Enter fullscreen mode Exit fullscreen mode
: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;
}
Enter fullscreen mode Exit fullscreen mode

Once you’re done with setting up the code locally, your HTML file will look like this 👇
Screenshot of our Mini Editor
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);
}
Enter fullscreen mode Exit fullscreen mode

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)) 
Enter fullscreen mode Exit fullscreen mode

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

Discussion (4)

Collapse
rikschennink profile image
Rik Schennink

While I applaud the techniques used (it's useful to know how to link JS and CSS) I do wonder how many devs have following this guide in an effort to create an image editor only to find they're editing CSS properties and the image cannot be saved to disk.

Collapse
ashutoshmishra4 profile image
Ashutosh Mishra Author

My bad, I'll explain the concepts deeply in subsequent posts

Collapse
chetan_atrawalkar profile image
Chetan Atrawalkar👉CA.

Nice series bhai❤️🤗

Collapse
ashutoshmishra4 profile image
Ashutosh Mishra Author

Thanks Chetan :)