Color Picker

<!DOCTYPE html>
<html>
<body>

	<h1>Select your favorite color</h1> <input type="color" id="myColor">

		<button onclick="myFunction()">Try it</button>

	<p id="demo"></p>

<style>

h1
{
  font-size: 50px;
  text-align: center;
}
input
{
  position: relative;
  left: 50%;
  top: 30%;
  transform: translate(-50%, -30%);
  align-items: center;
  width: 250px;
  height: 70px;
  border: none;
  cursor: pointer;
}
p
{
  position: absolute;
  left: 50%;
  top: 40%;
  transform: translate(-50%, -40%);
  font-weight: bold;
  font-size: 30px;
}
button
{
  position: absolute;
  left: 50%;
  top: 35%;
  transform: translate(-50%, -35%);
  width: 200px;
  height: 40px;
  font-size: 20px;
  color: #000;
  border: none;
  user-select: none;

}
button:hover
{
  background: lightblue;
}
</style>

<script>
function myFunction() {
  var x = document.getElementById("myColor").value;
  document.getElementById("demo").innerHTML = x;
}
</script>

</body>
</html>
ICT With Shantha Bandara

Color Picker

Color Picker

No comments:

Post a Comment
