Embedded Files
Title : JavaScript Project For Beginners | Color Palette Generator | Link is in Description
HTML :
<html>
<head>
<title>Color Palette Generator</title>
<link rel="stylesheet" href="main.css">
</head>
<body>
<div class="contentBox">
<div class="colorBox">
<div class="color"></div>
<p class="code">#4cae3a</p>
</div>
<div class="colorBox">
<div class="color"></div>
<p class="code">#4cae3a</p>
</div>
<div class="colorBox">
<div class="color"></div>
<p class="code">#4cae3a</p>
</div>
<div class="colorBox">
<div class="color"></div>
<p class="code">#4cae3a</p>
</div>
<div class="colorBox">
<div class="color"></div>
<p class="code">#4cae3a</p>
</div>
<div class="colorBox">
<div class="color"></div>
<p class="code">#4cae3a</p>
</div>
</div>
<div class="actions">
<p>Press Space to Generate or Click on Generate Button</p>
<button>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: 100vh;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
}
.contentBox {
width: 100%;
height: 70vh;
display: flex;
justify-content: space-evenly;
align-items: center;
}
.contentBox .colorBox {
width:15%;
height: 80%;
box-shadow: 0 10px 25px -10px rgba(0, 0, 0, 0.3);
display: flex;
flex-direction: column;
justify-content: space-between;
align-items: center;
}
.contentBox .colorBox .color{
width:100%;
height: 80%;
background-color: aqua;
border-radius: 10px 10px 0 0;
}
.contentBox .colorBox .code{
width:100%;
text-align: center;
margin-bottom: 30px;
}
.actions {
width: 100%;
height: 20%;
display: flex;
justify-content: center;
align-items: center;
}
.actions p{
box-shadow: 0 10 25px -10px rgba(0, 0, 0, 0.3);
padding: 12px 60px;
background-color: #212121;
border-radius: 10px;
font-size: 1.2rem;
color: #fff;
margin: 0 25px;
}
.actions button{
box-shadow: 0 10 25px -10px rgba(0, 0, 0, 0.3);
padding: 12px 60px;
background-color: #212121;
border-radius: 10px;
font-size: 1.2rem;
color: #fff;
margin: 0 25px;
border:none;
outline: none;
transition: 0.3s;
}
.actions button:hover {
background-color: skyblue;
color:#212121;
cursor: pointer;
}
JavaScript :
var code = document.querySelectorAll('.code');
var color = document.querySelectorAll('.color');
var button = document.querySelector('button');
button.addEventListener("click",colorGen);
function colorGen() {
var letters = '0123456789abcdef';
var hastag = ['#','#','#','#','#','#'];
for (let i=0;i<6;i++){
hastag[i]+=letters[Math.floor(Math.random() *16)];
hastag[i]+=letters[Math.floor(Math.random() *16)];
hastag[i]+=letters[Math.floor(Math.random() *16)];
hastag[i]+=letters[Math.floor(Math.random() *16)];
hastag[i]+=letters[Math.floor(Math.random() *16)];
hastag[i]+=letters[Math.floor(Math.random() *16)];
}
for (let i=0;i<code.length;i++){
code[i].innerHTML = hastag[i];
color[i].style.backgroundColor = hastag[i];
}
}
colorGen();
window.onkeyup = (e)=> {
if (e.which||e.keycode == 33) {
colorGen();
}
};
Page updated
Google Sites
Report abuse