diff --git a/img/coffeebeans.jpg b/img/coffeebeans.jpg new file mode 100644 index 000000000..71c42fe59 Binary files /dev/null and b/img/coffeebeans.jpg differ diff --git a/img/coffeeshop.jpg b/img/coffeeshop.jpg new file mode 100644 index 000000000..d81d41659 Binary files /dev/null and b/img/coffeeshop.jpg differ diff --git a/index.html b/index.html index 0d5208117..2cbe7ccb0 100644 --- a/index.html +++ b/index.html @@ -1,34 +1,58 @@ - - - + + Coffee Project + + -

Coffee!

- -
- - - -
+
+

Jenn & Anna's Coffee!

+
+
+
+
+
NAME
+
ROAST
+
+
+
+ + +
+ + +
+ +
+
+
+

Add a Coffee

+
- - - - - - - - - -
IDNAMEROAST
+ + +
+ + +
+ +
+
+
+
+ - diff --git a/main.js b/main.js index 51df444ff..32dc91a4e 100644 --- a/main.js +++ b/main.js @@ -1,11 +1,10 @@ -"use strict" +"use strict"; function renderCoffee(coffee) { - let html = ''; - html += `${coffee.id}`; - html += `${coffee.name}`; - html += `${coffee.roast}`; - html += ''; + let html = '
'; + html += `
${coffee.name}
`; + html += `
${coffee.roast}
`; + html += '
'; 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 index cd051aae3..aa0f998e1 100644 --- 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; +} \ No newline at end of file