gocodeup · luisOrell · Nov 17, 2023 · Nov 17, 2023 · Nov 17, 2023 · Nov 18, 2023
diff --git a/css/style.css b/css/style.css
@@ -0,0 +1,25 @@
+html, body {
+    width: 100%;
+    height:100%;
+}
+
+body {
+    background: linear-gradient(-45deg, #ece0d1, #dbc1ac, #967259, #634832);
+    background-size: 400% 400%;
+    animation: gradient 13s ease infinite;
+}
+
+@keyframes gradient {
+    0% {
+        background-position: 0% 50%;
+    }
+    50% {
+        background-position: 100% 50%;
+    }
+    100% {
+        background-position: 0% 50%;
+    }
+}
+
+
+
diff --git a/images/coffeeBeans.jpeg b/images/coffeeBeans.jpeg
diff --git a/index.html b/index.html
@@ -1,34 +1,97 @@
+
 <!DOCTYPE html>
 <html lang="en">
 <head>
     <meta charset="UTF-8">
     <title></title>
-    <link rel="stylesheet" href="style.css">
+    <link rel="stylesheet" href="css/style.css">
+    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN" crossorigin="anonymous">
 </head>
 <body>
-    <h1>Coffee!</h1>
-
-    <form>
-        <label for="roast-selection"></label>
-        <select id="roast-selection">
-            <option>light</option>
-            <option>medium</option>
-            <option>dark</option>
-        </select>
-        <input id="submit" type="submit" />
-    </form>
-
-    <table>
-        <thead>
-            <tr>
-                <th>ID</th>
-                <th>NAME</th>
-                <th>ROAST</th>
-            </tr>
-        </thead>
-        <tbody id="coffees"></tbody>
-    </table>
-
-    <script src="main.js"></script>
+<nav class="navbar bg-dark border-bottom border-body" data-bs-theme="dark">
+    <div class="container-fluid">
+        <!-- Brand -->
+        <a class="navbar-brand" href="#" style="color: lightgrey">O and B Coffee</a>
+
+        <!-- Toggle button for mobile -->
+        <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation" style="color: white">
+            <span class="navbar-toggler-icon"></span>
+        </button>
+
+        <!-- Navbar items -->
+        <div class="collapse navbar-collapse" id="navbarNav">
+            <ul class="navbar-nav">
+                <li class="nav-item">
+                    <a class="nav-link" href="#">Home</a>
+                </li>
+                <li class="nav-item">
+                    <a class="nav-link" href="#">Menu</a>
+                </li>
+                <li class="nav-item">
+                    <a class="nav-link" href="#">About Us</a>
+                </li>
+                <li class="nav-item">
+                    <a class="nav-link" href="#">Contact</a>
+                </li>
+            </ul>
+        </div>
+    </div>
+</nav>
+
+<div class="container">
+    <div class="row">
+        <!-- Empty Column -->
+        <div class="col-md-1"></div>
+
+        <!-- Middle Column (7 columns wide) -->
+        <div class="col-md-7">
+            <div class="row" id="coffees">
+                <!-- Coffee items will be dynamically added here -->
+            </div>
+        </div>
+
+        <!-- Right Column (4 columns wide) -->
+        <div class="col-md-4">
+            <!-- Roast Selection Form -->
+            <div class="selection-form">
+                <form id="roast-form">
+                    <h2>Select Your Coffee</h2>
+                    <label for="roast-selection">Roast:</label>
+                    <select id="roast-selection">
+                        <option value="all">All</option>
+                        <option value="light">Light</option>
+                        <option value="medium">Medium</option>
+                        <option value="dark">Dark</option>
+                    </select>
+                    <br>
+                    <!-- Search Form -->
+                    <form id="search-form">
+                        <label for="search">Search by name:</label>
+                        <input id="search" type="text" placeholder="Enter name">
+                    </form>
+                </form>
+            </div>
+            <!-- Add New Coffee Form -->
+            <div id="new-coffee-form">
+                <h2>Add New Coffee</h2>
+                <label for="new-coffee-name">Name:</label>
+                <input id="new-coffee-name" type="text" placeholder="Enter coffee name">
+
+                <br> <!-- Added line break to move the roast selector to the next line -->
+                <label for="new-coffee-roast">Roast:</label>
+                <select id="new-coffee-roast">
+                    <option value="light">Light</option>
+                    <option value="medium">Medium</option>
+                    <option value="dark">Dark</option>
+                </select>
+
+                <button id="add-coffee">Add Coffee</button>
+            </div>
+        </div>
+    </div>
+</div>
+
+<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-C6RzsynM9kWDrMNeT87bh95OGNyZPhcTNXj1NW7RuBCsyN/o0jlpcV8Qyq46cDfL" crossorigin="anonymous"></script>
+<script src="main.js"></script>
 </body>
-</html>
+</html>
diff --git a/main.js b/main.js
@@ -1,57 +1,120 @@
-"use strict"
+"use strict";
 
 function renderCoffee(coffee) {
-    let html = '<tr class="coffee">';
-    html += `<td>${coffee.id}</td>`;
-    html += `<td>${coffee.name}</td>`;
-    html += `<td>${coffee.roast}</td>`;
-    html += '</tr>';
+    let coffeeDiv = document.createElement('div');
+    coffeeDiv.classList.add('col-6', 'col-md-4', 'coffee');
 
-    return html;
-}
+    // Apply styles based on roast type
+    switch (coffee.roast) {
+        case 'light':
+            coffeeDiv.style.backgroundColor = '#ece0d1';
+            break;
+        case 'medium':
+            coffeeDiv.style.backgroundColor = '#dbc1ac';
+            break;
+        case 'dark':
+            coffeeDiv.style.backgroundColor = '#967259';
+            break;
+        default:
+            coffeeDiv.style.backgroundColor = '#ece0d1'; // Default to light roast color
+    }
+
+    coffeeDiv.style.border = '1px solid #38220f';
+    coffeeDiv.style.margin = '0.5em';
+    coffeeDiv.style.width = '12em';
 
+    let typeParagraph = document.createElement('p');
+    typeParagraph.textContent = `Type: ${coffee.name}`;
+    coffeeDiv.appendChild(typeParagraph);
+
+    let roastParagraph = document.createElement('p');
+    roastParagraph.textContent = `Roast: ${coffee.roast}`;
+    coffeeDiv.appendChild(roastParagraph);
+
+    return coffeeDiv;
+}
 function renderCoffees(coffees) {
-    let html = '';
-    for(let i = coffees.length - 1; i >= 0; i--) {
-        html += renderCoffee(coffees[i]);
-    }
-    return html;
+    let coffeesContainer = document.querySelector('#coffees');
+    coffeesContainer.innerHTML = ''; // Clear previous content
+
+    coffees.forEach(coffee => {
+        let coffeeDiv = renderCoffee(coffee);
+        coffeesContainer.appendChild(coffeeDiv);
+    });
 }
 
-function updateCoffees(e) {
-    e.preventDefault(); // don't submit the form, we just want to update the data
+function updateCoffees() {
     const selectedRoast = roastSelection.value;
-    const filteredCoffees = [];
-    coffees.forEach( coffee => {
-        if (coffee.roast === selectedRoast) {
-            filteredCoffees.push(coffee);
-        }
-    });
-    tbody.innerHTML = renderCoffees(filteredCoffees);
+    const searchTerm = searchInput.value.toLowerCase();
+    let filteredCoffees = coffees;
+
+    // Filter by selected roast
+    if (selectedRoast !== 'all') {
+        filteredCoffees = filteredCoffees.filter(coffee => coffee.roast === selectedRoast);
+    }
+
+    // Filter by search term
+    if (searchTerm.trim() !== '') {
+        filteredCoffees = filteredCoffees.filter(coffee => coffee.name.toLowerCase().includes(searchTerm));
+    }
+
+    // Render the filtered coffees
+    renderCoffees(filteredCoffees);
+}
+
+function addCoffee() {
+    const newName = newCoffeeName.value.trim();
+    const newRoast = newCoffeeRoast.value;
+
+    if (newName !== '' && newRoast) {
+        const newCoffee = {
+            name: newName,
+            roast: newRoast,
+        };
+
+        // Add the new coffee to the array
+        coffees.push(newCoffee);
+
+        // Render the updated coffees
+        renderCoffees(coffees);
+
+        // Clear the form inputs
+        newCoffeeName.value = '';
+        newCoffeeRoast.value = 'light';
+    }
 }
 
-// from http://www.ncausa.org/About-Coffee/Coffee-Roasts-Guide
+// Coffee data array
 const coffees = [
-    {id: 1, name: 'Light City', roast: 'light'},
-    {id: 2, name: 'Half City', roast: 'light'},
-    {id: 3, name: 'Cinnamon', roast: 'light'},
-    {id: 4, name: 'City', roast: 'medium'},
-    {id: 5, name: 'American', roast: 'medium'},
-    {id: 6, name: 'Breakfast', roast: 'medium'},
-    {id: 7, name: 'High', roast: 'dark'},
-    {id: 8, name: 'Continental', roast: 'dark'},
-    {id: 9, name: 'New Orleans', roast: 'dark'},
-    {id: 10, name: 'European', roast: 'dark'},
-    {id: 11, name: 'Espresso', roast: 'dark'},
-    {id: 12, name: 'Viennese', roast: 'dark'},
-    {id: 13, name: 'Italian', roast: 'dark'},
-    {id: 14, name: 'French', roast: 'dark'},
+    { id: 1, name: 'Light City', roast: 'light' },
+    { id: 2, name: 'Half City', roast: 'light' },
+    { id: 3, name: 'Cinnamon', roast: 'light' },
+    { id: 4, name: 'City', roast: 'medium' },
+    { id: 5, name: 'American', roast: 'medium' },
+    { id: 6, name: 'Breakfast', roast: 'medium' },
+    { id: 7, name: 'High', roast: 'dark' },
+    { id: 8, name: 'Continental', roast: 'dark' },
+    { id: 9, name: 'New Orleans', roast: 'dark' },
+    { id: 10, name: 'European', roast: 'dark' },
+    { id: 11, name: 'Espresso', roast: 'dark' },
+    { id: 12, name: 'Viennese', roast: 'dark' },
+    { id: 13, name: 'Italian', roast: 'dark' },
+    { id: 14, name: 'French', roast: 'dark' },
 ];
 
-const tbody = document.querySelector('#coffees');
-const submitButton = document.querySelector('#submit');
+// Initial render
+renderCoffees(coffees);
+
+
+// Event handling
 const roastSelection = document.querySelector('#roast-selection');
+const searchInput = document.querySelector('#search');
+const newCoffeeName = document.querySelector('#new-coffee-name');
+const newCoffeeRoast = document.querySelector('#new-coffee-roast');
+const addCoffeeButton = document.querySelector('#add-coffee');
 
-tbody.innerHTML = renderCoffees(coffees);
+roastSelection.addEventListener('change', updateCoffees); // Changed 'input' to 'change' for immediate update
+searchInput.addEventListener('input', updateCoffees);
+addCoffeeButton.addEventListener('click', addCoffee);
 
-submitButton.addEventListener('click', updateCoffees);
+// ...
diff --git a/style.css b/style.css