Welcome to today’s tutorial. Today we will create a random gradient generator. I have created a gradient generator wherein you select the colours and angle, and the generator creates the gradient for you. If you are interested in that tutorial, you can check it out here.
The random gradient generator outputs a gradient randomly along with the CSS code. It consists of two buttons – Generate and Copy. If you are a beginner looking for a project to level up your javascript skills then this project is perfect for you. Even javascript intermediates can try this project. For this project, we use HTML, CSS and vanilla Javascript. Let us get started with the tutorial.
Video Tutorial:
In case you would like to check out the step by step video tutorial:
HTML:
We begin by creating an HTML file and save it as “index.html”. You have to copy the code below and paste it into your HTML file.
<!DOCTYPE html>
<html lang="en">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Random Gradient Generator</title>
<!-- Google Font -->
<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;500&display=swap" rel="stylesheet">
<!-- Stylesheet -->
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="wrapper">
<div id="output-color"></div>
<input type="text" id="output-code" readonly>
<div class="btn-container">
<button id="generate-btn">Generate</button>
<button id="copy-btn">Copy</button>
</div>
</div>
<!-- Script -->
<script src="script.js"></script>
</body>
</html>
CSS:
To make the generator look good, we need to add some styles to the elements. For this purpose, we need CSS. You have to create a file named “style.css”. Copy the code below and paste it into your stylesheet.
*{
padding: 0;
margin: 0;
box-sizing: border-box;
border: none;
outline: none;
font-family: "Poppins",sans-serif;
}
body{
height: 100vh;
background: linear-gradient(
#f7f9fd 50%,
#587ef4 50%
);
}
.wrapper{
width: 80vmin;
background-color: #ffffff;
padding: 50px 30px;
border-radius: 8px;
position: absolute;
transform: translate(-50%,-50%);
left: 50%;
top: 50%;
box-shadow: 0 20px 25px rgba(60,60,100,0.15);
}
#output-color{
width: 100%;
height: 35vmin;
border-radius: 5px;
}
#output-code{
background-color: #f1f5fc;
font-size: 2.3vmin;
font-weight: 400;
color: #3f415f;
width: 100%;
padding: 15px 10px;
border-radius: 5px;
margin: 20px 0 40px 0;
}
.btn-container{
display: flex;
justify-content: space-around;
}
.btn-container button{
background-color: #587ef4;
min-width: 40%;
padding: 15px 0;
color: #ffffff;
border-radius: 30px;
font-size: 2.6vmin;
font-weight: 500;
cursor: pointer;
}
Javascript:
Now that the generator looks good, let us add functionality to the Generate button and Copy button. You need to create a javascript file – “script.js”. Now all you have to do is copy and paste the code below in your newly create JS file.
We have used two functions of the Math object here.
- Math.floor() – Rounds of the number passed to the largest integer which is equal to or less than the number.
- Math.random() – Generates random numbers in the desired range.
let generateBtn = document.getElementById("generate-btn");
let copyBtn = document.getElementById("copy-btn");
let outputColor = document.getElementById("output-color");
let outputCode = document.getElementById("output-code");
let hexString = "0123456789abcdef";
let randomColor = () => {
let hexCode = "#";
for( i=0; i<6; i++){
hexCode += hexString[Math.floor(Math.random() * hexString.length)];
}
return hexCode;
}
let generateGrad = () => {
let colorOne = randomColor();
let colorTwo = randomColor();
let angle = Math.floor(Math.random() * 360);
outputColor.style.background = `linear-gradient(${angle}deg, ${colorOne}, ${colorTwo})`;
outputCode.value = `background: linear-gradient(${angle}deg, ${colorOne}, ${colorTwo});`;
}
copyBtn.addEventListener("click", () => {
outputCode.select();
document.execCommand("copy");
alert("Code Copied To Clipboard");
});
generateBtn.addEventListener("click", generateGrad);
window.onload = generateGrad;
Your random gradient generator is now ready. Wasn’t that easy? You can go ahead and try adding some more features to your gradient generator to make it even better.
That’s it for this tutorial. If you have any doubts, suggestion or feedback comment it below. I would love to hear from you. For more such tutorials, do subscribe to my Youtube Channel.
Informative for myself
Thanks for us
yes it is informative
ThankYou once again