In this video we will build gradient background generator using vanilla JavaScript.
Subscribe : https://www.youtube.com/channel/UC9vqZpApNd4M0Pl5yR4banw
Source Code :
HTML :
<html>
<head>
<title>Gradient Generator</title>
<link rel="stylesheet" href="main.css">
</head>
<body>
<div class="options">
<p class="code">Code goes here</p>
<button class="btn">Generate</button>
</div>
<script src="main.js"></script>
</body>
</html>
CSS :
{
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: righteous;
}
body {
width: 100%;
height: 100%;
display: flex;
flex-direction: column;
justify-content: flex-end;
align-items: center;
}
.options {
width: 80%;
height: auto;
display: flex;
justify-content: space-between;
align-items: center;
padding: 25px 0;
}
.options .code {
padding: 10px 25px;
width: 70%;
border:3px solid #000;
background-color: #fff;
color: #000;
border-radius: 50px;
}
.options .btn {
padding: 12px 25px;
border:3px solid #000;
background-color: #fff;
color: #000;
transition: 0.3s;
outline: none;
border-radius: 50px;
}
.options .btn:hover {
border:3px solid #fff;
background-color: #000;
color: #fff;
cursor: pointer;
}
JavaScript :
var code = document.querySelector('.code');
var btn = document.querySelector('.btn');
btn.addEventListener("click", colorGenerator);
function colorGenerator() {
var letters = '0123456789abcdef';
var hash1= '#';
var hash2= '#';
for(let i=0;i<6;i++) {
hash1 += letters[Math.floor(Math.random() *16)];
hash2 += letters[Math.floor(Math.random() *16)];
}
code.innerHTML = `background : linear-gradient(to right,${hash1},${hash2})`;
document.documentElement.style.background = `linear-gradient(to right,${hash1},${hash2})`;
}
window.onload = colorGenerator();
#js #javascript