This content originally appeared on DEV Community and was authored by Ashutosh Mishra
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
This content originally appeared on DEV Community and was authored by Ashutosh Mishra
Ashutosh Mishra | Sciencx (2021-07-22T20:24:15+00:00) Amazing Mini Image Editor with Vanilla JavaScript – Day 3 of JavaScript30. Retrieved from https://www.scien.cx/2021/07/22/amazing-mini-image-editor-with-vanilla-javascript-day-3-of-javascript30/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.