CodeupClassroom · PabloSali · Nov 9, 2022 · Nov 9, 2022 · Nov 9, 2022 · Nov 9, 2022
diff --git a/images/OldPaperBackground.webp b/images/OldPaperBackground.webp
diff --git a/images/american.webp b/images/american.webp
diff --git a/images/breakfast.jpeg b/images/breakfast.jpeg
diff --git a/images/cinnamon-beans.jpg b/images/cinnamon-beans.jpg
diff --git a/images/cinnamon.jpeg b/images/cinnamon.jpeg
diff --git a/images/city.jpeg b/images/city.jpeg
diff --git a/images/coffee-images-all.jpeg b/images/coffee-images-all.jpeg
diff --git a/images/coffeebean.png b/images/coffeebean.png
diff --git a/images/continental.jpeg b/images/continental.jpeg
diff --git a/images/destinguished-gentleman-high-resolution-color-logo.png b/images/destinguished-gentleman-high-resolution-color-logo.png
diff --git a/...estinguished-gentleman-high-resolution-logo-color-on-transparent-background.png b/...estinguished-gentleman-high-resolution-logo-color-on-transparent-background.png
diff --git a/images/espresso-beans.jpg b/images/espresso-beans.jpg
diff --git a/images/espresso.jpeg b/images/espresso.jpeg
diff --git a/images/european.jpeg b/images/european.jpeg
diff --git a/images/fireplace.webp b/images/fireplace.webp
diff --git a/images/french.jpeg b/images/french.jpeg
diff --git a/images/half-city.jpeg b/images/half-city.jpeg
diff --git a/images/hear-espresso-beans.jpg b/images/hear-espresso-beans.jpg
diff --git a/images/high.jpeg b/images/high.jpeg
diff --git a/images/insert-coffee.webp b/images/insert-coffee.webp
diff --git a/images/italian.webp b/images/italian.webp
diff --git a/images/light-city.jpeg b/images/light-city.jpeg
diff --git a/images/new-orleans.jpeg b/images/new-orleans.jpeg
diff --git a/images/roasting-type.jpeg b/images/roasting-type.jpeg
diff --git a/images/vienesse.jpeg b/images/vienesse.jpeg
diff --git a/index.html b/index.html
@@ -3,32 +3,130 @@
 <head>
     <meta charset="UTF-8">
     <title></title>
+
+
+    <!-- Bootstrap CSS only ------------------------------------------->
+    <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=Chivo:ital,wght@0,300;0,400;0,700;0,900;1,300;1,400;1,700;1,900&family=MuseoModerno:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap"
+          rel="stylesheet">
+    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/css/bootstrap.min.css" rel="stylesheet"
+          integrity="sha384-Zenh87qX5JnK2Jl0vWa8Ck2rdkQ2Bzep5IDxbcnCeuOxjzrPF/et3URy9Bv1WTRi" crossorigin="anonymous">
     <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>
-
-    <table>
-        <thead>
-            <tr>
-                <th>ID</th>
-                <th>NAME</th>
-                <th>ROAST</th>
-            </tr>
-        </thead>
-        <tbody id="coffees"></tbody>
-    </table>
+<div class="col-12 d-flex justify-content-center">
+    <h1>Distinguished Gentleman's Coffee</h1>
+</div>
+<nav class="navbar fixed-top p-0">
+    <div class="navbarColor container-fluid flex-nowrap">
+        <!--------------------------------- Nav Bar Title ------------------------------------>
+        <a class="navbar-brand" href="#"><img
+                src="images/destinguished-gentleman-high-resolution-logo-color-on-transparent-background.png"
+                alt="DGC Logo"></a>
+        <div class="d-flex" style="margin-top: 1em">
+            <div class="input-group mb-3" style="width: 15em; height: 3em;">
+                <input id="search-Coffee" type="text" class="form-control" placeholder="Find Your Demitasse"
+                       aria-label="Recipient's username" aria-describedby="button-addon2">
+            </div>
+            <label for="roast-selection"></label>
+            <select id="roast-selection" class="form-select" aria-label="Default select example"
+                    style="width: 50%; height: 3em;">
+                <option id="submit-all">All</option>
+                <option id="submit-light">Light</option>
+                <option id="submit-medium">Medium</option>
+                <option id="submit-dark">Dark</option>
+            </select>
+        </div>
+        <!------------------------------ Open Menu Title ------------------------------------->
+        <div class="offcanvas offcanvas-end text-bg-dark" tabindex="-1" id="offcanvasDarkNavbar"
+             aria-labelledby="offcanvasDarkNavbarLabel">
+            <div class="offcanvas-header">
+                <h5 class="offcanvas-title" id="offcanvasDarkNavbarLabel"> Welcome, how may we assist, good sir? </h5>
+                <button type="button" class="btn-close btn-close-white" data-bs-dismiss="offcanvas"
+                        aria-label="Close"></button>
+            </div>
+            <div class="offcanvas-body">
+                <ul class="navbar-nav justify-content-end flex-grow-1 pe-3">
+                    <!---------------------- First Item in Open Menu ------------------------->
+                    <li class="nav-item">
+                        <a>
+                            <div class="card add-card">
+                                <div class="card-body">
+                                    <form name="searchForm">
+                                        <label for="new-roast-selection" style="color: black"> Be Distinguished. Add to
+                                            the Collection. </label>
+                                        <select id="new-roast-selection" class="form-select"
+                                                aria-label="Default select example">
+                                            <option id="new-submit-light">light</option>
+                                            <option id="new-submit-medium">medium</option>
+                                            <option id="new-submit-dark">dark</option>
+                                        </select>
+                                        <!--                    <input id="new-coffee-name" type="text"-->
+                                        <!--                           name="search" placeholder="New Coffee Name...">-->
+                                        <div class="input-group mb-3">
+                                            <input id="new-coffee-name" type="text" class="form-control"
+                                                   placeholder="" aria-label="Recipient's username"
+                                                   aria-describedby="button-addon2">
+                                            <button class="btn btn-outline-secondary" type="button"
+                                                    id="add-coffee-button"><img src="images/coffeebean.png">
+                                            </button>
+                                        </div>
+                                    </form>
+                                </div>
+                            </div>
+                        </a>
+                    </li>
+                </ul>
+            </div>
+        </div>
+    </div>
+</nav>
+<!------------------------------------ Nav Bar End ------------------------------------------->
+<!--------------------------------- Container ------------------------------------------->
+<div class="container-fluid row">
 
-    <script src="main.js"></script>
+    <div class="row col-8">
+        <!-------- Container for the function that renders coffee cards ------------->
+        <div class="d-flex flex-wrap" id="coffees" style="margin-top: 6em;"></div>
+    </div>
+    <!-- Container that holds -->
+    <!------------------------------------ Cigar Pairing Card ------------------------------------------->
+    <div class="row  justify-content-end col-4">
+        <div class="roast-info">
+            <div class="card-header roast-header justify-content-center d-flex">
+                Know Your Roasts
+            </div>
+            <ul class="list-group list-group-flush roast-pairing-list">
+                <li class="list-group-item"> Light Roast: Light brown in color, this roast is generally preferred for milder coffee varieties. There will be no oil on the surface of these beans because they are not roasted long enough for the oils to break through to the surface.</li>
+                <li class="list-group-item"> Medium Roast: This roast is medium brown in color with a stronger flavor and a non-oily surface. It’s often referred to as the American roast because it is generally preferred in the United States.</li>
+                <li class="list-group-item"> Dark Roast: This roast produces shiny black beans with an oily surface and a pronounced bitterness. The darker the roast, the less acidity will be found in the coffee beverage.  Dark roast coffees run from slightly dark to charred, and the names are often used interchangeably — be sure to check your beans before you buy them!</li>
+            </ul>
+        </div>
+        <div class="card cigar-pairing-box d-flex align-items-center pairing-card">
+            <div class="card-header">
+                Know Your Pairing
+            </div>
+            <ul class="list-group list-group-flush cigar-pairing-list">
+                <li class="list-group-item"> Mild Cigar: Paired best with a Light Roast.</li>
+                <li class="list-group-item"> Medium to Full Body Cigar: Paired best with a Medium Roast</li>
+                <li class="list-group-item"> Rich Full Body Cigar: Paired best with a Dark Roast</li>
+            </ul>
+        </div>
+    </div>
+</div>
+<!----------------------------- Button for the add feature --------------------------------------->
+<div>
+    <button class="navbar-toggler rounded-circle btn-lg add-button" type="button" data-bs-toggle="offcanvas"
+            data-bs-target="#offcanvasDarkNavbar" aria-controls="offcanvasDarkNavbar"
+            style="background-color: chocolate; margin: 2em;">
+        <span class="navbar-toggler-icon" style=" margin: 2.5em"><img src="images/coffeebean.png"></span>
+    </button>
+</div>
+<!-- Bootstrap JavaScript Bundle with Popper ----------------------->
+<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/js/bootstrap.bundle.min.js"
+        integrity="sha384-OERcA2EqjJCMA+/3y+gxIOqMEjwtxJY7qPCqsdltbNJuaOe923+mo//f6V8Qbsw3"
+        crossorigin="anonymous"></script>
+<script src="main.js"></script>
 </body>
 </html>
diff --git a/main.js b/main.js
@@ -1,57 +1,151 @@
 "use strict"
 
+// Creates the initial coffee table by taking in the Coffee Array's objects and organizing them
 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>';
 
-    return html;
+    let coffeeCards = '<div class="card coffeeCard" style="width: 18rem;">';
+    coffeeCards += '<img src="' + coffee.image +'" className="card-img-top" alt="...">';
+    coffeeCards += '<div class="card-body">'
+    coffeeCards += '<h5 class="card-title"> '+ coffee.name +' </h5>'
+    coffeeCards += '<p class="card-text">' + coffee.roast + '</p>'
+    coffeeCards += '</div>'
+    coffeeCards += '</div>'
+
+    return coffeeCards;
 }
 
+// Takes in the filtered Array of objects and adds to the established Coffee Table
 function renderCoffees(coffees) {
-    var html = '';
-    for(var i = coffees.length - 1; i >= 0; i--) {
+    let html = '';
+    for(let i = 0; i < coffees.length; i++) {
+        // if ()
         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 = [];
+//-----Function takes in the input from Roast Selection and updates the Coffee Table's Content-----//
+function updateCoffees() {
+    //------------don't submit the form, we just want to update the data-------------------------//
+    // e.preventDefault();
+
+    //-------------Establishes the criteria to filter the Coffee Table--------------------------//
+    let selectedRoast = roastSelection.value;
+    selectedRoast = selectedRoast.toLowerCase();
+    let input = document.getElementById('search-Coffee').value;
+    input = input.toLowerCase();
+    let filteredCoffees = [];
+
+    //-----------Takes in the Array's criteria and adds it to a new array--------------------------//
     coffees.forEach(function(coffee) {
-        if (coffee.roast === selectedRoast) {
+        if (((coffee.roast === selectedRoast) || (selectedRoast === 'all')) && (coffee.name.toLowerCase().includes(input))){
             filteredCoffees.push(coffee);
         }
     });
     tbody.innerHTML = renderCoffees(filteredCoffees);
 }
 
+// ------------------- Add to Coffee Object-----------------------------//
+
+
 // from http://www.ncausa.org/About-Coffee/Coffee-Roasts-Guide
-var 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'},
+let coffees = [
+    {id: 101, name: 'Light City', roast: 'light', image: 'images/light-city.jpeg'},
+    {id: 102, name: 'Half City', roast: 'light', image: 'images/half-city.jpeg'},
+    {id: 103, name: 'Cinnamon', roast: 'light', image: 'images/cinnamon-beans.jpg'},
+    {id: 201, name: 'City', roast: 'medium', image: 'images/city.jpeg'},
+    {id: 202, name: 'American', roast: 'medium', image: 'images/american.webp'},
+    {id: 203, name: 'Breakfast', roast: 'medium', image: 'images/breakfast.jpeg'},
+    {id: 301, name: 'High', roast: 'dark', image: 'images/high.jpeg'},
+    {id: 302, name: 'Continental', roast: 'dark', image: 'images/continental.jpeg'},
+    {id: 303, name: 'New Orleans', roast: 'dark', image: 'images/new-orleans.jpeg'},
+    {id: 304, name: 'European', roast: 'dark', image: 'images/european.jpeg'},
+    {id: 305, name: 'Espresso', roast: 'dark', image: 'images/hear-espresso-beans.jpg'},
+    {id: 306, name: 'Viennese', roast: 'dark', image: 'images/vienesse.jpeg'},
+    {id: 307, name: 'Italian', roast: 'dark', image: 'images/italian.webp'},
+    {id: 308, name: 'French', roast: 'dark', image: 'images/french.jpeg'},
 ];
 
-var tbody = document.querySelector('#coffees');
-var submitButton = document.querySelector('#submit');
-var roastSelection = document.querySelector('#roast-selection');
+function pullFromLocalStorage(){
+    let localStorageCoffees = JSON.parse(localStorage.getItem('newCoffees'));
+
+    if (localStorageCoffees == null) {
+        localStorage.setItem('newCoffees', JSON.stringify(localStorageCoffeeArray));
+    } else {
+        localStorageCoffees.forEach(function (coffee) {
+            coffees.push(coffee);
+
+        })
+    }
+    updateCoffees();
+    console.log(localStorageCoffees);
+    console.log(coffees);
+}
+
+
+
+let localStorageCoffeeArray = JSON.parse(localStorage.getItem('newCoffees'));
+
+//----------------------------creates new coffee obj-------------------
+function createCoffee(){
+    let newCoffeeInput = document.getElementById('new-coffee-name').value;
+    let newCoffeeRoast = document.querySelector('#new-roast-selection').value;
+    let newCoffeeObj = {};
+
+
+    newCoffeeObj.id = '';
+    newCoffeeObj.name = newCoffeeInput;
+    newCoffeeObj.roast = newCoffeeRoast;
+    newCoffeeObj.image = 'images/insert-coffee.webp';
+    coffees.push(newCoffeeObj);
+    localStorageCoffeeArray.push(newCoffeeObj);
+    localStorage.setItem('newCoffees', JSON.stringify(localStorageCoffeeArray));
+    updateCoffees();
+}
 
+
+
+//------------- Creates Variable that holds Coffee Cards in html format for later display ---------//
+let tbody = document.querySelector('#coffees');
+
+//-------- Creates Variable that holds user selection for Roast Type (Dark, Medium, Light) and created listener that Filters and Updates Coffee Cards based on Roast Selection-------//
+let roastSelection = document.querySelector('#roast-selection');
+roastSelection.addEventListener('change', updateCoffees);
+
+//--------------- Adds filtered Coffee Cards to the HTML document for display --------------------//
 tbody.innerHTML = renderCoffees(coffees);
 
-submitButton.addEventListener('click', updateCoffees);
+
+//---------------- Created variable for coffee searchbar input and created listener that Filters coffee card list based on coffee search bar---------------------------------//
+let coffeeInput = document.getElementById('search-Coffee');
+coffeeInput.addEventListener('keyup', updateCoffees);
+
+//------------------ runs create coffee function when button is pressed-----------------------//
+let addCoffeeBtn = document.getElementById('add-coffee-button');
+addCoffeeBtn.addEventListener('click', createCoffee);
+
+
+window.addEventListener('load', pullFromLocalStorage);
+/*-----------------------------------------------------------------------------------------------
+
+
+Skeleton:
+
+User Search
+        - Get attribute from form ###############################################
+        - Take attribute and search again known coffees ############################
+
+create user input form that creates new coffee cards
+        - Create 3 variables to count dark, medium, and light roasts
+        - Set each variable equal to a function that runs through the 'Coffees' array and counts the number of
+          instances each category appears
+        - Make newly inputted coffee's IDs = to variable counter + 1
+
+
+
+Design the site, make it perty
+    - Change Similar Variables so its less confusing
+    - Organize Global Variables
+    - Make search bar update on typing or have a better button system
+
+ */