diff --git a/index.html b/index.html index 0d5208117..8ed4808fa 100644 --- a/index.html +++ b/index.html @@ -2,33 +2,54 @@ - + Coffee Shop - - -

Coffee!

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

Coffee!

+
+
+
+
+ +
- + + - + \ No newline at end of file diff --git a/main.js b/main.js index 51df444ff..ccf73818e 100644 --- a/main.js +++ b/main.js @@ -1,18 +1,21 @@ "use strict" function renderCoffee(coffee) { - let html = ''; - html += `${coffee.id}`; - html += `${coffee.name}`; - html += `${coffee.roast}`; - html += ''; + let html = '
'; + html += `

${coffee.id}

`; + html += `

${coffee.name}

`; + html += `

${coffee.roast}

`; + html += '
'; return html; } + +const searchInput = document.querySelector('#coffeeSearch'); + function renderCoffees(coffees) { let html = ''; - for(let i = coffees.length - 1; i >= 0; i--) { + for (let i = coffees.length - 1; i >= 0; i--) { html += renderCoffee(coffees[i]); } return html; @@ -21,16 +24,31 @@ function renderCoffees(coffees) { 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 = []; + coffees.forEach(coffee => { + if (selectedRoast === 'all'){ + filteredCoffees = coffees; + } else { + filteredCoffees = coffees.filter(coffee => coffee.roast === selectedRoast); } }); - tbody.innerHTML = renderCoffees(filteredCoffees); + coffeesList.innerHTML = renderCoffees(filteredCoffees); +} + +function addNewCoffee(e) { + e.preventDefault() + const CoffeeName = document.querySelector('#coffeeName').value; + const CoffeeRoast = document.querySelector('#coffeeRoast').value; + + const newCoffee = { + id: coffees.length + 1, + name: CoffeeName, + roast: CoffeeRoast + }; + coffees.push(newCoffee); + coffeesList.innerHTML = renderCoffees(coffees) } -// from http://www.ncausa.org/About-Coffee/Coffee-Roasts-Guide const coffees = [ {id: 1, name: 'Light City', roast: 'light'}, {id: 2, name: 'Half City', roast: 'light'}, @@ -48,10 +66,30 @@ const coffees = [ {id: 14, name: 'French', roast: 'dark'}, ]; -const tbody = document.querySelector('#coffees'); -const submitButton = document.querySelector('#submit'); +const addCoffeeButton = document.querySelector('#addCoffee'); +const coffeesList = document.querySelector('#coffees'); const roastSelection = document.querySelector('#roast-selection'); +const coffeeSearch = document.querySelector('#coffeeSearch'); +const submitButton = document.querySelector('#submit1'); + +coffeesList.innerHTML = renderCoffees(coffees); +roastSelection.addEventListener("input", updateCoffees); + +addCoffeeButton.addEventListener('click', addNewCoffee); + + +const tbody = document.querySelector('#coffees'); + +const searchbox = document.getElementById('searchroast1'); +searchbox.addEventListener('keydown', () => { + const searchInput = searchbox.value.toUpperCase(); + const filteredCoffees = coffees.filter((coffee) => + coffee.name.toUpperCase().includes(searchInput) + ); + tbody.innerHTML = renderCoffees(filteredCoffees); +}); tbody.innerHTML = renderCoffees(coffees); -submitButton.addEventListener('click', updateCoffees); + + diff --git a/pexels-daria-obymaha-1684151.jpg b/pexels-daria-obymaha-1684151.jpg new file mode 100644 index 000000000..ec928a999 Binary files /dev/null and b/pexels-daria-obymaha-1684151.jpg differ diff --git a/style.css b/style.css index cd051aae3..de7db7a64 100644 --- a/style.css +++ b/style.css @@ -1,9 +1,104 @@ -table { - border-collapse: collapse; - margin: 15px 0; +/* Custom CSS */ +body { + background-image: url("pexels-daria-obymaha-1684151.jpg"); + background-position: center; + background-size: cover; + font-family: Arial, sans-serif; + margin: 0; + padding: 20px; } -td, th { - border: 1px solid black; - padding: 5px 10px; +h1 { + font-family: Jonathan Hetegral, sans-serif; + text-align: center; + color: #333; + font-size: larger; } + +.container { + display: flex; + justify-content: space-between; +} + +.left-side { + flex: 1; + padding-right: 20px; +} + +.right-side { + flex: 1; + + padding: 20px; + border-radius: 5px; + +} + +form { + margin-bottom: 20px; +} + +#coffees { + display: grid; + grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); + gap: 10px; + font-family: Agbalumo, sans-serif; +} + + + +#coffees > div { + border: 1px solid #ccc; + padding: 10px; + border-radius: 5px; + background-color: #f9f9f9; +} + +#coffees > div h5 { + margin-bottom: 5px; +} + +input[type="text"], +select.form-select { + width: 100%; + margin-bottom: 10px; +} + +input[type="submit"] { + width: 100%; + padding: 8px 10px; + border: none; + border-radius: 3px; + background-color: #007bff; + color: #fff; + cursor: pointer; +} + +input[type="submit"]:hover { + background-color: #0056b3; +} +button[type="text"], +select.form-select { + width: 100%; + margin-bottom: 10px; +} + +button[type="submit"] { + width: 100%; + padding: 8px 10px; + border: none; + border-radius: 3px; + background-color: #007bff; + color: #fff; + cursor: pointer; +} + +button[type="submit"]:hover { + background-color: #0056b3; +} + +/* Bootstrap Overrides */ +select.form-select { + appearance: auto; +} + +