Gradient Background Generator Using JavaScript for Beginners

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