I initially had it working, but when I added the dark mode toggle, it began to read the dark mode toggle as a submit event, and would change the colour of the beer bottle and display the enter/Don’t come in message as if the user were submitting the Check if you’re allowed in button.
So I changed my event handler to only do on submit for the specific input that checks if you’re allowed, I gave it the id checkAllowed. Now when I try to hit that submit input, the whole page refreshes.
This will probably be the last code I write as I have grown to despise the field of programming within 3 short weeks. I am going to setup a meeting with my counsellor & in the meantime, I will drink heavily to resist the urge to disassemble my laptop into it’s component atoms via sheer rage.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="../style/css/ladInThePub.css" />
<script src="../script/ladInThePub.js" defer></script>
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link
href="https://fonts.googleapis.com/css2?family=Anton&family=Open+Sans:wght@300;400&display=swap"
rel="stylesheet"
/>
<title>Lad in the pub</title>
</head>
<body>
<h1>Lad in the pub</h1>
<div class="container">
<p id="subTitle">Will you have a beer tonight?</p>
<img id="beer-bottle" src="../assets/beer.svg" />
<form class="form">
<button id="darkToggle">Dark mode</button>
<label for="age">How old are you?</label>
<input
type="number"
id="age"
name="age"
min="0"
max="120"
placeholder="Enter your age"
required
/>
<label>What country are you in?</label>
<select
id="country"
name="country"
placeholder="Select a country"
required
>
<option value="Australia">Australia</option>
<option value="Poland">Poland</option>
<option value="UK">UK</option>
<option value="USA">USA</option>
</select>
<label for="drunk">How drunk are you?</label>
<input
placeholder="Enter a number between 0 and 5"
type="number"
id="drunk"
name="drunk"
min="0"
max="5"
required
/>
<input
id="allowedCheck"
type="submit"
value="Check if you're allowed in"
/>
</form>
<div id="messageTxt" class="message">
</div>
</div>
</body>
</html>
* {
font-family: "Open Sans", sans-serif;
}
body{
// Light mode background colour
background-color: white;
// Light mode text colour.
color: black;
&.body-dark-mode {
background-color: black;
color: white;
}
}
.container {
display: flex;
flex-direction: column;
align-items: center;
}
p{
font-size: 25px;
}
h1 {
font-family: "Anton", sans-serif;
font-size: 66px;
text-align: center;
margin-bottom: 0;
}
img {
height: 200px;
margin-bottom: 50px;
}
label {
font-size: 20px;
margin-bottom: 5px;
}
input,
select {
border: 2px solid black;
border-radius: 8px;
font-size: 20px;
padding: 6px;
margin-bottom: 15px;
}
#allowedCheck {
background-color: #ffbd4a;
font-size: 20px;
font-weight: bold;
padding: 15px 30px;
border: none;
border-radius: 8px;
margin-top: 20px;
}
.form {
display: flex;
flex-direction: column;
padding: 60px;
box-shadow: rgba(0, 0, 0, 0.16) 0px 1px 4px;
border-radius: 12px;
width: 400px;
&.form-dark-mode{
box-shadow: rgba(255, 255, 255) 0px 1px 4px;
}
#darkToggle{
background-color: #ffbd4a;
font-size: 20px;
font-weight: bold;
padding: 15px 30px;
border: none;
border-radius: 8px;
margin-bottom: 20px;
}
}
.message {
display: flex;
flex-direction: column;
align-items: center;
box-shadow: rgba(0, 0, 0, 0.16) 0px 1px 4px;
border-radius: 12px;
width: 250px;
margin: 20px 0px 20px 0px;
&.message-dark-mode{
box-shadow: rgba(255, 255, 255) 0px 1px 4px;
}
&--success {
background-color: #008000;
color: white;
}
&--failure {
background-color: #b40f0f;
color: white;
}
}
#messageTxt {
color: black;
p {
text-align: center;
font-family:'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
font-size: 36px;
font-weight: 900;
}
}
// get the button element by id.
let button = document.getElementById("darkToggle");
// add a click event listener to the button.
button.addEventListener("click", function () {
// toggle the dark-mode class on the body and button elements.
document.body.classList.toggle("body-dark-mode");
document.querySelector(".form").classList.toggle("form-dark-mode");
document.querySelector(".message").classList.toggle("message-dark-mode");
// check if the body element has the dark-mode class.
if (document.body.classList.contains("body-dark-mode")) {
// change the button text to light mode.
button.textContent = "Light mode";
} else {
// change the button text to dark mode.
button.textContent = "Dark mode";
}
});
document.getElementById("allowedCheck").onsubmit = (event) => {
event.preventDefault();
document.getElementById("messageTxt").innerHTML = "";
if(document.querySelector("#drunk").value < 2 && document.querySelector("#age").value >= 18){
document.getElementById("beer-bottle").src="../assets/green_beer.svg";
let ageOK = document.getElementById("messageTxt");
let p = document.createElement("p");
p.innerText = "Please come in.";
ageOK.appendChild(p);
}else if(document.querySelector("#drunk").value >= 2){
document.getElementById("beer-bottle").src="../assets/red_beer.svg";
let inebriated = document.getElementById("messageTxt");
let p = document.createElement("p");
p.innerText = "Sorry, we have a legal obligation not to serve intoxicated persons.";
inebriated.appendChild(p);
}else if(document.querySelector("#age").value < 18) {
document.getElementById("beer-bottle").src="../assets/red_beer.svg";
let ageTooYoung = document.getElementById("messageTxt");
let p = document.createElement("p");
p.innerText = "Sorry, you are too young to enter.";
ageTooYoung.appendChild(p);
}
}