Home/ Questions/Q 5094

Querify Question Shop: Explore Expert Solutions and Unique Q&A Merchandise Latest Questions

Author
  • 61k
Asked: 2024-11-27T06:04:08+00:00

Amazing Mini Image Editor with Vanilla JavaScript

  • 61k

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

beginnerscodenewbiejavascriptwebdev
Share

Leave an answer

You must login to add an answer.

Need An Account,