gocodeup · annasereno · Oct 16, 2023 · Oct 16, 2023 · Oct 16, 2023 · Oct 16, 2023
diff --git a/img/coffeebeans.jpg b/img/coffeebeans.jpg
diff --git a/img/coffeeshop.jpg b/img/coffeeshop.jpg
diff --git a/index.html b/index.html
@@ -1,34 +1,58 @@
 <!DOCTYPE html>
 <html lang="en">
 <head>
-    <meta charset="UTF-8">
-    <title></title>
-    <link rel="stylesheet" href="style.css">
+	<meta charset="UTF-8">
+	<title>Coffee Project</title>
+	<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>
+	<header>
+		<h1>Jenn & Anna's Coffee!</h1>
+	</header>
+	<hr>
+	<div id="mainContent">
+		<div class="coffees" id="coffees">
+			<div id="coffeeName">NAME</div>
+			<div id="coffeeRoast">ROAST</div>
+		</div>
+		<div id="allCoffeesForms">
+			<form id="allCoffeesForm">
+				<label for="roast-selection">Roast</label>
+				<select id="roast-selection">
+					<option value="all">all</option>
+					<option value="light">light</option>
+					<option value="medium">medium</option>
+					<option value="dark">dark</option>
+				</select>
+				<div id="formInput">
+					<label>Coffee Name</label>
+					<input type="text" id="searchCoffee"
+					       onkeyup="lookupCoffee()">
+				</div>
+				<button id="submit" type="submit">Submit</button>
+			</form>
+			<hr>
+			<div id="addACoffeeFormWrapper" class="form">
+				<h2>Add a Coffee</h2>
+				<form id="newCoffeesForm" >
 
-    <table>
-        <thead>
-            <tr>
-                <th>ID</th>
-                <th>NAME</th>
-                <th>ROAST</th>
-            </tr>
-        </thead>
-        <tbody id="coffees"></tbody>
-    </table>
+					<label for="addACoffeeRoast">Roast</label>
+					<select id="addACoffeeRoast">
+						<option value="light">light</option>
+						<option value="medium">medium</option>
+						<option value="dark">dark</option>
+					</select>
+					<div id="inputCoffee">
+						<label>Name</label>
+						<input type="text" id="newCoffeeName">
+					</div>
+					<button id="submitNewCoffee" type="submit">Submit</button>
+				</form>
+			</div>
+		</div>
+	</div>
+<script src="main.js"></script>
 
-    <script src="main.js"></script>
 </body>
 </html>
diff --git a/main.js b/main.js
@@ -1,11 +1,10 @@
-"use strict"
+"use strict";
 
 function renderCoffee(coffee) {
-    let 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" data-id="${coffee.id}">';
+    html += `<div class="coffeeName">${coffee.name}</div>`;
+    html += `<div class="coffeeRoast">${coffee.roast}</div>`;
+    html += '</div>';
 
     return html;
 }
@@ -18,21 +17,69 @@ function renderCoffees(coffees) {
     return html;
 }
 
+
 function updateCoffees(e) {
     e.preventDefault(); // don't submit the form, we just want to update the data
     const selectedRoast = roastSelection.value;
-    const filteredCoffees = [];
-    coffees.forEach( coffee => {
-        if (coffee.roast === selectedRoast) {
-            filteredCoffees.push(coffee);
-        }
-    });
+    let filteredCoffees = [];
+    if (selectedRoast === 'all') {
+        filteredCoffees = coffees;
+    }
+    else {
+        coffees.forEach( coffee => {
+            if (coffee.roast === selectedRoast) {
+                filteredCoffees.push(coffee);
+            }
+        });
+    }
     tbody.innerHTML = renderCoffees(filteredCoffees);
 }
 
+//First input form
+function lookupCoffee() {
+    let input, filter, txtValue, i;
+    let filteredCoffees = [];
+    // objects = coffees
+    input = document.getElementById('searchCoffee');
+    filter = input.value.toUpperCase();
+
+
+    for (i = 0; i < coffees.length; i++) {
+        txtValue = coffees[i].name;
+        if (txtValue.toUpperCase().indexOf(filter) > -1) {
+            filteredCoffees.push(coffees[i]);
+        }
+        tbody.innerHTML = renderCoffees(filteredCoffees);
+
+    }
+}
+
+
+
+
+const coffeesDiv = document.querySelector("#coffees");
+
+
+
+const addACoffeeSubmitButton=document.querySelector('#submitNewCoffee');
+
+const addCoffeeForm = document.querySelector("#addACoffeeFormWrapper form");
+
+addACoffeeSubmitButton.addEventListener('click', (e) => {
+   e.preventDefault();
+    const addNewCoffeeObject = {
+        id: coffeesDiv.children.length + 1,
+        name: document.querySelector("#newCoffeeName").value,
+        roast: document.querySelector("#addACoffeeRoast").value,
+    }
+    coffees.push(addNewCoffeeObject);
+    tbody.innerHTML = renderCoffees(coffees);
+});
+
+
 // from http://www.ncausa.org/About-Coffee/Coffee-Roasts-Guide
 const coffees = [
-    {id: 1, name: 'Light City', roast: 'light'},
+    {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 +95,14 @@ const coffees = [
     {id: 14, name: 'French', roast: 'dark'},
 ];
 
+
 const tbody = document.querySelector('#coffees');
 const submitButton = document.querySelector('#submit');
 const roastSelection = document.querySelector('#roast-selection');
 
 tbody.innerHTML = renderCoffees(coffees);
 
-submitButton.addEventListener('click', updateCoffees);
+submitButton.addEventListener('click', updateCoffees, lookupCoffee);
+
+coffees.sort();
+
diff --git a/style.css b/style.css
@@ -1,9 +1,89 @@
-table {
-    border-collapse: collapse;
-    margin: 15px 0;
+* {
+    padding: 0;
+    margin: 0;
+    box-sizing: border-box;
 }
 
-td, th {
-    border: 1px solid black;
-    padding: 5px 10px;
+body {
+    margin: 40px;
+    border: 10px;
+    font-family: sans-serif;
+    background-color: #fddec8;
 }
+
+header{
+    text-align: center;
+}
+
+header h1 {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    width: 180px;
+    height: 180px;
+    color: #f1ecec;
+    border-radius: 100%;
+    background-color: #00aba9;
+    border-color: #00aba9;
+    padding: 12px;
+    margin: 30px;
+}
+
+hr {
+    margin-bottom: 20px;
+}
+
+div#mainContent {
+    display: flex;
+    flex-flow:wrap;
+    justify-content: space-between;
+    background-image: url("img/coffeeshop.jpg");
+    background-size: contain;
+    background-repeat: no-repeat;
+    background-position: center;
+}
+
+div.coffeeName{
+    font-size: 2rem;
+    color: #721b1b;
+}
+
+div.coffee div:nth-of-type(2) {
+    font-size: 1.6rem;
+    color: #6f2121b0;
+}
+
+
+h2 {
+    font-size: 2.3rem;
+}
+
+#allCoffeesForms {
+    margin-bottom: 20px;
+    width: 700px;
+    display: inline-flex;
+    flex-direction: column;
+    align-content: stretch;
+    color: #721b1b;
+}
+
+form {
+    font-size: 2rem;
+}
+
+button{
+    margin-bottom: 20px;
+    border: none;
+    padding: 5px;
+    width: 100%;
+    font-size: 1.2rem;
+    background-color: #eadfdf;
+}
+
+
+select, input {
+    margin-bottom: 10px;
+    padding: 8px;
+    width: 100%;
+    font-size: 1.2rem;
+}