diff --git a/css/style.css b/css/style.css new file mode 100644 index 000000000..c200fed62 --- /dev/null +++ b/css/style.css @@ -0,0 +1,25 @@ +html, body { + width: 100%; + height:100%; +} + +body { + background: linear-gradient(-45deg, #ece0d1, #dbc1ac, #967259, #634832); + background-size: 400% 400%; + animation: gradient 13s ease infinite; +} + +@keyframes gradient { + 0% { + background-position: 0% 50%; + } + 50% { + background-position: 100% 50%; + } + 100% { + background-position: 0% 50%; + } +} + + + diff --git a/images/coffeeBeans.jpeg b/images/coffeeBeans.jpeg new file mode 100644 index 000000000..3407e8035 Binary files /dev/null and b/images/coffeeBeans.jpeg differ diff --git a/index.html b/index.html index 0d5208117..e6385cf88 100644 --- a/index.html +++ b/index.html @@ -1,34 +1,97 @@ + - + + -

Coffee!

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

Select Your Coffee

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

Add New Coffee

+ + + +
+ + + + +
+
+
+
+ + + - + \ No newline at end of file diff --git a/main.js b/main.js index 51df444ff..c4f7c3a03 100644 --- a/main.js +++ b/main.js @@ -1,57 +1,120 @@ -"use strict" +"use strict"; function renderCoffee(coffee) { - let html = ''; - html += `${coffee.id}`; - html += `${coffee.name}`; - html += `${coffee.roast}`; - html += ''; + let coffeeDiv = document.createElement('div'); + coffeeDiv.classList.add('col-6', 'col-md-4', 'coffee'); - return html; -} + // Apply styles based on roast type + switch (coffee.roast) { + case 'light': + coffeeDiv.style.backgroundColor = '#ece0d1'; + break; + case 'medium': + coffeeDiv.style.backgroundColor = '#dbc1ac'; + break; + case 'dark': + coffeeDiv.style.backgroundColor = '#967259'; + break; + default: + coffeeDiv.style.backgroundColor = '#ece0d1'; // Default to light roast color + } + + coffeeDiv.style.border = '1px solid #38220f'; + coffeeDiv.style.margin = '0.5em'; + coffeeDiv.style.width = '12em'; + let typeParagraph = document.createElement('p'); + typeParagraph.textContent = `Type: ${coffee.name}`; + coffeeDiv.appendChild(typeParagraph); + + let roastParagraph = document.createElement('p'); + roastParagraph.textContent = `Roast: ${coffee.roast}`; + coffeeDiv.appendChild(roastParagraph); + + return coffeeDiv; +} function renderCoffees(coffees) { - let html = ''; - for(let i = coffees.length - 1; i >= 0; i--) { - html += renderCoffee(coffees[i]); - } - return html; + let coffeesContainer = document.querySelector('#coffees'); + coffeesContainer.innerHTML = ''; // Clear previous content + + coffees.forEach(coffee => { + let coffeeDiv = renderCoffee(coffee); + coffeesContainer.appendChild(coffeeDiv); + }); } -function updateCoffees(e) { - e.preventDefault(); // don't submit the form, we just want to update the data +function updateCoffees() { const selectedRoast = roastSelection.value; - const filteredCoffees = []; - coffees.forEach( coffee => { - if (coffee.roast === selectedRoast) { - filteredCoffees.push(coffee); - } - }); - tbody.innerHTML = renderCoffees(filteredCoffees); + const searchTerm = searchInput.value.toLowerCase(); + let filteredCoffees = coffees; + + // Filter by selected roast + if (selectedRoast !== 'all') { + filteredCoffees = filteredCoffees.filter(coffee => coffee.roast === selectedRoast); + } + + // Filter by search term + if (searchTerm.trim() !== '') { + filteredCoffees = filteredCoffees.filter(coffee => coffee.name.toLowerCase().includes(searchTerm)); + } + + // Render the filtered coffees + renderCoffees(filteredCoffees); +} + +function addCoffee() { + const newName = newCoffeeName.value.trim(); + const newRoast = newCoffeeRoast.value; + + if (newName !== '' && newRoast) { + const newCoffee = { + name: newName, + roast: newRoast, + }; + + // Add the new coffee to the array + coffees.push(newCoffee); + + // Render the updated coffees + renderCoffees(coffees); + + // Clear the form inputs + newCoffeeName.value = ''; + newCoffeeRoast.value = 'light'; + } } -// from http://www.ncausa.org/About-Coffee/Coffee-Roasts-Guide +// Coffee data array const 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'}, - {id: 5, name: 'American', roast: 'medium'}, - {id: 6, name: 'Breakfast', roast: 'medium'}, - {id: 7, name: 'High', roast: 'dark'}, - {id: 8, name: 'Continental', roast: 'dark'}, - {id: 9, name: 'New Orleans', roast: 'dark'}, - {id: 10, name: 'European', roast: 'dark'}, - {id: 11, name: 'Espresso', roast: 'dark'}, - {id: 12, name: 'Viennese', roast: 'dark'}, - {id: 13, name: 'Italian', roast: 'dark'}, - {id: 14, name: 'French', roast: 'dark'}, + { 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' }, + { id: 5, name: 'American', roast: 'medium' }, + { id: 6, name: 'Breakfast', roast: 'medium' }, + { id: 7, name: 'High', roast: 'dark' }, + { id: 8, name: 'Continental', roast: 'dark' }, + { id: 9, name: 'New Orleans', roast: 'dark' }, + { id: 10, name: 'European', roast: 'dark' }, + { id: 11, name: 'Espresso', roast: 'dark' }, + { id: 12, name: 'Viennese', roast: 'dark' }, + { id: 13, name: 'Italian', roast: 'dark' }, + { id: 14, name: 'French', roast: 'dark' }, ]; -const tbody = document.querySelector('#coffees'); -const submitButton = document.querySelector('#submit'); +// Initial render +renderCoffees(coffees); + + +// Event handling const roastSelection = document.querySelector('#roast-selection'); +const searchInput = document.querySelector('#search'); +const newCoffeeName = document.querySelector('#new-coffee-name'); +const newCoffeeRoast = document.querySelector('#new-coffee-roast'); +const addCoffeeButton = document.querySelector('#add-coffee'); -tbody.innerHTML = renderCoffees(coffees); +roastSelection.addEventListener('change', updateCoffees); // Changed 'input' to 'change' for immediate update +searchInput.addEventListener('input', updateCoffees); +addCoffeeButton.addEventListener('click', addCoffee); -submitButton.addEventListener('click', updateCoffees); +// ... \ 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; -}