Hello guys in this tutorial we will change dress color using HTML CSS and JavaScript
First we need to create two files index.html and style.css then we need to do code for it.
Step:1
Add below code inside index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>How to Change Dress Color Using javaScript</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta https-equiv="X-UA-Compatible" content="ie=edge" />
<link rel="stylesheet" href="style.css" />
</head>
<body>
<img src="bg.jpg">
<div id="bg"></div>
<div class="fixed-row">
<button class="colorBtn" onClick="generatCode()">Generate</button>
</div>
<script type="text/javascript">
let bg = document.getElementById("bg");
function generatCode() {
let randomColor = "";
let char = "0123456789abcdefghijklmnopqrstuvwxyz";
for(i = 0; i < 6; i++) {
randomColor = randomColor + char[Math.floor(Math.random() * 16)];
}
bg.style.backgroundColor = "#" + randomColor;
}
</script>
</body>
</html>
Step:2
Then we need to add code for style.css which code i provide in below screen.
* {
padding: 0;
margin: 0;
}
body {
overflow: hidden;
}
button.colorBtn {
background-color: #0f62fe;
border: 1px solid transparent;
color: #fff;
cursor: pointer;
display: block;
transition: background-color 0.5s;
font-size: 18px;
width: 100%;
text-align: center;
outline: none;
}
.fixed-row {
position: fixed;
bottom: 0;
width: 100%;
}
img {
display: block;
width: 100%;
}
#bg {
position: absolute;
top: 0;
width: 100%;
height: 100vh;
mix-blend-mode: hue;
}