<!DOCTYPE html>
<html>
<head>
<title>js age checker</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style type="text/css">
* {
margin:0;
padding:0;
}
.btn {
background:#000;
color:#fff;
border:none;
padding:0.5em 1em;
}
header {
background:skyblue;
text-align:center;
}
h3 {
font-size:2em;
text-transform:capitalize;
}
.btn:hover {
background:#222;
}
.btn:focus {
outline:none;
}
.number {
padding:0.25em 0.5em;
}
input {
margin:1em;
}
@media (max-width:500px){
h3 {
font-size:1em;
}
input {
margin:0;
margin-top:1em;
}
}
</style>
</head>
<body>
<header>
<h3>it is used to check if a person is eligble to vote or not</h3>
<p>trying out some js</p>
</header>
<p class="lead"></p>
<input type="text" class="number">
<input type="button" name="btn" class="btn" value="check">
<script type="text/javascript">
let btn = document.querySelector(".btn");
btn.onclick = () => {
let num = document.querySelector(".number").value;
const lead = document.querySelector(".lead");
if (num >= 18) {
console.log("success");
}else if (num <= 17 && num >=1){
console.log("you are still young");
}else{
lead.innerText = "wrong input";
lead.style.color = "red";
}
}
</script>
</body>
</html>
External CSS
This Pen doesn't use any external CSS resources.
External JavaScript
This Pen doesn't use any external JavaScript resources.