CodeupClassroom · michaelsatterfield · Aug 28, 2020 · Aug 28, 2020 · Aug 28, 2020 · Aug 28, 2020
diff --git a/images/chalkboard-or-blackboard.jpg b/images/chalkboard-or-blackboard.jpg
diff --git a/images/coffee roasting gif.gif b/images/coffee roasting gif.gif
diff --git a/images/coffeeRoasterVideo.mp4 b/images/coffeeRoasterVideo.mp4
diff --git a/images/gif-roasting-better.gif b/images/gif-roasting-better.gif
diff --git a/images/invoicepdf.pdf b/images/invoicepdf.pdf
diff --git a/images/jon-tyson-pEGyLHAPfVw-unsplash.jpg b/images/jon-tyson-pEGyLHAPfVw-unsplash.jpg
diff --git a/images/math-6GDW9BVdmkw-unsplash.jpg b/images/math-6GDW9BVdmkw-unsplash.jpg
diff --git a/images/mike-kenneally-TD4DBagg2wE-unsplash.jpg b/images/mike-kenneally-TD4DBagg2wE-unsplash.jpg
diff --git a/images/mike-kenneally-zlwDJoKTuA8-unsplash.jpg b/images/mike-kenneally-zlwDJoKTuA8-unsplash.jpg
diff --git a/images/nathan-dumlao-KixfBEdyp64-unsplash.jpg b/images/nathan-dumlao-KixfBEdyp64-unsplash.jpg
diff --git a/images/pablo-merchan-montes-SCbq6uKCyMY-unsplash.jpg b/images/pablo-merchan-montes-SCbq6uKCyMY-unsplash.jpg
diff --git a/images/patryk-gauza-vs0tzSHVcac-unsplash.jpg b/images/patryk-gauza-vs0tzSHVcac-unsplash.jpg
diff --git a/images/tyler-nix-BYGuAQWHdVM-unsplash.jpg b/images/tyler-nix-BYGuAQWHdVM-unsplash.jpg
diff --git a/index.html b/index.html
@@ -2,33 +2,85 @@
 <html lang="en">
 <head>
     <meta charset="UTF-8">
-    <title></title>
+    <title>Coffee Roasters</title>
+    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.14.0/css/all.css" integrity="sha384-HzLeBuhoNPvSl5KYnjx0BT+WB0QEEqLprO+NBkkk5gbc67FTaL7XIGa2w1L0Xbgc" crossorigin="anonymous">
+    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous">
     <link rel="stylesheet" href="style.css">
 </head>
 <body>
-    <h1>Coffee!</h1>
+<header class="jumbotron jumbotron-fluid text-center">
+<div id="h1">
+    <h1 class="text-center">Coffee Roasters</h1>
+</div>
+</header>
+<main class="row mx-5">
 
-    <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>
+    <!--User Inputs-->
+    <section class="col-sm-12 col-md-6  col-lg-4">
+        <div>
+            <!--Filter Coffees-->
 
-    <table>
-        <thead>
-            <tr>
-                <th>ID</th>
-                <th>NAME</th>
-                <th>ROAST</th>
-            </tr>
-        </thead>
-        <tbody id="coffees"></tbody>
-    </table>
+            <form class="w-100">
+                <label for="roast-selection"><h4 class="w-100">Find your favorite coffee roast</h4></label>
+                <select id="roast-selection" class="w-100">
+                    <option> All</option>
+                    <option>light</option>
+                    <option>medium</option>
+                    <option>dark</option>
+                </select>
+                <input id="submit" type="submit" class="w-100"/>
+                <input type="text" id="filterCoffees" placeholder=" search coffee" class="w-100">
 
-    <script src="main.js"></script>
+            </form>
+            <hr>
+            <!--Add a Coffee-->
+
+            <form class="w-100">
+                <label for="addRoast"><h4 class="w-100">Create your own roast!</h4></label>
+                <input type="text" placeholder="coffee name" id="addRoast" class="w-100">
+                <select id="add-roast" class="w-100">
+                    <option>light</option>
+                    <option>medium</option>
+                    <option>dark</option>
+                </select>
+
+                <input id="createSubmit" type="submit" class="w-100"/>
+            </form>
+        </div>
+    </section>
+    <div class="col-sm-12 col-md-6 col-lg-4">
+        <div id="chalkBoard" class="w-100">
+            <div id="coffees" class="w-100 d-flex flex-column"></div>
+        </div>
+    </div>
+    <div class="roasterPic d-md-none d-lg-block col-lg-4">
+    <img src="images/tyler-nix-BYGuAQWHdVM-unsplash.jpg" width="100%">
+    </div>
+<!--    <div class="col-sm-0 col-md-3  mx-5"></div>-->
+</main>
+<footer id="footer" class="row">
+    <div class="col-4 mt-3 p-0">
+        <p class="pl-4">Coffee Roasters <br>
+        1234 Coffee Ave. <br>
+        San Antonio, Tx 78250</p>
+    </div>
+    <div class="col-4 mt-3 p-0">
+        <ul>
+            <li><a href="mailto:michael.f.satterfield@gmail.com">contact</a></li>
+            <li><a href="#">about</a></li>
+            <li><a href="#">become a vendor</a></li>
+        </ul>
+    </div>
+    <div class="col-4 d-flex justify-content-center align-items-center p-0">
+        <a href=""><i class="fab fa-facebook-square m-3"></i></a>
+        <a href=""><i class="fab fa-twitter-square m-3"></i></a>
+        <a href=""><i class="fab fa-instagram m-3"></i></a>
+    </div>
+</footer>
+
+<script src="main.js"></script>
+<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
+<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
+<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js" integrity="sha384-B4gt1jrGC7Jh4AgTPSdUtOBvfO8shuf57BaghqFfPlYxofvL8/KUEfYiJOMMV+rV" crossorigin="anonymous"></script>
 </body>
 </html>
diff --git a/main.js b/main.js
@@ -1,44 +1,72 @@
 "use strict"
-
+//populates coffee list on html***
 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>';
-
+    var html = '<div class="coffee d-flex flex-column align-items-center">';
+    // html += '<div>' + coffee.id + '</>';
+    html += '<div class="mx-4 pt-2">' + '<h3>' + coffee.name + '</h3>' + '</div>';
+    html += '<div class="pb-2 font-">' + coffee.roast + '</div>';
+    html += '</div>';
     return html;
 }
 
 function renderCoffees(coffees) {
     var html = '';
-    for(var i = coffees.length - 1; i >= 0; i--) {
+    for(var 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
+//updates coffee list!*******
+var updateCoffees = function() {
+    // e.preventDefault(); // don't submit the form, we just want to update the data
+
     var selectedRoast = roastSelection.value;
     var filteredCoffees = [];
     coffees.forEach(function(coffee) {
-        if (coffee.roast === selectedRoast) {
+        if (coffee.roast === selectedRoast || selectedRoast === 'All') {
             filteredCoffees.push(coffee);
         }
     });
     tbody.innerHTML = renderCoffees(filteredCoffees);
 }
 
+//searches non-case sensitive for coffees in list******
+function searchCoffees(){
+    console.log('I work.')
+    var filteredCoffees = [];
+    coffees.forEach(function (coffee){
+        if(coffee.name.toLowerCase().includes(selectedCoffee.value.toLowerCase())){
+            filteredCoffees.push(coffee);
+        }
+        tbody.innerHTML = renderCoffees(filteredCoffees);
+    });
+}
+
+
+//adds to array of objects
+var newCoffee = function (name, type) {
+    var selectedRoast = roastType.value;
+    var coffeeName = newCoffeeName.value;
+    var coffeeID = coffees.length + 1;
+    var coffeeObj = {id: coffeeID, name: coffeeName, roast: selectedRoast}
+    coffees.push(coffeeObj)
+    console.log(localStorage.getItem('coffees').toUpperCase())
+    localStorage.removeItem('coffees')
+    localStorage.setItem('coffees', JSON.stringify(coffees))
+}
+
+
+
 // 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: 1, name: 'Afternoon', roast: 'light'},
+    {id: 2, name: 'Mountain View', roast: 'light'},
     {id: 3, name: 'Cinnamon', roast: 'light'},
-    {id: 4, name: 'City', roast: 'medium'},
+    {id: 4, name: 'Nicaraguan', roast: 'medium'},
     {id: 5, name: 'American', roast: 'medium'},
     {id: 6, name: 'Breakfast', roast: 'medium'},
-    {id: 7, name: 'High', roast: 'dark'},
+    {id: 7, name: 'Costa Rican', roast: 'dark'},
     {id: 8, name: 'Continental', roast: 'dark'},
     {id: 9, name: 'New Orleans', roast: 'dark'},
     {id: 10, name: 'European', roast: 'dark'},
@@ -48,10 +76,42 @@ var coffees = [
     {id: 14, name: 'French', roast: 'dark'},
 ];
 
-var tbody = document.querySelector('#coffees');
-var submitButton = document.querySelector('#submit');
-var roastSelection = document.querySelector('#roast-selection');
-
+//getting info from HTML*******
+var selectedCoffee = document.getElementById('filterCoffees')
+var tbody = document.getElementById('coffees');
+var submitButton = document.getElementById('submit');
+var roastSelection = document.getElementById('roast-selection');
+var newCoffeeSubmit = document.getElementById('createSubmit');
 tbody.innerHTML = renderCoffees(coffees);
 
+
+//event listener for search coffee****
 submitButton.addEventListener('click', updateCoffees);
+selectedCoffee.addEventListener('keyup', searchCoffees);
+
+
+//creat coffee event listener*********
+var roastType = document.getElementById('add-roast');
+var newCoffeeName = document.getElementById("addRoast");
+
+newCoffeeSubmit.addEventListener('click', function(e){
+    e.preventDefault();
+    if(newCoffeeName !== " ") {
+        newCoffee(newCoffeeName.value, roastType.value);
+        updateCoffees();
+    }
+});
+
+
+//gets items from local storage*******
+window.onload = () =>{
+    if (!(localStorage.getItem('coffees') === null)){
+        coffees = JSON.parse(localStorage.getItem('coffees'));
+        updateCoffees()
+        console.log('coffees loaded')
+    } else {
+        localStorage.setItem('coffees', JSON.stringify(coffees));
+
+        console.log('coffees created')
+    }
+}
diff --git a/style.css b/style.css
@@ -1,9 +1,115 @@
-table {
-    border-collapse: collapse;
-    margin: 15px 0;
+@import url('https://fonts.googleapis.com/css2?family=Gochi+Hand&family=Just+Another+Hand&display=swap');
+/*font-family: 'Gochi Hand', cursive;*/
+/*font-family: 'Just Another Hand', cursive;*/
+* {
+    /*display: inline-block;*/
+    /*margin: 0;*/
+    /*border: solid lightgray .5px;*/
+    padding: 0;
+    /*align-content: center;*/
+    font-family: 'Gochi Hand', cursive;
 }
 
-td, th {
-    border: 1px solid black;
-    padding: 5px 10px;
+body {
+    background-image: url("images/patryk-gauza-vs0tzSHVcac-unsplash.jpg");
 }
+
+.jumbotron {
+    /*background: #f4dfbdd1; !important;*/
+    background-image: url("images/gif-roasting-better.gif");
+    background-repeat: no-repeat;
+    background-size: cover;
+    background-position: bottom;
+    opacity: 80%;
+    border-bottom: black solid 3px;
+}
+
+h4 {
+    color: #f4dfbd; !important;
+}
+
+
+#submit, #createSubmit {
+    background: #764520;
+    border-radius: 5px;
+    margin-top: .25em;
+}
+
+#filterCoffees, #addRoast {
+    height: 3em;
+    border-radius: 5px;
+    margin-top: .25em;
+}
+
+
+#createSubmit {
+    background: #764520;
+    border-radius: 5px;
+    margin-bottom: 5px;
+}
+
+.row {
+    margin: 0;
+}
+#chalkBoard {
+    border: solid #764520 10px;
+    background-image: url("images/chalkboard-or-blackboard.jpg");
+    color: whitesmoke; !important;
+    letter-spacing: 4px;
+    border-radius: 5px;
+    height: 640px;
+    overflow: auto;
+}
+
+#roast-selection, #add-roast {
+    background: #f4dfbdd1; !important;
+    border-radius: 5px;
+}
+
+#add-roast {
+    margin-top: 5px;
+}
+
+img {
+    margin-top: 2em;
+    border-radius: 10px;
+
+}
+
+#h1 {
+    background: #f4dfbdd1 ;
+    border-radius:45%;
+    width: 300px;
+    margin-left: 1.5em;
+}
+
+#footer {
+    margin-top: 3em;
+    min-height: 100px;
+    color: whitesmoke; !important;
+    background-image: url("images/chalkboard-or-blackboard.jpg");
+    border-top: black solid 3px;
+}
+
+a {
+    color: whitesmoke; !important;
+}
+
+ul {
+    list-style: none;
+    text-align: center;
+}
+
+a:visited {
+    color: gray;
+}
+
+
+a:hover {
+    color: #764520;
+}
+
+
+i {
+    height: 20px;
+}