Vanilla Javascript random Code Generator | Simple Project | frontend everything
 |
| preview of project |
Hello Everyone 👋Welcome to My New Blog. Today I have made an Easy random color generator with the help of HTML , CSS, and Vanilla Javascript | We have used no framework in this 😎
I am Piyush, Sharing About Web development Daily. You can also check out me at @frontendeverything.
Let's start making the Random Color generator step by step
Video Preview of the project,
So that was the preview now let us start making the project 😄 First, we will code HTML then css and javascript and also i have shared codepen ink to make it easier for you.
HTML 🎈( step - 1)
<div id="container">
<div id="button" onclick="generate();">
<span style="
user-select: none; "> GENERATE RANDOM COLOR </span>
</div>
<div id="output"></div>
</div>
Yes, this was only HTML coding we have to do. Now lets move to CSS coding.
CSS 🎈( step - 2)
* {
box-sizing: border-box;
color: #454845;
font-weight: 700;
font-family: 'Montserrat', 'Helvetica', sans-serif;
font-size: 1.4rem;
padding: 0;
margin: 0;
}
#container {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
height: 100vh;
width: 100%;
}
#button {
background-color: rgba(220,220,235,0.5);
cursor: pointer;
border-radius: 7px;
transition: all ease 0.3s;
}
#button:hover {
background-color: rgba(220,220,235,0.7);
transition: all ease 0.3s;
}
#output,
#button {
padding: 1rem;
}
CSS coding is also done. Now let us move to JAVASCRIPT 😎
javascript 🎈( step - 3)
function generate() {
var hexValues = ["0","1","2","3","4","5","6","7","8","9","a","b","c","d","e"];
var newColor = "#";
for ( var i = 0; i < 6; i++ ) {
var x = Math.round( Math.random() * 14 );
var y = hexValues[x];
newColor += y;
}
document.getElementById("container").style.backgroundColor = newColor;
document.getElementById("output").innerHTML = newColor;
}
generate();
All the coding part is done, now let us see the final output, and also below I have mentioned the codepen link.
Final Output
The codepen link is here for making your work easier!
.
.
.
.
.
.
Thank You For Scrolling Till here 😊. If You gain any knowledge then do checkout me at @frontendeverything. I am Piyush 🎉 I provide Content related to programming, technology, web development Daily.
.