diff --git a/CSS/style.css b/CSS/style.css new file mode 100644 index 000000000..611145083 --- /dev/null +++ b/CSS/style.css @@ -0,0 +1,69 @@ + +body { + background-image: url("Img/coffee.jpg"); + background-size: cover; + background-repeat: no-repeat; + background-attachment: fixed; + margin: 0; + padding: 0; + font-family: 'Merriweather Sans', sans-serif; + +} + +nav { + background-color: #FFDAB9; +} + +/*HIDING SPECIFIC ID'S AND THE ID NUMBERS THEMSELVES HERE*/ +#coffees td:first-child { + display: none; +} + +#coffee-id { + display: none; +} + + +.card { + max-block-size: max-content; +} + +.card-body { + font-size: x-large; + background-color: blanchedalmond; + color: #EADDCA; + opacity: .7; + +} +section { + color: black; +} +#coffee-pour { + bottom: 4px; + right: 4px; + position: fixed; + width: 30em; +} + +form { + display: inline-table; +} + +.roast-label { + font-size: x-large; +} +#roast-selection { + margin-bottom: 13px; +} + +.mini-card-div { + min-height: 120px; +} + +.mini-card-body { + width: 300px; + margin-left: 25px; +} +#coffee-pour { + z-index: -1; +} \ No newline at end of file diff --git a/Img/coffee.jpg b/Img/coffee.jpg new file mode 100644 index 000000000..b1ee20959 Binary files /dev/null and b/Img/coffee.jpg differ diff --git a/Img/coffee2.jpg b/Img/coffee2.jpg new file mode 100644 index 000000000..dec656ca1 Binary files /dev/null and b/Img/coffee2.jpg differ diff --git a/Img/pouring-coffee.gif b/Img/pouring-coffee.gif new file mode 100644 index 000000000..19a534ccc Binary files /dev/null and b/Img/pouring-coffee.gif differ diff --git a/JS/main.js b/JS/main.js new file mode 100644 index 000000000..55ff3c785 --- /dev/null +++ b/JS/main.js @@ -0,0 +1,118 @@ +"use strict" +// ADDED A COUNTER TO ALLOW INCREMENTING OF ID +let counter = 15; + +function renderCoffee(coffee) { + let html = '
'; + // ADDED COUNTER TO INCREMENT ON NEW COFFEES, OR TO CALL EXISTING ID'S ON CURRENT COFFEES + html += `

${coffee.id || counter++}

`; + html += `

${coffee.name}

`; + html += `

${coffee.roast}

`; //p tag + html += '
'; //div + + return html; +} + +function renderCoffees(coffees) { + let html = ''; + for (let i = coffees.length - 1; i >= 0; i--) { + html += renderCoffee(coffees[i]); + } + return html; +} + + +// CHECKING IF AN OPTION IS ALL ROASTS, IF SO WILL DISPLAY ALL ROASTS +// ADDED AN IF STATEMENT FOR CHECKING FOR ALL ROASTS FIRST THEN CONTINUE WITH THE FUNCTION +// NOT SURE IF THERE'S A NICER WAY TO SHOW THIS +function updateCoffees(e) { + e.preventDefault(); // don't submit the form, we just want to update the data + const selectedRoast = roastSelection.value; + if (selectedRoast === "All Roasts") { + section.innerHTML = renderCoffees(coffees); + } else { + const filteredCoffees = []; + coffees.forEach(coffee => { + if (coffee.roast === selectedRoast) { + filteredCoffees.push(coffee); + section.innerHTML = renderCoffees(filteredCoffees); + } + }); + section.innerHTML = renderCoffees(filteredCoffees); + + } +} + +// 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'}, + {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'}, +]; + +// SEARCH BAR CODE TO MAKE IT CASE INSENSITIVE WHEN LOOKING FOR A PARTICULAR BREW + +const searchBar = document.getElementById("coffee-name"); + +searchBar.addEventListener("input", function () { + const searchTerm = this.value.toLowerCase(); + const resultsList = coffees.filter(coffee => coffee.name.toLowerCase().includes(searchTerm)); + + section.innerHTML = renderCoffees(resultsList); +}); + + +// Function to add a new coffee +// FUNCTION IS CREATING A NEW ELEMENT AND APPENDING TO HTML, NEEDS TO PUSH NEW COFFEE TO EXISTING COFFEES LIST +function addNewCoffee() { + // Get input values + const newCoffeeName = document.getElementById('newCoffeeName').value; + const newCoffeeRoast = document.getElementById('newCoffeeRoast').value; + + // Validate input values + if (newCoffeeName === "" || newCoffeeRoast === "") { + alert("Please enter both coffee name and roast type."); + return; + } + + // Create a new coffee object + const newCoffee = { + id: counter++, + name: newCoffeeName, + roast: newCoffeeRoast + }; + + // Add the new coffee to the coffees array + coffees.push(newCoffee); + + // Render the updated list of coffees + section.innerHTML = renderCoffees(coffees); + + // Clear input fields + document.getElementById('newCoffeeName').value = ""; + document.getElementById('newCoffeeRoast').value = ""; + +} + + +const section = document.querySelector('#coffees'); +const submitButton = document.querySelector('#submit'); +const roastSelection = document.querySelector('#roast-selection'); + +section.innerHTML = renderCoffees(coffees); + +submitButton.addEventListener('click', updateCoffees); + +//============================================================// + diff --git a/index.html b/index.html index 0d5208117..4b6e37bef 100644 --- a/index.html +++ b/index.html @@ -2,33 +2,125 @@ - - + Black Bean Coffee + + + + + - -

Coffee!

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

Available Selection

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

+ +

+
+
+
+ Perhaps there's a different option you were looking for, what might that be? - +
+
+ + +
+
+ + +
+ +
+
+
+
+
+
+ + + + + + coffee pour + +
+ + + diff --git a/main.js b/main.js deleted file mode 100644 index 51df444ff..000000000 --- a/main.js +++ /dev/null @@ -1,57 +0,0 @@ -"use strict" - -function renderCoffee(coffee) { - let html = ''; - html += `${coffee.id}`; - html += `${coffee.name}`; - html += `${coffee.roast}`; - html += ''; - - return html; -} - -function renderCoffees(coffees) { - let html = ''; - for(let i = coffees.length - 1; i >= 0; i--) { - html += renderCoffee(coffees[i]); - } - 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); - } - }); - tbody.innerHTML = renderCoffees(filteredCoffees); -} - -// 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'}, - {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'); -const roastSelection = document.querySelector('#roast-selection'); - -tbody.innerHTML = renderCoffees(coffees); - -submitButton.addEventListener('click', updateCoffees); 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; -}