gocodeup · Jwatt31 · Nov 17, 2023 · Nov 17, 2023 · Nov 17, 2023 · Nov 19, 2023
diff --git a/index.html b/index.html
@@ -2,33 +2,54 @@
 <html lang="en">
 <head>
     <meta charset="UTF-8">
-    <title></title>
+    <title>Coffee Shop</title>
     <link rel="stylesheet" href="style.css">
-</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>
+    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN" crossorigin="anonymous">
 
-    <table>
-        <thead>
-            <tr>
-                <th>ID</th>
-                <th>NAME</th>
-                <th>ROAST</th>
-            </tr>
-        </thead>
-        <tbody id="coffees"></tbody>
-    </table>
+</head>
+<body>
+<h1>Coffee!</h1>
+<div class="container">
+    <main class="left-side">
+        <div id="coffees"></div>
+    </main>
+    <aside class="right-side">
+        <div>
+            <form id="filterForm">
+                <label for="roast-selection"><h4>Roast</h4></label>
+                <select id="roast-selection" class="form-select" aria-label="Default select example">
+                    <option value="all" selected>All</option>
+                    <option value="light">Light</option>
+                    <option value="medium">Medium</option>
+                    <option value="dark">Dark</option>
+                </select>
+                <h4>Coffee</h4>
+                <div class="searchbar">
+                    <label for="searchroast1" class="form-label">Coffee Name</label>
+                    <input type="text" class="form-control" id="searchroast1" placeholder="Roast Name">
+                </div>
+                <button class="rounded" id="submit" type="submit">Submit</button>
+            </form>
+        </div>
+        <div>
+            <form id="addCoffeeForm">
+                <h4>Add Your Own </h4>
+                <label for="coffeeName">Coffee Name</label>
+                <input type="text" id="coffeeName" placeholder="Enter coffee name">
+                <label for="coffeeRoast">Roast Type</label>
+                <select id="coffeeRoast" class="form-select">
+                    <option value="light">Light</option>
+                    <option value="medium">Medium</option>
+                    <option value="dark">Dark</option>
+                </select>
+                <input type="submit" id='addCoffee' value="Add Coffee" />
+            </form>
+        </div>
+    </aside>
+</div>
 
-    <script src="main.js"></script>
+<script src="main.js"></script>
+<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-C6RzsynM9kWDrMNeT87bh95OGNyZPhcTNXj1NW7RuBCsyN/o0jlpcV8Qyq46cDfL" crossorigin="anonymous"></script>
 </body>
-</html>
+</html>
diff --git a/main.js b/main.js
@@ -1,18 +1,21 @@
 "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 html = '<div class="coffee">';
+    html += `<p>${coffee.id}</p>`;
+    html += `<p>${coffee.name}</p>`;
+    html += `<p>${coffee.roast}</p>`;
+    html += '</div>';
 
     return html;
 }
 
+
+const searchInput = document.querySelector('#coffeeSearch');
+
 function renderCoffees(coffees) {
     let html = '';
-    for(let i = coffees.length - 1; i >= 0; i--) {
+    for (let i = coffees.length - 1; i >= 0; i--) {
         html += renderCoffee(coffees[i]);
     }
     return html;
@@ -21,16 +24,31 @@ function renderCoffees(coffees) {
 function updateCoffees(e) {
     e.preventDefault(); // don't submit the form, we just want to update the data
     const selectedRoast = roastSelection.value;
-    const filteredCoffees = [];
-    coffees.forEach( coffee => {
-        if (coffee.roast === selectedRoast) {
-            filteredCoffees.push(coffee);
+    let filteredCoffees = [];
+    coffees.forEach(coffee => {
+        if (selectedRoast === 'all'){
+            filteredCoffees = coffees;
+        } else {
+            filteredCoffees = coffees.filter(coffee => coffee.roast === selectedRoast);
         }
     });
-    tbody.innerHTML = renderCoffees(filteredCoffees);
+    coffeesList.innerHTML = renderCoffees(filteredCoffees);
+}
+
+function addNewCoffee(e) {
+    e.preventDefault()
+    const CoffeeName = document.querySelector('#coffeeName').value;
+    const CoffeeRoast = document.querySelector('#coffeeRoast').value;
+
+    const newCoffee = {
+        id: coffees.length + 1,
+        name: CoffeeName,
+        roast: CoffeeRoast
+    };
+    coffees.push(newCoffee);
+    coffeesList.innerHTML = renderCoffees(coffees)
 }
 
-// from http://www.ncausa.org/About-Coffee/Coffee-Roasts-Guide
 const coffees = [
     {id: 1, name: 'Light City', roast: 'light'},
     {id: 2, name: 'Half City', roast: 'light'},
@@ -48,10 +66,30 @@ const coffees = [
     {id: 14, name: 'French', roast: 'dark'},
 ];
 
-const tbody = document.querySelector('#coffees');
-const submitButton = document.querySelector('#submit');
+const addCoffeeButton = document.querySelector('#addCoffee');
+const coffeesList = document.querySelector('#coffees');
 const roastSelection = document.querySelector('#roast-selection');
+const coffeeSearch = document.querySelector('#coffeeSearch');
+const submitButton = document.querySelector('#submit1');
+
+coffeesList.innerHTML = renderCoffees(coffees);
 
+roastSelection.addEventListener("input", updateCoffees);
+
+addCoffeeButton.addEventListener('click', addNewCoffee);
+
+
+const tbody = document.querySelector('#coffees');
+
+const searchbox = document.getElementById('searchroast1');
+searchbox.addEventListener('keydown', () => {
+    const searchInput = searchbox.value.toUpperCase();
+    const filteredCoffees = coffees.filter((coffee) =>
+        coffee.name.toUpperCase().includes(searchInput)
+    );
+    tbody.innerHTML = renderCoffees(filteredCoffees);
+});
 tbody.innerHTML = renderCoffees(coffees);
 
-submitButton.addEventListener('click', updateCoffees);
+
+
diff --git a/pexels-daria-obymaha-1684151.jpg b/pexels-daria-obymaha-1684151.jpg
diff --git a/style.css b/style.css
@@ -1,9 +1,104 @@
-table {
-    border-collapse: collapse;
-    margin: 15px 0;
+/* Custom CSS */
+body {
+    background-image: url("pexels-daria-obymaha-1684151.jpg");
+    background-position: center;
+    background-size: cover;
+    font-family: Arial, sans-serif;
+    margin: 0;
+    padding: 20px;
 }
 
-td, th {
-    border: 1px solid black;
-    padding: 5px 10px;
+h1 {
+    font-family: Jonathan Hetegral, sans-serif;
+    text-align: center;
+    color: #333;
+    font-size: larger;
 }
+
+.container {
+    display: flex;
+    justify-content: space-between;
+}
+
+.left-side {
+    flex: 1;
+    padding-right: 20px;
+}
+
+.right-side {
+    flex: 1;
+
+    padding: 20px;
+    border-radius: 5px;
+
+}
+
+form {
+    margin-bottom: 20px;
+}
+
+#coffees {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
+    gap: 10px;
+    font-family: Agbalumo, sans-serif;
+}
+
+
+
+#coffees > div {
+    border: 1px solid #ccc;
+    padding: 10px;
+    border-radius: 5px;
+    background-color: #f9f9f9;
+}
+
+#coffees > div h5 {
+    margin-bottom: 5px;
+}
+
+input[type="text"],
+select.form-select {
+    width: 100%;
+    margin-bottom: 10px;
+}
+
+input[type="submit"] {
+    width: 100%;
+    padding: 8px 10px;
+    border: none;
+    border-radius: 3px;
+    background-color: #007bff;
+    color: #fff;
+    cursor: pointer;
+}
+
+input[type="submit"]:hover {
+    background-color: #0056b3;
+}
+button[type="text"],
+select.form-select {
+    width: 100%;
+    margin-bottom: 10px;
+}
+
+button[type="submit"] {
+    width: 100%;
+    padding: 8px 10px;
+    border: none;
+    border-radius: 3px;
+    background-color: #007bff;
+    color: #fff;
+    cursor: pointer;
+}
+
+button[type="submit"]:hover {
+    background-color: #0056b3;
+}
+
+/* Bootstrap Overrides */
+select.form-select {
+    appearance: auto;
+}
+
+