<html>
<head>
<style>
body {
text-align: center;
font-size : 18px;
margin: 0 auto;
height: 400px;
background-color: #f9fafe;
}
button {
width: 200px;
height: 30px;
font-size : 20px;
border-radius: 5px;
margin:0 auto;
display:block;
color: white;
outline: none;
}
.disabled {
background-color: #d2d3da;
}
.enabled {
background-color: #6d3acf;
}
#inputDiv {
padding: 11px;
border-radius: 10px;
margin: auto;
width: auto;
text-align: left;
display: table;
background-color: white;
}
.disabledDiv {
border: 1px solid #d2d3da;
}
.enabledDiv {
border: 1px solid #6d3acf;
}
#outherDiv {
margin: auto;
width: auto;
padding: 0px 10px 10px 12px;
}
</style>
</head>
<body>
<h2>Rent-a-Ride</h2>
<div id="outherDiv">
<div id="inputDiv" class="disabledDiv">
<input type="checkbox" id="ageCheckbox" name="ageCheckbox">
<label for="ageCheckbox"> I'm over 16 years old</label><br>
<input type="checkbox" id="permitCheckbox" name="permitCheckbox">
<label for="permitCheckbox"> I have a permit</label><br>
<input type="checkbox" id="insuredCheckbox" name="insuredCheckbox">
<label for="insuredCheckbox"> I'm insured</label><br>
</div>
</div>
<button id="rentBtn" class="disabled">Rent</button>
<script>
let btn = document.getElementById("rentBtn");
let inputDiv = document.getElementById("inputDiv");
rentBtn.className = "disabled";
inputDiv.className = "disabledDiv";
let ageCheck = document.getElementById("ageCheckbox");
ageCheck.addEventListener('click', enableIfChecked());
let permitCheck = document.getElementById("permitCheckbox");
permitCheck.addEventListener('click', enableIfChecked());
let insuredCheck = document.getElementById("insuredCheckbox");
insuredCheck.addEventListener('click', function() {
enableIfChecked();
});
function enableIfChecked() {
if (ageCheck.checked && permitCheck.checked && insuredCheck.checked) {
rentBtn.className = "enabled";
inputDiv.className = "enabledDiv";
}
}
</script>
</body>
</html>]]>