Your Web News in One Place

An Interest In:

Web News this Week

Search Archive

Some of Our Sources

View All Sources

Help Webnuz

Referal links:

Sign up for GreenGeeks web hosting
July 22, 2021 08:24 pm GMT

Amazing Mini Image Editor with Vanilla JavaScript Day 3 of JavaScript30

Welcome to Day 3 of the JavaScript30 challenge, and today were 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 youre 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, lets first learn about CSS Variables.

CSS Variables

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

So lets learn what CSS variable is how are we going to use it on our project, well 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, well 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, youve 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.

Ill see you in the next post, till then,

Happy Coding


Original Link: https://dev.to/ashutoshmishra4/amazing-mini-image-editor-with-vanilla-javascript-day-3-of-javascript30-48fh

Share this article:    Share on Facebook
View Full Article

Dev To

An online community for sharing and discovering great ideas, having debates, and making friends

More About this Source Visit Dev To