gocodeup · Rafagithub135 · May 10, 2022 · May 10, 2022 · May 10, 2022 · May 10, 2022
diff --git a/.idea/.gitignore b/.idea/.gitignore
diff --git a/.idea/coffee-project.iml b/.idea/coffee-project.iml
diff --git a/.idea/misc.xml b/.idea/misc.xml
diff --git a/.idea/modules.xml b/.idea/modules.xml
diff --git a/.idea/vcs.xml b/.idea/vcs.xml
diff --git a/index.html b/index.html
@@ -1,34 +1,64 @@
 <!DOCTYPE html>
 <html lang="en">
 <head>
-    <meta charset="UTF-8">
+    <meta charset="utf-8"/>
+    <meta http-equiv="x-ua-compatible" content="ie=edge"/>
+    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
+    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet"
+          integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
+
     <title></title>
     <link rel="stylesheet" href="style.css">
 </head>
 <body>
-    <h1>Coffee!</h1>
+<div class="container-fluid" style="width: 90%">
+    <h1 class="d-flex justify-content-center">Coffee!</h1>
+    <hr class="color-lightgrey">
+</div>
+<div class="container-fluid d-flex flex-row-reverse" style="width: 90%">
+    <div class="container">
+        <form>
+            <h5 id="roast-heading" class="m-0">Roast</h5>
+            <label for="roast-selection"></label>
+            <select class="w-100 mb-4 border rounded border-3" style="height: 35px" id="roast-selection">
+                <option>all</option>
+                <option>light</option>
+                <option>medium</option>
+                <option>dark</option>
 
-    <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>
+            </select>
+            <h5>Coffee Name</h5>
+            <input class="w-100 mb-4 border rounded border-3 " id="search-text" type="text">
+            <input class="d-block p-2 text-white w-100 rounded border border-none" style="background: cornflowerblue" id="submit" type="submit"/>
+        </form>
+        <hr class="color-lightgrey">
+        <h1 class="d-flex justify-content-center">Add A Coffee</h1>
+        <form>
+            <h5 id="roast" id="roast-heading" class="m-0">Roast</h5>
+            <label for="roast-selection"></label>
+            <select class="w-100 mb-4 border rounded border-3" style="height: 35px" id="roast-selection" >
+                <h5 class="m-0">Roast</h5>
+            <label for="roast-selection"></label>
+                <option>light</option>
+                <option>medium</option>
+                <option>dark</option>
+            </select>
+            <h5>Name</h5>
 
-    <table>
-        <thead>
-            <tr>
-                <th>ID</th>
-                <th>NAME</th>
-                <th>ROAST</th>
-            </tr>
-        </thead>
-        <tbody id="coffees"></tbody>
-    </table>
+            <input class="w-100 mb-4 border rounded border-3 " type="text">
+            <input class="d-block p-2 text-white w-100 rounded border border-none" style="background: cornflowerblue" id="submit" type="submit"/>
+        </form>
+    </div>
+    <div class="container">
+                <h3>NAME</h3>
+                <h3>ROAST</h3>
+        <h4 id="coffees"></h4>
+    </div>
+</div>
+<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>
 
-    <script src="main.js"></script>
 </body>
 </html>
diff --git a/main.js b/main.js
@@ -1,37 +1,50 @@
 "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>';
+    let html = '<tr class="coffee">';
+    html += `<td>${coffee.id}</td>`;
+    html += `<td>${coffee.name}</td>`;
+    html += `<td>${coffee.roast}</td>`;
     html += '</tr>';
-
     return html;
 }
 
 function renderCoffees(coffees) {
-    var html = '';
-    for(var i = coffees.length - 1; i >= 0; i--) {
+    let html = '';
+    for (let i = coffees.length - 1; i >= 0; 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 = [];
-    coffees.forEach(function(coffee) {
+    const selectedRoast = roastSelection.value;
+    const filteredCoffees = [];
+    coffees.forEach(coffee => {
         if (coffee.roast === selectedRoast) {
             filteredCoffees.push(coffee);
+        } else if (selectedRoast === 'all') {
+            filteredCoffees.push(coffee);
         }
     });
     tbody.innerHTML = renderCoffees(filteredCoffees);
 }
 
+function updateSearchCoffees(e) {
+    e.preventDefault(); // don't submit the form, we just want to update the data
+    var updateSearchCoffee = document.getElementById('search-text').value.toLowerCase()
+    var updateSearchCoffees = [];
+    coffees.forEach(function (searchInput) {
+        if (searchInput.name.toLowerCase().includes(updateSearchCoffee)) {
+            updateSearchCoffees.push(searchInput);
+        }
+    });
+    tbody.innerHTML = renderCoffees(updateSearchCoffees);
+}
+
 // from http://www.ncausa.org/About-Coffee/Coffee-Roasts-Guide
-var coffees = [
+const coffees = [
     {id: 1, name: 'Light City', roast: 'light'},
     {id: 2, name: 'Half City', roast: 'light'},
     {id: 3, name: 'Cinnamon', roast: 'light'},
@@ -48,10 +61,13 @@ var coffees = [
     {id: 14, name: 'French', roast: 'dark'},
 ];
 
-var tbody = document.querySelector('#coffees');
-var submitButton = document.querySelector('#submit');
-var roastSelection = document.querySelector('#roast-selection');
+const tbody = document.querySelector('#coffees');
+const submitButton = document.querySelector('#submit');
+const roastSelection = document.querySelector('#roast-selection');
+const searchText = document.querySelector('#search-text');
 
 tbody.innerHTML = renderCoffees(coffees);
 
 submitButton.addEventListener('click', updateCoffees);
+searchText.addEventListener('keyup', updateSearchCoffees)
+document.getElementById("roast-selection").addEventListener('click', updateCoffees)
diff --git a/style.css b/style.css
@@ -7,3 +7,7 @@ td, th {
     border: 1px solid black;
     padding: 5px 10px;
 }
+#roast-heading {
+    position: relative;
+    top: 10px;
+}
diff --git a/up-down-arrows.html b/up-down-arrows.html
@@ -0,0 +1,45 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <title>Title</title>
+</head>
+<body>
+use strict;
+
+$(document).ready(function () {
+window.displayBoxIndex = -1;
+$('#cityresults').on('click', 'a', function () {
+$('#city').val($(this).text());
+$('#cityresults').hide('');
+$('#citygeonameid').val($(this).parent().attr('data-id'));
+return false;
+});
+var Navigate = function (diff) {
+displayBoxIndex += diff;
+var oBoxCollection = $("#cityresults ul li a");
+if (displayBoxIndex >= oBoxCollection.length) {
+displayBoxIndex = 0;
+}
+if (displayBoxIndex < 0) {
+displayBoxIndex = oBoxCollection.length - 1;
+}
+var cssClass = "display_box_hover";
+oBoxCollection.removeClass(cssClass).eq(displayBoxIndex).addClass(cssClass);
+}
+$(document).on('keypress keyup', function (e) {
+if (e.keyCode == 13 || e.keyCode == 32) {
+$('.display_box_hover').trigger('click');
+return false;
+}
+if (e.keyCode == 40) {
+//down arrow
+Navigate(1);
+}
+if (e.keyCode == 38) {
+//up arrow
+Navigate(-1);
+}
+});
+</body>
+</html>