CodeupClassroom · josephmccomas · Jan 10, 2023 · Jan 10, 2023 · Jan 10, 2023 · Jan 10, 2023
diff --git a/.gitignore b/.gitignore
@@ -0,0 +1,3 @@
+.DS_Store
+.idea
+*.iml
diff --git a/css/style.css b/css/style.css
@@ -0,0 +1,23 @@
+@import url('https://fonts.googleapis.com/css2?family=Abel&family=Anton&family=Lato:wght@300&family=Montserrat:wght@400;600&family=Roboto&family=Source+Code+Pro&family=Work+Sans&display=swap');
+* {
+  font-family: 'Montserrat', sans-serif;
+;
+}
+h1, h3 {
+  padding-top: .5em;
+  display: flex;
+  justify-content: center;
+}
+select, input {
+  width: 100%;
+}
+h1, h3, label {
+  font-weight: bold;
+}
+.coffeeName {
+  font-size: 1.5em;
+  font-weight: bolder;
+}
+.light, .medium, .dark {
+  color: gray;
+}
diff --git a/img/DarkBeans.jpg b/img/DarkBeans.jpg
diff --git a/img/LightBeans.jpg b/img/LightBeans.jpg
diff --git a/img/MeduimBeans.jpg b/img/MeduimBeans.jpg
diff --git a/img/farm.png b/img/farm.png
diff --git a/index.html b/index.html
@@ -2,33 +2,46 @@
 <html lang="en">
 <head>
     <meta charset="UTF-8">
-    <title></title>
-    <link rel="stylesheet" href="style.css">
+    <meta http-equiv="x-ua-compatible" content="ie=edge" />
+    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
+    <title>jwood-r1 Coffee Project</title>
+    <link rel="preconnect" href="https://fonts.googleapis.com"><link rel="preconnect" href="https://fonts.gstatic.com" crossorigin><link href="https://fonts.googleapis.com/css2?family=Abel&family=Anton&family=Lato:wght@300&family=Montserrat&family=Roboto&family=Source+Code+Pro&family=Work+Sans&display=swap" rel="stylesheet">
+    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
+    <link rel="stylesheet" href="css/style.css">
+    <script src="https://kit.fontawesome.com/4d0b40d330.js" crossorigin="anonymous"></script>
 </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>
+<body class="m-3">
+<h1>Coffee!</h1>
+<hr>
+<div class="container-fluid mx-0">
+    <div class="row">
+        <div class="col-6 px-0" id="coffees"></div>
+        <form class="col-6 px-0">
+            <label class="pb-2" for="roast-selection">Reset</label>
+            <select id="roast-selection">
+                <option>all</option>
+                <option>light</option>
+                <option>medium</option>
+                <option>dark</option>
+            </select>
+            <label class="py-2" for="roast-selection">Coffee Name</label>
+            <input class="form-control" id="enterCoffee" type="text" placeholder="enter coffee name here" aria-label="default input example" onclick="searchCoffees">
+            <button type="button" class="btn btn-primary w-100 mt-2" id="submit1">Submit</button>
+            <hr>
+            <h3>Add A Coffee</h3>
+            <label class="pb-2" for="roast-selection">Roast</label>
+            <select id="add-roast-selection">
+                <option>light</option>
+                <option>medium</option>
+                <option>dark</option>
+            </select>
+            <label class="py-2 text-grey" for="roast-selection">Name</label>
+            <input class="form-control" id="enterNewCoffee"type="text" placeholder="enter coffee name here" aria-label="default input example">
+            <button type="button" class="btn btn-primary w-100 mt-2" id="submit2">Submit</button>
+        </form>
+    </div>
+</div>
+<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>
+<script src="main.js"></script>
 </body>
 </html>
diff --git a/main.js b/main.js
@@ -1,37 +1,57 @@
 "use strict"
-
 function renderCoffee(coffee) {
-    var 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 col-12" id="' + coffee.id + '">';
+    // html += '<td>' + coffee.id + '</td>';
+    html += '<div class="row">';
+    // let coffeeItem =
+    html += '<div class="coffeeName col-6" id="' + coffee.name + '">' + coffee.name + '</div>';
+    html += '<div class="col-6 ' + coffee.roast + '">' + coffee.roast + '</div>';
+    html += '</div>';
+    html += '</div>';
 
     return html;
 }
-
 function renderCoffees(coffees) {
-    var html = '';
-    for(var i = coffees.length - 1; i >= 0; i--) {
+    let html = '';
+    for(let i = 0; i <= coffees.length - 1; i++) {
         html += renderCoffee(coffees[i]);
     }
     return html;
 }
-
 function updateCoffees(e) {
     e.preventDefault(); // don't submit the form, we just want to update the data
-    var selectedRoast = roastSelection.value;
-    var filteredCoffees = [];
+    let selectedRoast = roastSelection.value;
+    let filteredCoffees = [];
     coffees.forEach(function(coffee) {
         if (coffee.roast === selectedRoast) {
             filteredCoffees.push(coffee);
         }
+        if ("all" === selectedRoast) {
+            filteredCoffees.push(coffee);
+        }
     });
-    tbody.innerHTML = renderCoffees(filteredCoffees);
+    content.innerHTML = renderCoffees(filteredCoffees);
 }
-
-// from http://www.ncausa.org/About-Coffee/Coffee-Roasts-Guide
-var coffees = [
+function addCoffees(value) {
+    let filteredCoffees = coffees;
+    let newRoast = addRoastSelection.value;
+    let newName = addNewCoffee.value;
+    let newId = coffees.length + 1;
+    coffees.push({id: newId, name: newName, roast: newRoast});
+    content.innerHTML = renderCoffees(filteredCoffees);
+    // addRoastSelection.value = document.getElementById("add-roast-selection").value = "";
+    addNewCoffee.value = document.getElementById('enterNewCoffee').value = "";
+}
+function searchCoffees(value) {
+    let filteredCoffees = [];
+    for (let i = 0; i < coffees.length; i++) {
+        if(coffees[i].name.toLowerCase().indexOf(value.toLowerCase()) > -1) {
+            filteredCoffees.push(coffees[i]);
+        }
+    }
+    content.innerHTML = renderCoffees(searchCoffeesBar);
+}
+let coffees = [
     {id: 1, name: 'Light City', roast: 'light'},
     {id: 2, name: 'Half City', roast: 'light'},
     {id: 3, name: 'Cinnamon', roast: 'light'},
@@ -47,11 +67,18 @@ var coffees = [
     {id: 13, name: 'Italian', roast: 'dark'},
     {id: 14, name: 'French', roast: 'dark'},
 ];
+let content = document.querySelector('#coffees');
+let submitButton = document.querySelector('#submit1');
+let submitButton2 = document.querySelector('#submit2');
+let roastSelection = document.querySelector('#roast-selection');
+let addRoastSelection = document.querySelector('#add-roast-selection');
+let addNewCoffee = document.querySelector('#enterNewCoffee');
+let searchCoffeesBar = document.getElementById("#enterCoffee");
 
-var tbody = document.querySelector('#coffees');
-var submitButton = document.querySelector('#submit');
-var roastSelection = document.querySelector('#roast-selection');
+content.innerHTML = renderCoffees(coffees);
 
-tbody.innerHTML = renderCoffees(coffees);
+roastSelection.addEventListener('click', updateCoffees);
+submitButton2.addEventListener('click', addCoffees);
+submitButton.addEventListener('click', searchCoffees);
 
-submitButton.addEventListener('click', updateCoffees);
+// change
diff --git a/style.css b/style.css