diff --git a/CSS/style.css b/CSS/style.css new file mode 100644 index 000000000..a709d27c0 --- /dev/null +++ b/CSS/style.css @@ -0,0 +1,244 @@ +body { + position: relative; +} + +body::before { + content: ""; + position: fixed; + top: 0; + left: 0; + width: 100%; + height: 100%; + background-image: url("../img/coffee.jpg"); + background-repeat: no-repeat; + background-size: cover; + opacity: 0.5; + z-index: -1; +} + +h1 { + font-family: "American Typewriter",sans-serif; + text-align: center; + padding-top: 80px; + color: lightcoral; +} + +#coffee-form { + max-width: 700px; + margin: 0 auto; + padding: 20px; + background-color: #f8f9fa; + border: 1px solid #ced4da; + border-radius: 5px; + box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); +} + +label { + display: block; + margin-bottom: 8px; +} + +input, select { + width: 100%; + padding: 8px; + margin-bottom: 16px; + box-sizing: border-box; +} + +#add-coffee-btn { + background-color: black; + color: #fff; + padding: 10px 20px; + border: none; + border-radius: 5px; + cursor: pointer; + width: 100%; + +} + +#add-coffee-btn:hover { + background-color: #0056b3; +} + +#coffees { + display: flex; + flex-wrap: wrap; + justify-content: space-between; + margin: 10px; + font-family: "American Typewriter",sans-serif; + color: #6F4E37; + font-size: 20px; + max-height: 100%; +} + +.coffees::before { + margin-left: auto; +} + +.coffee::after, .coffee::before { + content: ''; + width: 0%; + height: 2px; + background: saddlebrown; + display: block; + transition: 0.5s; +} + +.coffee:hover::after, .coffee:hover::before { + width: 100%; +} + +.coffee { + width: 49%; + margin: 2px; + padding: 10px; + background-color: transparent; + border: 1px solid black; + border-radius: 5px; + box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); + text-align: center; + font-size: 18px; + transition: transform 0.3s ease-in-out; +} + +/*ALL EXTRA STYLING BELOW*/ + +.coffeeName { + font-weight: bold; +} + +.container { + height: 100% +} + +.navbar { + font-family: "American Typewriter",sans-serif; +} + +.rating:not(:checked) > input { + position: absolute; + appearance: none; +} + +.rating:not(:checked) > label { + float: right; + cursor: pointer; + font-size: 30px; + color: #666; +} + +.rating:not(:checked) > label:before { + content: '★'; +} + +.rating > input:checked + label:hover, +.rating > input:checked + label:hover ~ label, +.rating > input:checked ~ label:hover, +.rating > input:checked ~ label:hover ~ label, +.rating > label:hover ~ input:checked ~ label { + color: #e58e09; +} + +.rating:not(:checked) > label:hover, +.rating:not(:checked) > label:hover ~ label { + color: #ff9e0b; +} + +.rating > input:checked ~ label { + color: #ffa723; +} + +/* === removing default button style ===*/ +.button { + margin: 0; + height: auto; + background: transparent; + padding: 0; + border: none; + cursor: pointer; +} + +/* button styling */ +.button { + --border-right: 6px; + --text-stroke-color: rgba(0,0,0,0.6); + --animation-color: #6F4E37; + --fs-size: 2em; + letter-spacing: 3px; + text-decoration: none; + font-size: var(--fs-size); + font-family: "Arial"; + position: relative; + text-transform: uppercase; + color: transparent; + -webkit-text-stroke: 1px var(--text-stroke-color); +} +/* this is the text, when you hover on button */ +.hover-text { + position: absolute; + box-sizing: border-box; + content: attr(data-text); + color: var(--animation-color); + width: 0%; + inset: 0; + border-right: var(--border-right) solid var(--animation-color); + overflow: hidden; + transition: 0.5s; + -webkit-text-stroke: 1px var(--animation-color); +} +/* hover */ +.button:hover .hover-text { + width: 100%; + filter: drop-shadow(0 0 23px var(--animation-color)) +} + +.loader { + margin-top: 20px; + display: flex; + align-items: center; + justify-content: center; + flex-direction: row; +} + +.slider { + overflow: hidden; + background-color: tan; + margin: 0 15px; + height: 80px; + width: 20px; + border-radius: 30px; + box-shadow: 15px 15px 20px rgba(0, 0, 0, 0.1), -15px -15px 30px #fff, + inset -5px -5px 10px rgba(0, 0, 255, 0.1), + inset 5px 5px 10px rgba(0, 0, 0, 0.1); + position: relative; +} + +.slider::before { + content: ""; + position: absolute; + top: 0; + left: 0; + height: 20px; + width: 20px; + border-radius: 100%; + box-shadow: inset 0px 0px 0px rgba(0, 0, 0, 0.3), 0px 420px 0 400px rgb(92, 64, 51), + inset 0px 0px 0px rgba(0, 0, 0, 0.1); + animation: animate_2 2.5s ease-in-out infinite; + animation-delay: calc(-0.5s * var(--i)); +} + +@keyframes animate_2 { + 0% { + transform: translateY(250px); + filter: hue-rotate(0deg); + } + + 50% { + transform: translateY(0); + } + + 100% { + transform: translateY(250px); + filter: hue-rotate(0deg); + } +} diff --git a/JS/main.js b/JS/main.js new file mode 100644 index 000000000..254a9024f --- /dev/null +++ b/JS/main.js @@ -0,0 +1,96 @@ +"use strict" + +function renderCoffee(coffee) { + let html = '
'; + html += `
${coffee.name}
`; + html += `

${coffee.roast}

`; + html += '
'; + + return html; +} + +function renderCoffees(coffees) { + let html = ''; + for(let i = 0; i < coffees.length; i++) { + html += renderCoffee(coffees[i]); + } + return html; +} + +function updateCoffees(e) { + e.preventDefault(); + //make variables + const selectedRoast = roastSelection.value; + const searchTerm = coffeeSearch.value.toLowerCase(); + //new array + const filteredCoffees = []; + //look through array + coffees.forEach(coffee => { + //roast dropdown + const matchRoast = selectedRoast === 'all' || coffee.roast === selectedRoast; + //name search + const matchName = coffee.name.toLowerCase().includes(searchTerm); + if (matchRoast && matchName) { + //add to new array + filteredCoffees.push(coffee); + } + }); + //display new array + tbody.innerHTML = renderCoffees(filteredCoffees); +} + +function addCoffees(e) { + e.preventDefault(); + //make variables + const addedCoffee = addCoffee.value; + const addedRoast = addRoast.value; + const addedID = coffees.length + 1; + + //make new object + const newCoffee = { + id: addedID, + name: addedCoffee, + roast: addedRoast + }; + //add object to array + coffees.push(newCoffee) + + // Clear the input field + addCoffee.value = ''; + + // Render the updated list + tbody.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'}, + {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 coffeeForm = document.querySelector('#coffee-form'); +const roastSelection = document.querySelector('#roast-selection'); +const coffeeSearch = document.querySelector('#coffee-search'); +const addCoffee = document.querySelector('#add-coffee-search'); +const addRoast = document.querySelector('#add-roast-selection'); +tbody.innerHTML = renderCoffees(coffees); + +//search bar event +coffeeSearch.addEventListener('input', updateCoffees); +//dropdown menu event +roastSelection.addEventListener('change', updateCoffees); +//add a coffee event +coffeeForm.addEventListener('submit', addCoffees) diff --git a/README.md b/README.md index 39cd689b9..38c04e334 100644 --- a/README.md +++ b/README.md @@ -58,4 +58,4 @@ improvements to it. Here is an example demonstrating the above functionality. Your application might look different, but should have the same features. -![Cofee Project Demo](demo.gif) +![Cofee Project Demo](img/demo.gif) diff --git a/img/coffee.jpg b/img/coffee.jpg new file mode 100644 index 000000000..f09f88399 Binary files /dev/null and b/img/coffee.jpg differ diff --git a/demo.gif b/img/demo.gif similarity index 100% rename from demo.gif rename to img/demo.gif diff --git a/index.html b/index.html index 0d5208117..4bae941da 100644 --- a/index.html +++ b/index.html @@ -1,34 +1,120 @@ - + - + + + + -

Coffee!

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

BaddaBean Coffee Shop

+ + +
+ + + + + + + + + + + + + + + + + + + +
+ +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + 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; -}