diff --git a/data/coffees.js b/data/coffees.js new file mode 100644 index 000000000..d4cf0b1e1 --- /dev/null +++ b/data/coffees.js @@ -0,0 +1,68 @@ +export let 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' +}] \ No newline at end of file diff --git a/index.html b/index.html index 0d5208117..b388a5aa9 100644 --- a/index.html +++ b/index.html @@ -4,31 +4,82 @@ + + + -

Coffee!

- -
- - - -
- - - - - - - - - - -
IDNAMEROAST
- - + +
+ +
+
+ + + + + +
+ +
+ Coffee Chronicles +
+
+ +
+
+ +
+
+ +
+ +
+ +
+ +
+
+
+ + + + + +
+ + diff --git a/main.js b/main.js index 51df444ff..25b5b2cec 100644 --- a/main.js +++ b/main.js @@ -1,57 +1,72 @@ -"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); - } +import { renderCoffee , searchAndFilter} from "./utils/searchFilter.js"; + +document.querySelector('#Home').addEventListener('click', ()=> { + open('#top'); +}) + +// "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); + +document.addEventListener('DOMContentLoaded', () => { + renderCoffee(true); + searchAndFilter(); + + document.querySelector('#Home').addEventListener('click', ()=> { + open('#top'); }); - 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); +}); \ No newline at end of file diff --git a/pages/addCoffee.html b/pages/addCoffee.html new file mode 100644 index 000000000..f2a25df12 --- /dev/null +++ b/pages/addCoffee.html @@ -0,0 +1,16 @@ + + + + + + + Document + + +
+
+ +
+
+ + \ No newline at end of file diff --git a/scripts/addCoffee.js b/scripts/addCoffee.js new file mode 100644 index 000000000..e69de29bb diff --git a/src/Gemini_Generated_Image_c7ehlfc7ehlfc7eh.png b/src/Gemini_Generated_Image_c7ehlfc7ehlfc7eh.png new file mode 100644 index 000000000..704b81e57 Binary files /dev/null and b/src/Gemini_Generated_Image_c7ehlfc7ehlfc7eh.png differ diff --git a/src/Gemini_Generated_Image_cxgmqlcxgmqlcxgm.png b/src/Gemini_Generated_Image_cxgmqlcxgmqlcxgm.png new file mode 100644 index 000000000..9fd71259c Binary files /dev/null and b/src/Gemini_Generated_Image_cxgmqlcxgmqlcxgm.png differ diff --git a/src/Untitled_logo_2_free-file__1___1_-removebg-preview.png b/src/Untitled_logo_2_free-file__1___1_-removebg-preview.png new file mode 100644 index 000000000..20c06b0eb Binary files /dev/null and b/src/Untitled_logo_2_free-file__1___1_-removebg-preview.png differ diff --git a/style.css b/style.css index cd051aae3..0b3eba0ce 100644 --- a/style.css +++ b/style.css @@ -1,4 +1,4 @@ -table { +/* table { border-collapse: collapse; margin: 15px 0; } @@ -6,4 +6,40 @@ table { td, th { border: 1px solid black; padding: 5px 10px; +} */ + + +body { + font-family: Arial, Helvetica, sans-serif; + margin: 0; + background: #cbc5bb; + width: 100%; + min-height: 100vh; + padding: 30px; + box-sizing: border-box; +} + +body::-webkit-scrollbar { + display: none; +} + + +.main-container { + border-radius: 10px; + height: 92.5vh; + width: 100%; + background-color: #e6dfd3; + box-shadow: 5px 5px 15px #24170c; + position: relative; + + padding: 0; + padding-top: 90px; + + box-sizing: border-box; } + +/* #CDAA84 */ + +/* #6a3e19 */ + +/* #e6d9c2 */ \ No newline at end of file diff --git a/styles/addCoffee.css b/styles/addCoffee.css new file mode 100644 index 000000000..5fd6644d0 --- /dev/null +++ b/styles/addCoffee.css @@ -0,0 +1,16 @@ +body { + display: flex; + align-items: center; + justify-content: center; + height: 100vh; +} + +.main-container { + background-color: aqua; + width: 700px; + height: 600px; + + border-radius: 10px; + background-color: #7d4211; + box-shadow: 2px 2px 20px #442206; +} diff --git a/styles/central.css b/styles/central.css new file mode 100644 index 000000000..84c1a823d --- /dev/null +++ b/styles/central.css @@ -0,0 +1,140 @@ +.central-container { + background-color: #6a3e19; + width: 100%; + height: 100%; + + border-bottom-left-radius: 10px; + border-bottom-right-radius: 10px; + + margin-top: 10px; + + display: flex; + flex-direction: row; + + box-sizing: border-box; + padding: 15px; +} + +.coffee-grid { + + padding: 60px; + padding-left: 20px; + + flex: 1; + + background-color: transparent; + + border-bottom-left-radius: 10px; + + box-sizing: border-box; + + display: grid; + grid-template-columns: 1fr 1fr 1fr; + align-items: stretch; + column-gap: 50px; + row-gap: 50px; + + overflow-y: scroll; + scroll-behavior: smooth; + overflow-x: hidden; +} + +.coffee-grid::-webkit-scrollbar { + display: none; +} + +.coffee-selection { + flex: 1; + + background-color: #6a3e19; + + height: 100%; + + border-bottom-right-radius: 10px; + box-sizing: border-box; + + padding: 60px; + + display: flex; + flex-direction: column; + justify-content: stretch; + align-items: center; +} + +.search-for-name { + +} + +#search-input { + width: 500px; + height: 40px; + + padding-left: 30px; + border-radius: 60px; + border: 0; + + margin-bottom: 50px; + + background-color: #e6dfd3; + color: #6a3e19; +} + +#roast-filter-input { + width: 500px; + height: 40px; + padding-left: 30px; + + border-radius: 60px; + border: 0; + + margin-bottom: 50px; + border: 0; + + background-color: #e6dfd3; + color: #6a3e19; +} + +.options { + border-radius: 60px; +} + +.coffee { + width: 100%; + background-color: FFCF71; + aspect-ratio: 1 / 1; + + border-radius: 30px; + box-sizing: border-box; + + + box-shadow: 2px 2px 20px black; + /* inset 0px 0px 10px #6a3e19 */ + + color: #e6dfd3; + + + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; + + transition :all .5s ease ; + + overflow-x:visible; + + max-width: 175px; + max-height: 175px; +} + +.coffee:hover { + /* box-shadow: 2px 2px 50px black; */ + box-shadow: 2px 2px 20px white; + transform: scale(1.1); + /* outline: 1.5px solid #6a3e19; */ +} + +.name { + font-size: 22px; + margin-bottom: 10px; +} + diff --git a/styles/header.css b/styles/header.css new file mode 100644 index 000000000..d58b8918e --- /dev/null +++ b/styles/header.css @@ -0,0 +1,86 @@ +.header { + border-top-left-radius: 10px; + border-top-right-radius: 10px; + position: absolute; + top: 0px; + left: 0; + right: 0; + background-color: transparent; + height: 100px; + + display: flex; + flex-direction: row; + align-items: center; + justify-content: left; + + box-sizing: border-box; + padding-left: 10px; + padding-bottom: 10px; + padding-top: 0; +} + +#left-section { + background-color: transparent; + /* width: 60px; */ + height: 100%; + + display: flex; + justify-content: center; + align-items: center; + padding-left: 10px; + + min-width: 200px; +} + +.left-section-buttons { + background-color: transparent; + color: #7c4010; + + border: 2px solid transparent; + + font-family: Arial, Helvetica, sans-serif; + font-size: medium; + font-weight: 550; + + margin-right: 15px; + + padding: 9px; + border-radius: 100px; + + transition: all .5s ease; +} + +.left-section-buttons:hover { + border-color: #9b551c; + /* box-shadow: + 0px 0px 10px #6a3e19, + inset 0px 0px 10px #6a3e19; */ + transform: scale(1.05); +} + +#right-section { + background-color: transparent ; + height: 100%; + display: flex; + justify-content: center; + align-items: center; + margin-left: auto; /* ✅ pushes it to the far right */ + padding-right: 30px; + margin-top: 0; + + font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif; /* classy, vintage font */ + font-size: 60px; + font-weight: 900; + color: white; /* dark coffee brown */ + letter-spacing: 3px; + text-transform: uppercase; + + /* cartoonish layered shadows */ + text-shadow: + 3px 3px 0 #24170c, /* black outline */ + 6px 6px 0 #24170c, /* dark inner shadow */ + 0 0 15px #24170c; /* subtle glow for magical effect */ + + display: inline-block; + /* transform: rotate(-2deg); /* whimsical tilt */ +} diff --git a/utils/coffees_operations.js b/utils/coffees_operations.js new file mode 100644 index 000000000..56c1bd79d --- /dev/null +++ b/utils/coffees_operations.js @@ -0,0 +1,26 @@ +import { coffees } from "../data/coffees.js"; + +function addCoffee(Name, Roast){ + + let exists = false; + + coffees.forEach((coffee)=> { + if(coffee.name===Name && coffee.roast===Roast){ + console.log('The coffee already exists!'); + exists = true; + return; + } + }) + + if(exists){ + return; + } + + coffees.push({ + id : `${coffees.length+1}`, + name : Name, + roast : Roast + }) +} + + diff --git a/utils/page.js b/utils/page.js new file mode 100644 index 000000000..03dea496f --- /dev/null +++ b/utils/page.js @@ -0,0 +1,2 @@ +import { coffees } from "../data/coffees.js"; + diff --git a/utils/searchFilter.js b/utils/searchFilter.js new file mode 100644 index 000000000..19a4a4b42 --- /dev/null +++ b/utils/searchFilter.js @@ -0,0 +1,99 @@ +import { coffees } from "../data/coffees.js"; +export let currentCoffees = []; + +export function renderCoffee(currentCoffeesEmpty){ + if(currentCoffees.length===0 && currentCoffeesEmpty) { + let html = ''; + coffees.forEach((coffee) => { + + currentCoffees.push(coffee); + + html+=` +
+
+ ${coffee.name} +
+
+ ${coffee.roast} +
+
+ ` + }) + document.querySelector('.coffee-grid').innerHTML = html; + console.log(currentCoffees); + } else { + let html = ''; + currentCoffees.forEach((coffee) => { + + html+=` +
+
+ ${coffee.name} +
+
+ ${coffee.roast} +
+
+ ` + }) + document.querySelector('.coffee-grid').innerHTML = html; + console.log(currentCoffees); + } +} + +export function searchAndFilter() { + const nameSearch = document.querySelector('#search-input'); + const roastSelection = document.querySelector('.roast-selection-js'); + + roastSelection.addEventListener('change', ()=> { + filterRoast(roastSelection.value); + renderCoffee(false); + }) + + nameSearch.addEventListener('keyup', () => { + if(nameSearch.value.length!==0){ + filter(nameSearch.value); + console.log(nameSearch.value); + } else { + emptyCurrentCoffees(); + renderCoffee(true); + } + }) +} + +function filter(input) { + let temp = []; + currentCoffees.forEach((coffee) => { + let added = true; + if(input.length>coffee.name.length){ + added=false; + } else { + for(let i=0;i { + if(coffee.roast===input){ + temp.push(coffee); + } + }) + currentCoffees=temp; +} + +function emptyCurrentCoffees() { + currentCoffees.splice(0,currentCoffees.length); +} \ No newline at end of file