☆ My code ☆

☆ HTML Hacks ☆

%%html
   <style>
        button {
            background-color: #4e804f;
            color: white; 
            padding: 10px 20px;
            border: none;
            cursor: pointer;
        }
        button:hover {
            background-color: darkgreen;
            color: #d1d9ce;
        }
        a {
            color: white;
            text-decoration: none;
        }

        a:hover {
            color: #d1d9ce;
        }

        /* Additional styles for better presentation */
        div {
            margin: 20px;
        }
        .top {
            background-color: #4e804f;
            padding: 10px 0;
            text-align: center;
        }

        .top a {
            margin: 0 20px;
        }
        h1 {
            text-align: center;
        }
    </style>
</head>
<body>
    <header>
        <h1>☆ Online Grocery Store! ☆</h1>
    </header>
    <nav class="top">
        <a href="/">☆ Home</a>
        <a href="/fruits">☆ Fruits</a>
        <a href="/vegetables">☆ Vegetables</a>
        <a href="/dairy">☆ Dairy</a>
    </nav>
    <section>
        <h2>Shop Now</h2>
        <p>Explore a wide variety of fresh and delicious groceries.</p>
        <button>Start Shopping</button>
    </section>
    <section>
        <h2>Our Products</h2>
        <p>Discover the finest selection of fruits, vegetables, and dairy products.</p>
        <a href="/fruits">Fruits</a>
        <a href="/vegetables">Vegetables</a>
        <a href="/dairy">Dairy</a>
    </section>
</body>

</head>

☆ Online Grocery Store! ☆

Shop Now

Explore a wide variety of fresh and delicious groceries.

Our Products

Discover the finest selection of fruits, vegetables, and dairy products.

Fruits Vegetables Dairy 
%%html
console.log("If statements + Operators")
var age1 = 16
var age2 = 17
if (age1 > age2) {
    // runs if age1 is more than age2
    console.log("age1 is more than age2")
}
if (age1 === age2) {
    // runs if age1 and age2 are the same
    console.log("age1 is the same as age2")
}
if (age1 < age2) {
    // runs if age2 is more than age1
    console.log("age1 is less than age2")
}

console.log(“If statements + Operators”) var age1 = 16 var age2 = 17 if (age1 > age2) { // runs if age1 is more than age2 console.log(“age1 is more than age2”) } if (age1 === age2) { // runs if age1 and age2 are the same console.log(“age1 is the same as age2”) } if (age1 < age2) { // runs if age2 is more than age1 console.log(“age1 is less than age2”) }

%%js
const groceryStore = {
  name: "GreenGrocers",
  location: "Virtual",
  products: [
    {
      name: "Apples",
      price: 1.5,
      quantity: 100,
    },
    {
      name: "Bananas",
      price: 0.75,
      quantity: 150,
    },
    {
      name: "Milk",
      price: 2.0,
      quantity: 50,
    },
  ],
  customers: ["Customer1", "Customer2", "Customer3"],
  orders: [
    {
      orderId: 1,
      customer: "Customer1",
      items: ["Apples", "Bananas"],
      total: 2.25,
    },
    {
      orderId: 2,
      customer: "Customer2",
      items: ["Milk", "Apples"],
      total: 3.5,
    },
  ],
};
console.log("Grocery Store Object:");
console.log(groceryStore);
groceryStore.products[0].quantity += 10;
console.log("Updated quantity of Apples:");
console.log(groceryStore.products[0]);
// Perform mathematical operations
const totalPrice = groceryStore.products.reduce(
  (total, product) => total + product.price * product.quantity,
  0
);
console.log("Total value of all products in store: $" + totalPrice);
// Use typeof to determine types of fields
console.log("Type of 'name':", typeof groceryStore.name);
console.log("Type of 'products':", typeof groceryStore.products);
console.log("Type of 'orders':", typeof groceryStore.orders);
// Display JavaScript output in the Jupyter Notebook cell
element.text("JavaScript code executed. Check the browser console for output.");

<IPython.core.display.Javascript object>

%%html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Grocery Store</title>
</head>
<body>
    <!-- Grocery Store Title -->
    <h1 id="storeTitle">My Grocery Store</h1>

    <!-- Grocery List -->
    <ul id="groceryList">
        <li>Apples</li>
        <li>Bananas</li>
        <li>Carrots</li>
    </ul>

    <!-- Add Item Form -->
    <div>
        <input type="text" id="itemInput" placeholder="Enter an item">
        <button id="addItemButton">Add Item</button>
    </div>

    <!-- JavaScript Code -->
    <script>
        // Function to add an item to the grocery list
        function addItemToList() {
            var itemInput = document.getElementById("itemInput");
            var groceryList = document.getElementById("groceryList");

            if (itemInput.value.trim() !== "") {
                var newItem = document.createElement("li");
                newItem.innerText = itemInput.value;
                groceryList.appendChild(newItem);

                // Clear the input field
                itemInput.value = "";

                // Update the top paragraph to indicate a change
                var storeTitle = document.getElementById("storeTitle");
                storeTitle.innerText = "My Grocery Store (Updated)";

                // Change the innerHTML of the top paragraph
                var topParagraph = document.querySelector("p");
                topParagraph.innerText = "Switched!";
            }
        }

        // Add an item when the button is clicked
        var addItemButton = document.getElementById("addItemButton");
        addItemButton.onclick = addItemToList;
    </script>
</body>
</html>

<!DOCTYPE html>

Grocery Store

My Grocery Store

  • Apples
  • Bananas
  • Carrots
%%js
console.log('if statements')
 var a = 10
 var b = 5
if (a > b) {
  console.log("a is greater");
} else if (b > a) {
  console.log("b is greater");
} else {
  console.log("both are equal");

<IPython.core.display.Javascript object>