zero-to-mastery · gdimit01 · Oct 5, 2023
diff --git a/src/blocks/dimitg01/icon.png b/src/blocks/dimitg01/icon.png
diff --git a/src/blocks/dimitg01/index.html b/src/blocks/dimitg01/index.html
@@ -0,0 +1,27 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Coffee Order Form</title>
+    <link rel="stylesheet" href="styles.css" />
+  </head>
+
+  <body>
+    <div class="container">
+      <h1>Coffee Order</h1>
+
+      <!-- Display list of coffees fetched from the API here -->
+      <div id="coffeeList"></div>
+
+      <form id="coffeeForm">
+        <button type="submit">Submit Order</button>
+      </form>
+
+      <div id="totalCost"></div>
+    </div>
+
+    <!-- Updated the script file name to "script.js" -->
+    <script src="script.js"></script>
+  </body>
+</html>
diff --git a/src/blocks/dimitg01/meta.json b/src/blocks/dimitg01/meta.json
@@ -0,0 +1,5 @@
+{
+  "block_name": "Coffee Form",
+  "author_name": "Georgi Dimitrov",
+  "author_github_url": "https://github.com/gdimit01/"
+}
diff --git a/src/blocks/dimitg01/script.js b/src/blocks/dimitg01/script.js
@@ -0,0 +1,80 @@
+document.addEventListener("DOMContentLoaded", initializeApp);
+
+function initializeApp() {
+  // Define the coffee data
+  const coffees = [
+    { id: 1, name: "Espresso", price: 2.5 },
+    { id: 2, name: "Latte", price: 3.0 },
+    { id: 3, name: "Cappuccino", price: 3.5 },
+    { id: 4, name: "Americano", price: 2.0 },
+    { id: 5, name: "Mocha", price: 3.75 },
+  ];
+
+  renderCoffeeList(coffees);
+  attachFormListener();
+}
+
+// Renders the coffee list to the DOM
+function renderCoffeeList(coffees) {
+  const coffeeListDiv = document.getElementById("coffeeList");
+
+  coffees.forEach((coffee) => {
+    const coffeeDiv = document.createElement("div");
+    coffeeDiv.className = "coffee-item";
+    coffeeDiv.innerHTML = `
+      <div class="coffee-label">
+          <input type="checkbox" id="coffee_${coffee.id}" data-price="${
+      coffee.price
+    }">
+          <label for="coffee_${coffee.id}">${
+      coffee.name
+    } (£${coffee.price.toFixed(2)})</label>
+      </div>
+      <input type="number" id="quantity_${
+        coffee.id
+      }" placeholder="Quantity" value="1" min="1">
+    `;
+    coffeeListDiv.appendChild(coffeeDiv);
+  });
+}
+
+// Attaches the submit event listener to the form
+function attachFormListener() {
+  const coffeeForm = document.getElementById("coffeeForm");
+  coffeeForm.addEventListener("submit", handleFormSubmit);
+}
+
+// Handles the form submission event
+function handleFormSubmit(event) {
+  event.preventDefault();
+
+  const total = calculateTotalOrderCost();
+
+  const totalCostDiv = document.getElementById("totalCost");
+  totalCostDiv.innerHTML = `<strong>Total Cost:</strong> £${total.toFixed(2)}`;
+}
+
+// Calculates the total cost based on selected items and their quantities
+function calculateTotalOrderCost() {
+  let total = 0;
+
+  document
+    .querySelectorAll('input[type="checkbox"]:checked')
+    .forEach((checkedBox) => {
+      const quantityElement = document.getElementById(
+        `quantity_${checkedBox.id.split("_")[1]}`
+      );
+      const quantity = parseInt(quantityElement.value, 10);
+
+      // Handle cases where the quantity might not be a number or less than 1
+      if (isNaN(quantity) || quantity < 1) {
+        console.error(`Invalid quantity for ${checkedBox.id}: ${quantity}`);
+        return;
+      }
+
+      const price = parseFloat(checkedBox.getAttribute("data-price"));
+      total += quantity * price;
+    });
+
+  return total;
+}
diff --git a/src/blocks/dimitg01/styles.css b/src/blocks/dimitg01/styles.css
@@ -0,0 +1,96 @@
+body {
+  font-family: "Arial", sans-serif;
+  background-color: #f6e5d1; /* A light coffee shade */
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  height: 100vh;
+  margin: 0;
+}
+
+.container {
+  background-color: #fff;
+  padding: 30px;
+  border-radius: 10px;
+  box-shadow: 0px 4px 15px rgba(0, 0, 0, 0.1);
+  width: 350px;
+  border: 1px solid #d1c1ad;
+}
+
+#coffeeList {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
+  gap: 15px;
+}
+
+.coffee-item {
+  display: flex;
+  flex-direction: column;
+  gap: 5px;
+}
+
+label {
+  font-weight: bold;
+  margin-bottom: 10px;
+}
+
+input[type="checkbox"] {
+  margin-right: 10px;
+}
+
+input[type="number"] {
+  width: 80px;
+  margin-top: 5px;
+}
+
+input {
+  padding: 10px;
+  border: 1px solid #d1c1ad;
+  border-radius: 5px;
+  font-size: 14px;
+  background-color: #f9f4e9;
+}
+
+button {
+  display: block;
+  width: 100%;
+  padding: 10px;
+  background-color: #8b7355; /* Coffee brown */
+  color: #fff;
+  border: none;
+  border-radius: 5px;
+  cursor: pointer;
+  margin-top: 20px;
+  transition: background-color 0.3s;
+}
+
+button:hover {
+  background-color: #6e573f;
+}
+
+#totalCost {
+  margin-top: 20px;
+  font-weight: bold;
+  font-size: 18px;
+}
+
+.coffee-item {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  border: 1px solid #d1c1ad;
+  padding: 8px 12px;
+  border-radius: 5px;
+  margin-bottom: 10px;
+  background-color: #f9f4e9;
+}
+
+.coffee-label {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+
+input[type="number"] {
+  width: 50px; /* Adjusting the width of the number input */
+}