%%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

  1. Open two new code cells and set them to javascript
  2. Copy the code example from above javascript cell into both the new code cells
  3. Change the first new code cell to print “You aren’t hungry. Maybe meal-prep for later if you had ingredients.”
  4. 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>

Popcorn Hack 2.1

```python %%html

Popcorn Hack 2.2

```

Popcorn Hack 2.2