Hello Future Coders, In this article we are going to build a very short JavaScript Project in which we are going to build a button which converts a color image to a black and white image.
Below I have provided both video tutorial as well as step by step source code for you to understand and build this project. At the end of this article you can also download the project’s source code.
JavaScript Color Image to Grayscale Converter | Step by Step Video Tutorial
Color Image to Grayscale Converter | JavaScript Source Code
As usual we will start by creating three files: index.html, styles.css and script.js. Don’t forget to to link styles and script file to your html file.
Step 1: Adding HTML
Add boiler plate of the html and create div container. Inside this div we are going to have an image which we are going to convert to grayscale and below that we will add a button. Upon Clicking that button, it will convert the image to grayscale.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>7 Color Image to Black and White Image Converter</title>
<link rel="stylesheet" href="styles.css" />
</head>
<body>
<div class="container">
<img id="image" src="https://i.postimg.cc/1RWVB11x/pexels-photo-941693.jpg" alt="Original Image" />
<button onclick="grayscale()">Convert</button>
</div>
<script src="script.js"></script>
</body>
</html>
Step 2: Styling the project
Before adding JavaScript, lets make our project look pretty by adding some styles to it. Refer the below styles.
body {
background-color: #ebebeb;
max-width: 900px;
margin: 0 auto;
padding: 5rem 0;
}
.container {
margin: 0 auto;
width: 35rem;
background-color: #fff;
padding: 1rem;
box-shadow: rgba(0, 0, 0, 0.08) 0px 4px 12px;
}
#image {
width: 100%;
object-fit: contain;
}
.container button {
margin-top: 1rem;
font-size: 1rem;
border: none;
padding: 0.5rem 1rem;
border-radius: 1rem;
background-color: #000;
color: #fff;
cursor: pointer;
}
Step 3: Adding JavaScript
Here comes the fun part. But for this project, we only need to add few lines of code. First we need to get the Image DOM element and store it inside the variable image. Now create a function called grayscale, inside this function we only need to alter the filter property of the image and set it to grayscale.
Inside html we have already linked the function to the button. Once the user clicks the button, it will call this function.
var image = document.querySelector("#image")
function grayscale() {
image.style.filter = "grayscale(100%)"
}
That’s it! This was a very simple JavaScript Project for beginners. Hope you guys enjoyed it. Make sure also check our other JavaScript Project Tutorials which are available in the website with source code.
