A simple web application that tells you if you're hungry, bored, or something else entirely.
The initial step was to create a basic HTML file with a structure that includes a heading, a placeholder where the random response will be displayed, and sections for future CSS and JavaScript.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta
name="viewport"
content="width=device-width, initial-scale=1.0"
/>
<title>Are You Hungry or Just Bored?</title>
<style>
/* CSS will be added here */
</style>
</head>
<body>
<h1>Are You Hungry or Bored?</h1>
<p id="response"></p>
<script>
// JavaScript will go here
</script>
</body>
</html>Create an empty respository on GitHub, and then in the command line:
git init
git remote add origin [email protected]:rhettparkinson/hungryorbored.git
git add .
git commit -m "Initial commit"
git branch -M main
git push -u origin mainAdded JavaScript within the HTML file to randomly select and display one of the predefined responses when the page loads.
<script>
// Array of responses
const responses = ["hungry", "bored", "both", "hangry", "go to bed"];
// Function to get a random response
function getRandomResponse() {
const randomIndex = Math.floor(Math.random() * responses.length);
return responses[randomIndex];
}
// Function to display a random response
function displayResponse() {
const responseParagraph = document.getElementById("response");
responseParagraph.textContent = getRandomResponse();
}
// Call displayResponse when the page loads
window.onload = displayResponse;
</script>Added The New CSS Reset by elad2412 as well as the following:
body {
display: grid;
place-items: center;
height: 100%;
min-height: 100dvh;
font-family: "Urbanist", sans-serif;
margin: 0;
padding: 0;
background-color: blanchedalmond;
}
#response {
margin: 0 0 0.175em 0;
padding: 1rem;
font-size: 25vw;
line-height: 1em;
}