Hey friends today, let's see how to make this super simple HTML color picker with basic JavaScript.
Now let's see about this project. When the page is loaded, a box with a button appears. When clicked, it opens a basic color picker and when a color is selected, the hex code appears on the box and a preview appears too.
Do watch my video tutorial below for better understandings:
Now, let's see the source codes!
Paste the codes below in your HTML file:
<!-- Created by CodingPorium,2021. Visit https://youtube.com/c/CodingPorium for more tutorials with free source code -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Simple Color Picker using JavaScript | CodingPorium</title>
</head>
<style>
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@200;300;400;500;600;700&display=swap');
body{
background:linear-gradient(90deg, hsla(197,100%,63%,1)0%, hsla(294,100%,55%,1)100%);
height:100vh;
display:flex;
justify-content: center;
align-items: center;
font-family: poppins;
}
.container{
background: rgba(255,255,255,0.25);
box-shadow: 0 8px 32px 0 rgba(31,38,135,0.37);
backdrop-filter: blur(4px);
-webkit-backdrop-filter: blur(4px);
border-radius: 10px;
border:1px solid rgba(255,255,255,0.18);
padding:32px;
}
input[type="color"]{
background-color: white;
border:none;
border-radius: 5px;
padding:10px;
transition: 0.3s;
}
input[type="color"]:hover{
background-color: mediumseagreen;
}
input[type="text"]{
border:none;
font-family: poppins;
padding:10px;
border-radius: 5px;
outline:none;
}
</style>
<body>
<div class="container">
<div style="text-align: center;">
<input type="text" id="hex">
<input type="color" id="color">
<h1 contenteditable="true">Here's your output!</h1>
</div>
</div>
<script>
let colorInput = document.querySelector("#color");
let hexInput = document.querySelector("#hex");
colorInput.addEventListener('input',()=>{
let color = colorInput.value;
hexInput.value = color;
document.querySelector('h1').style.color = color;
});
</script>
</body>
</html>
And that's all for this tutorial. Thanks for reading and do subscribe to our YouTube channel to support us. Till the next one, goodbye!
Post a Comment