CodeupClassroom · savannamccauley · Mar 22, 2023 · Mar 22, 2023 · Mar 22, 2023 · Mar 23, 2023
diff --git a/index.html b/index.html
@@ -3,32 +3,85 @@
 <head>
     <meta charset="UTF-8">
     <title></title>
+    <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="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.3/font/bootstrap-icons.css">
     <link rel="stylesheet" href="style.css">
 </head>
 <body>
-    <h1>Coffee!</h1>
-
-    <form>
-        <label for="roast-selection"></label>
-        <select id="roast-selection">
+    <h1 class="text-center top"><i class="bi bi-cup-hot-fill"></i> Coffee!</h1>
+    <hr>
+<!-------------------formmmm----------------------->
+    <div class="container">
+        <div class="row row cols-3">
+            <div class="col">
+                <div>
+    <form class="roast">
+        <label for="roast-selection" > Roast</label>
+        <select class="form-select" id="roast-selection" aria-label="Default select example">
+            <option>all</option>
             <option>light</option>
             <option>medium</option>
             <option>dark</option>
         </select>
-        <input id="submit" type="submit" />
     </form>
+    <form name = "coffee" class="coffee-name">
+        <label for="coffee-name"> Coffee Name</label>
+        <input id="coffee-name" type="text">
+        <input id="submit" type="submit">
+
+
+    </form>
+
+
+                </div>
+
+
+                        <div>
+                            <h1 class="head text-center mt-5">Add a Coffee <i class="bi bi-cup-hot-fill"></i></h1>
+
+                            <form class="roast">
+                                <label for="roast-selection" >Roast</label>
+                                <select class="form-select" id="roast-selection2" aria-label="Default select example">
+                                    <!--            <option selected>all</option>-->
+                                    <option>light</option>
+                                    <option>medium</option>
+                                    <option>dark</option>
+                                </select>
+                            </form>
+
+                            <form name = "coffee" class="coffee-name">
+                                <label for="coffee-name">Name</label>
+                                <input id="coffee-name2" type="text">
+                                <input id="submit2" type="submit">
+
+
+                            </form>
+
+                        </div>
+                    </div>
+
+
+
+<div class="col-6">
+
+    <div>
+        <div id="coffees" class="row" style="width:50%"></div>
+    </div>
+
+</div>
+
+
+        </div>
+    </div>
+
 
-    <table>
-        <thead>
-            <tr>
-                <th>ID</th>
-                <th>NAME</th>
-                <th>ROAST</th>
-            </tr>
-        </thead>
-        <tbody id="coffees"></tbody>
-    </table>
 
     <script src="main.js"></script>
+    <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>
+
 </body>
 </html>
diff --git a/main.js b/main.js
@@ -1,38 +1,55 @@
 "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>';
+    //this is responsible for rendering one coffee
+    let html = '<div class="java">';
+    // html += '<td>' + coffee.id + '</td>';
+    html += '<h4>' + coffee.name + '</h4>';
+    html += '<p>' + coffee.roast + '</p>';
+    // html += '</tr>';
 
     return html;
 }
 
 function renderCoffees(coffees) {
-    var html = '';
-    for(var i = coffees.length - 1; i >= 0; i--) {
+    // this is responsible for rendering all of your coffees
+    let html = '';
+    for(let i = coffees.length - 1; i >= 0; i--) {
+        //this is appending a coffee that is a div in html as an item in our list of coffees
         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 = [];
+    //this is getting the value selected from the dropdown
+    let selectedRoast = roastSelection.value;
+
+
+    //this will be the new array of coffees with only my searched values
+    let filteredCoffees = [];
+    //this will iterate over our original array that we don't want to display but rather filter our
     coffees.forEach(function(coffee) {
+        //if the coffee roast is equal to the selected value
         if (coffee.roast === selectedRoast) {
+            //then push this valid coffee into my new array(filteredCoffees) so that this could be displayed in place of the original array
+            filteredCoffees.push(coffee);
+        } else if(roastSelection.value === "all"){
             filteredCoffees.push(coffee);
+
         }
+
+
+
     });
+    //this section will display/render our coffees in our html
     tbody.innerHTML = renderCoffees(filteredCoffees);
 }
 
 // from http://www.ncausa.org/About-Coffee/Coffee-Roasts-Guide
-var coffees = [
-    {id: 1, name: 'Light City', roast: 'light'},
+let 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'},
@@ -48,10 +65,47 @@ var coffees = [
     {id: 14, name: 'French', roast: 'dark'},
 ];
 
-var tbody = document.querySelector('#coffees');
-var submitButton = document.querySelector('#submit');
-var roastSelection = document.querySelector('#roast-selection');
+// let coffeeNames= document.querySelector("#name");
+
+let tbody = document.querySelector('#coffees');
+let submitButton = document.querySelector('#submit');
+let roastSelection = document.querySelector('#roast-selection');
 
 tbody.innerHTML = renderCoffees(coffees);
 
 submitButton.addEventListener('click', updateCoffees);
+
+
+
+
+
+let searchBox = document.getElementById('coffee-name');
+searchBox.addEventListener("keyup", function(){
+
+    let input = searchBox.value.toUpperCase();
+    let filteredCoffees = [];
+
+
+         for( let i = 0; i < coffees.length; i++){
+             if (coffees[i].name.toUpperCase().includes(input)){
+                 filteredCoffees.push(coffees[i])
+             }
+    }
+    console.log(filteredCoffees);
+    tbody.innerHTML = renderCoffees(filteredCoffees)
+
+})
+
+let addCoffeeButton = document.querySelector('#submit2');
+addCoffeeButton.addEventListener('click', function(e) {
+    e.preventDefault();
+    let coffeeNameInput = document.querySelector('#coffee-name2').value;
+    let roastLevelInput = document.querySelector('#roast-selection2').value;
+    let newCoffee = {id: coffees.length + 1, name :coffeeNameInput, roast:roastLevelInput}
+    coffees.push(newCoffee);
+    updateCoffees(e)
+});
+
+
+
+
diff --git a/style.css b/style.css
@@ -7,3 +7,64 @@ td, th {
     border: 1px solid black;
     padding: 5px 10px;
 }
+
+/*.coffee-name{*/
+/*    float: right;*/
+/*}*/
+
+/*.roast{*/
+/*    float: right;*/
+/*}*/
+
+.coffee-name, .roast{
+    display:flex;
+    flex-direction: column;
+    font-family: cursive;
+    color: darkgoldenrod;
+}
+p{
+    color:lightgray;
+}
+
+h1{
+    font-family: fantasy;
+    color: black;
+
+}
+
+#submit{
+    background-color: dodgerblue;
+}
+
+#submit2{
+    background-color: dodgerblue;
+}
+
+body{
+    background-image: url("https://e1.pxfuel.com/desktop-wallpaper/283/645/desktop-wallpaper-squirt-reflection-table-background-coffee-grain-cup-section-%D0%BC%D0%B0%D0%BA%D1%80%D0%BE.jpg");
+    background-size: 100%;
+}
+
+.top{
+    margin-top: 25px;
+}
+
+i{
+    color: darkgoldenrod;
+}
+
+p{
+    color: darkgoldenrod;
+}
+
+h4{
+    font-family: fantasy;
+    color: black;
+
+}
+h1{
+    color:black;
+}
+#coffees{
+    columns: 2;
+}