I'm making a site that assigns you a random number and random start time based on your age and time of registration. a. If you are below 18 and you registered before 7:30 AM, you will be assigned a random number above 1000 and you will start at 9:30 AM. b. If you are below 18 and you registered from 7:31 AM to 9:00 AM, you will get a random number below 1000 and you will start at 11:00 AM. c. If you are below 18 and you registered from 9:01 AM onwards, you will get a random number below 1000 and you will start at 12:30 AM.
Can I use if else statements to compare the times of registration submitted by the users (ex. registrationTime > 7:30)? If not, is there another way?
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="style.css">
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Race Day</title>
</head>
<body>
<header>
<h1>Race Day</h1>
</header>
<main>
<div class="img-wrapper">
<img src="http://pixelartmaker-data-78746291193.nyc3.digitaloceanspaces.com/image/486628a7f81e711.png" alt="runner">
</div>
<div class="form-wrapper" id="form-wrapper">
<form action="#">
<label for="fullName">Name</label>
<input type="text" name="fullName" id="fullName" autocomplete="off" required>
<label for="age">Age</label>
<input type="number" name="age" id="age" min="1" max="100" required>
<label for="time">Time of Registration</label>
<input type="time" name="time" id="time" required>
<button id="myBtn" type="button" onclick="save()">Submit</button>
</form>
</div>
<div class="raceNumberContainer">
<p id="greeting"></p>
<h1 id="racenumber"></h1>
<p id="startTime"></p>
</div>
</main>
<script>
// initialize variables
// saving the input values
function save() {
let nameValue = document.getElementById('fullName').value
let ageValue = document.getElementById('age').value
let timeValue = document.getElementById('time').value
console.log(`Name: ${nameValue} Age: ${ageValue} Time of Registration: ${timeValue}`);
// getting the variables for display
let greetingDisplay = document.getElementById('greeting');
let raceNumberDisplay = document.getElementById('racenumber');
let startTimeDisplay = document.getElementById('startTime');
// LOGIC FOR THE NUMBER ASSIGNMENT
let raceNumber = Math.floor(Math.random() * 1000);
// specify the text in the greeting element
let greetingText = `Hello, ${nameValue}! Your race number is`;
// display the values entered by the user
greetingDisplay.innerText = greetingText;
raceNumberDisplay.innerText = 4;
startTimeDisplay.innerText = "5:40 PM";
}
</script>
</body>
</html>
