I have written the code for neumorphism power button and it is working perfectly fine but I’m not able to figure out how to display the status in the console using javascript, i.e., if the power button is on or off.
HTML code:
<head> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"> </head> <body> <input type="checkbox"> </body>
CSS Code:
body{
background-color: black;
padding: 0;
margin:0;
}
input[type="checkbox"]{
height: 150px;
width: 150px;
-webkit-appearance: none;
box-shadow: -10px -10px 15px rgba(0, 0, 0, 0.5),
10px 10px 15px rgba(0, 0, 0, 0.5);;
position: absolute;
transform: translate(-70%,-70%);
top: 20%;
left: 80%;
border-radius: 50%;
border: 8px solid black;
outline: none ;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
}
input[type="checkbox"]::after{
font-family:FontAwesome;
content:'f011';
color: grey;
font-size: 70px;
}
input[type="checkbox"]:checked{
box-shadow: -10px -10px 15px rgba(0, 0, 0, 0.5),
10px 10px 15px rgba(0, 0, 0, 0.5),
inset -10px -10px 15px rgba(0, 0, 0, 0.5),
inset 10px 10px 15px rgba(0, 0, 0, 0.5) ;
}
input[type="checkbox"]:checked::after{
color: green;
}
Advertisement
Answer
Add a change event listener to the power button, then check whether it is checked with the checked property:
document.querySelector('input').addEventListener('change', function() {
console.log(`Power button is${this.checked ? "" : " not"} checked`);
})body {
background-color: black;
padding: 0;
margin: 0;
}
input[type="checkbox"] {
height: 150px;
width: 150px;
-webkit-appearance: none;
box-shadow: -10px -10px 15px rgba(0, 0, 0, 0.5), 10px 10px 15px rgba(0, 0, 0, 0.5);
;
position: absolute;
transform: translate(-70%, -70%);
top: 20%;
left: 80%;
border-radius: 50%;
border: 8px solid black;
outline: none;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
}
input[type="checkbox"]::after {
font-family: FontAwesome;
content: 'f011';
color: grey;
font-size: 70px;
}
input[type="checkbox"]:checked {
box-shadow: -10px -10px 15px rgba(0, 0, 0, 0.5), 10px 10px 15px rgba(0, 0, 0, 0.5), inset -10px -10px 15px rgba(0, 0, 0, 0.5), inset 10px 10px 15px rgba(0, 0, 0, 0.5);
}
input[type="checkbox"]:checked::after {
color: green;
}<head> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"> </head> <body> <input type="checkbox"> </body>