diff --git a/index.html b/index.html index 0d5208117..d3a76e407 100644 --- a/index.html +++ b/index.html @@ -3,32 +3,85 @@ + + -

Coffee!

- -
- - + -
+
+ + + + + +
+ + + + + +
+

Add a Coffee

+ +
+ + +
+ +
+ + + + + +
+ +
+ + + + +
+ +
+
+
+ +
+ + + + + - - - - - - - - - -
IDNAMEROAST
+ + diff --git a/main.js b/main.js index 043b24824..66f792705 100644 --- a/main.js +++ b/main.js @@ -1,18 +1,21 @@ "use strict" function renderCoffee(coffee) { - var html = ''; - html += '' + coffee.id + ''; - html += '' + coffee.name + ''; - html += '' + coffee.roast + ''; - html += ''; + //this is responsible for rendering one coffee + let html = '
'; + // html += '' + coffee.id + ''; + html += '

' + coffee.name + '

'; + html += '

' + coffee.roast + '

'; + // html += ''; return html; } function renderCoffees(coffees) { - var html = ''; - for(var i = coffees.length - 1; i >= 0; i--) { + // this is responsible for rendering all of your coffees + let html = ''; + for(let i = coffees.length - 1; i >= 0; i--) { + //this is appending a coffee that is a div in html as an item in our list of coffees html += renderCoffee(coffees[i]); } return html; @@ -20,19 +23,33 @@ function renderCoffees(coffees) { function updateCoffees(e) { e.preventDefault(); // don't submit the form, we just want to update the data - var selectedRoast = roastSelection.value; - var filteredCoffees = []; + //this is getting the value selected from the dropdown + let selectedRoast = roastSelection.value; + + + //this will be the new array of coffees with only my searched values + let filteredCoffees = []; + //this will iterate over our original array that we don't want to display but rather filter our coffees.forEach(function(coffee) { + //if the coffee roast is equal to the selected value if (coffee.roast === selectedRoast) { + //then push this valid coffee into my new array(filteredCoffees) so that this could be displayed in place of the original array + filteredCoffees.push(coffee); + } else if(roastSelection.value === "all"){ filteredCoffees.push(coffee); + } + + + }); + //this section will display/render our coffees in our html tbody.innerHTML = renderCoffees(filteredCoffees); } // from http://www.ncausa.org/About-Coffee/Coffee-Roasts-Guide -var coffees = [ - {id: 1, name: 'Light City', roast: 'light'}, +let 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'}, @@ -48,10 +65,47 @@ var coffees = [ {id: 14, name: 'French', roast: 'dark'}, ]; -var tbody = document.querySelector('#coffees'); -var submitButton = document.querySelector('#submit'); -var roastSelection = document.querySelector('#roast-selection'); +// let coffeeNames= document.querySelector("#name"); + +let tbody = document.querySelector('#coffees'); +let submitButton = document.querySelector('#submit'); +let roastSelection = document.querySelector('#roast-selection'); tbody.innerHTML = renderCoffees(coffees); submitButton.addEventListener('click', updateCoffees); + + + + + +let searchBox = document.getElementById('coffee-name'); +searchBox.addEventListener("keyup", function(){ + + let input = searchBox.value.toUpperCase(); + let filteredCoffees = []; + + + for( let i = 0; i < coffees.length; i++){ + if (coffees[i].name.toUpperCase().includes(input)){ + filteredCoffees.push(coffees[i]) + } + } + console.log(filteredCoffees); + tbody.innerHTML = renderCoffees(filteredCoffees) + +}) + +let addCoffeeButton = document.querySelector('#submit2'); +addCoffeeButton.addEventListener('click', function(e) { + e.preventDefault(); + let coffeeNameInput = document.querySelector('#coffee-name2').value; + let roastLevelInput = document.querySelector('#roast-selection2').value; + let newCoffee = {id: coffees.length + 1, name :coffeeNameInput, roast:roastLevelInput} + coffees.push(newCoffee); + updateCoffees(e) +}); + + + + diff --git a/style.css b/style.css index cd051aae3..cdc38d460 100644 --- a/style.css +++ b/style.css @@ -7,3 +7,64 @@ td, th { border: 1px solid black; padding: 5px 10px; } + +/*.coffee-name{*/ +/* float: right;*/ +/*}*/ + +/*.roast{*/ +/* float: right;*/ +/*}*/ + +.coffee-name, .roast{ + display:flex; + flex-direction: column; + font-family: cursive; + color: darkgoldenrod; +} +p{ + color:lightgray; +} + +h1{ + font-family: fantasy; + color: black; + +} + +#submit{ + background-color: dodgerblue; +} + +#submit2{ + background-color: dodgerblue; +} + +body{ + background-image: url("https://e1.pxfuel.com/desktop-wallpaper/283/645/desktop-wallpaper-squirt-reflection-table-background-coffee-grain-cup-section-%D0%BC%D0%B0%D0%BA%D1%80%D0%BE.jpg"); + background-size: 100%; +} + +.top{ + margin-top: 25px; +} + +i{ + color: darkgoldenrod; +} + +p{ + color: darkgoldenrod; +} + +h4{ + font-family: fantasy; + color: black; + +} +h1{ + color:black; +} +#coffees{ + columns: 2; +}