%%html
<!-- HTML output div -->
<div id="message"></div>
<script>
function runWhenDOMLoaded() {
let isHungry = true;
// Define ingredients as a JSON object
const ingredients = {
"bread": true,
"cheese": false,
"tomato": false
};
const messageElement = document.getElementById("message");
function displayMessage(message) {
console.log(message); // Log to console
messageElement.textContent = message; // Display on the webpage
}
// Check if essential ingredients are available
if (isHungry) {
if (ingredients.bread && ingredients.cheese) {
displayMessage("You can make a cheese sandwich at home.");
} else if (ingredients.bread) {
displayMessage("You only have bread, maybe make toast.");
} else {
displayMessage("You should order food since you don't have enough ingredients.");
}
} else {
displayMessage("You aren't hungry. Maybe meal-prep for later if you had ingredients.");
}
}
// Ensure the function runs only after the page loads
if (document.readyState === 'loading') {
document.addEventListener('DOMContentLoaded', runWhenDOMLoaded);
} else {
runWhenDOMLoaded();
}
</script>
Popcorn Hack 2
- Open two new code cells and set them to javascript
- Copy the code example from above javascript cell into both the new code cells
- Change the first new code cell to print “You aren’t hungry. Maybe meal-prep for later if you had ingredients.”
- Change the second new code cell to print “You can make a cheese sandwich at home.”
%%html
<h3>Popcorn Hack 2.1<h3>
<!-- HTML output div -->
<div id="message"></div>
<script>
function runWhenDOMLoaded() {
let isHungry = false;
// Define ingredients as a JSON object
const ingredients = {
"bread": true,
"cheese": false,
"tomato": false
};
const messageElement = document.getElementById("message");
function displayMessage(message) {
console.log(message); // Log to console
messageElement.textContent = message; // Display on the webpage
}
// Check if essential ingredients are available
if (isHungry) {
if (ingredients.bread && ingredients.cheese) {
displayMessage("You can make a cheese sandwich at home.");
} else if (ingredients.bread) {
displayMessage("You only have bread, maybe make toast.");
} else {
displayMessage("You should order food since you don't have enough ingredients.");
}
} else {
displayMessage("You aren't hungry. Maybe meal-prep for later if you had ingredients.");
}
}
// Ensure the function runs only after the page loads
if (document.readyState === 'loading') {
document.addEventListener('DOMContentLoaded', runWhenDOMLoaded);
} else {
runWhenDOMLoaded();
}
</script>