diff --git a/.gitignore b/.gitignore new file mode 100644 index 000000000..ff7f85bed --- /dev/null +++ b/.gitignore @@ -0,0 +1,3 @@ +.DS_Store +.idea +*.iml \ No newline at end of file diff --git a/css/style.css b/css/style.css new file mode 100644 index 000000000..b7dde44e7 --- /dev/null +++ b/css/style.css @@ -0,0 +1,23 @@ +@import url('https://fonts.googleapis.com/css2?family=Abel&family=Anton&family=Lato:wght@300&family=Montserrat:wght@400;600&family=Roboto&family=Source+Code+Pro&family=Work+Sans&display=swap'); +* { + font-family: 'Montserrat', sans-serif; +; +} +h1, h3 { + padding-top: .5em; + display: flex; + justify-content: center; +} +select, input { + width: 100%; +} +h1, h3, label { + font-weight: bold; +} +.coffeeName { + font-size: 1.5em; + font-weight: bolder; +} +.light, .medium, .dark { + color: gray; +} \ No newline at end of file diff --git a/img/DarkBeans.jpg b/img/DarkBeans.jpg new file mode 100644 index 000000000..a92ec38bf Binary files /dev/null and b/img/DarkBeans.jpg differ diff --git a/img/LightBeans.jpg b/img/LightBeans.jpg new file mode 100644 index 000000000..f0b1d1777 Binary files /dev/null and b/img/LightBeans.jpg differ diff --git a/img/MeduimBeans.jpg b/img/MeduimBeans.jpg new file mode 100644 index 000000000..e48e5f5c0 Binary files /dev/null and b/img/MeduimBeans.jpg differ diff --git a/img/farm.png b/img/farm.png new file mode 100644 index 000000000..0f82e8fdb Binary files /dev/null and b/img/farm.png differ diff --git a/index.html b/index.html index 0d5208117..c9a3345a7 100644 --- a/index.html +++ b/index.html @@ -2,33 +2,46 @@ - - + + + jwood-r1 Coffee Project + + + + - -

Coffee!

- -
- - - -
- - - - - - - - - - -
IDNAMEROAST
- - + +

Coffee!

+
+
+
+
+
+ + + + + +
+

Add A Coffee

+ + + + + +
+
+
+ + diff --git a/main.js b/main.js index 043b24824..49012514f 100644 --- a/main.js +++ b/main.js @@ -1,37 +1,57 @@ "use strict" - function renderCoffee(coffee) { - var html = ''; - html += '' + coffee.id + ''; - html += '' + coffee.name + ''; - html += '' + coffee.roast + ''; - html += ''; + let html = '
'; + // html += '' + coffee.id + ''; + html += '
'; + // let coffeeItem = + html += '
' + coffee.name + '
'; + html += '
' + coffee.roast + '
'; + html += '
'; + html += '
'; return html; } - function renderCoffees(coffees) { - var html = ''; - for(var i = coffees.length - 1; i >= 0; i--) { + let html = ''; + for(let 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 - var selectedRoast = roastSelection.value; - var filteredCoffees = []; + let selectedRoast = roastSelection.value; + let filteredCoffees = []; coffees.forEach(function(coffee) { if (coffee.roast === selectedRoast) { filteredCoffees.push(coffee); } + if ("all" === selectedRoast) { + filteredCoffees.push(coffee); + } }); - tbody.innerHTML = renderCoffees(filteredCoffees); + content.innerHTML = renderCoffees(filteredCoffees); } - -// from http://www.ncausa.org/About-Coffee/Coffee-Roasts-Guide -var coffees = [ +function addCoffees(value) { + let filteredCoffees = coffees; + let newRoast = addRoastSelection.value; + let newName = addNewCoffee.value; + let newId = coffees.length + 1; + coffees.push({id: newId, name: newName, roast: newRoast}); + content.innerHTML = renderCoffees(filteredCoffees); + // addRoastSelection.value = document.getElementById("add-roast-selection").value = ""; + addNewCoffee.value = document.getElementById('enterNewCoffee').value = ""; +} +function searchCoffees(value) { + let filteredCoffees = []; + for (let i = 0; i < coffees.length; i++) { + if(coffees[i].name.toLowerCase().indexOf(value.toLowerCase()) > -1) { + filteredCoffees.push(coffees[i]); + } + } + content.innerHTML = renderCoffees(searchCoffeesBar); +} +let coffees = [ {id: 1, name: 'Light City', roast: 'light'}, {id: 2, name: 'Half City', roast: 'light'}, {id: 3, name: 'Cinnamon', roast: 'light'}, @@ -47,11 +67,18 @@ var coffees = [ {id: 13, name: 'Italian', roast: 'dark'}, {id: 14, name: 'French', roast: 'dark'}, ]; +let content = document.querySelector('#coffees'); +let submitButton = document.querySelector('#submit1'); +let submitButton2 = document.querySelector('#submit2'); +let roastSelection = document.querySelector('#roast-selection'); +let addRoastSelection = document.querySelector('#add-roast-selection'); +let addNewCoffee = document.querySelector('#enterNewCoffee'); +let searchCoffeesBar = document.getElementById("#enterCoffee"); -var tbody = document.querySelector('#coffees'); -var submitButton = document.querySelector('#submit'); -var roastSelection = document.querySelector('#roast-selection'); +content.innerHTML = renderCoffees(coffees); -tbody.innerHTML = renderCoffees(coffees); +roastSelection.addEventListener('click', updateCoffees); +submitButton2.addEventListener('click', addCoffees); +submitButton.addEventListener('click', searchCoffees); -submitButton.addEventListener('click', updateCoffees); +// change \ No newline at end of file diff --git a/style.css b/style.css deleted file mode 100644 index cd051aae3..000000000 --- a/style.css +++ /dev/null @@ -1,9 +0,0 @@ -table { - border-collapse: collapse; - margin: 15px 0; -} - -td, th { - border: 1px solid black; - padding: 5px 10px; -}