diff --git a/css/style.css b/css/style.css new file mode 100644 index 000000000..486808241 --- /dev/null +++ b/css/style.css @@ -0,0 +1,126 @@ +html, body { + font-family: 'Chivo', sans-serif; + color: #e7b17d; +} + +body { + background-color: #551E19; + background-image: url("../images/fireplace.webp"); + /*background-size: 100%;*/ + background-repeat: no-repeat; + background-attachment: fixed; + background-size: cover; +} + +.headerFont { + font-family: 'MuseoModerno', sans-serif; +} + +.navbar-brand img { + width: 20%; + height: 20%; + margin: 0; + padding: 0; +} + +.navbar { + background-color: #551e19; +} + +#search-Coffee { + background-color: #99592b; + color: #551e19; + border-color: black; + margin-right: 10px; +} + +.coffees-container { + margin-top: 6em; +} + +#roast-selection { + background-color: #99592b; + border-color: black; + color: #e7b17d; + width: 50%; + height: 3em; +} + +.new-roast-selection-label, #new-roast-selection, #new-coffee-name { + background-color: #99592b; + border-color: black; + color: #e7b17d; +} + +.coffeeCard { + margin: 5px; + background-color: #551E19; + text-align: center; +} + +.coffeeCard img { + width: 100%; + height: 70%; + border-radius: 2%; +} + +.add-button { + position: fixed; + right: 0; + bottom: 0; + z-index: 1030; +} + +.cigar-pairing-box { + position: fixed; + right: 10em; + /*bottom: 2em;*/ + /*z-index: 1030;*/ +} + +.cigar-pairing-box, .roast-pairing-list li, .cigar-pairing-list li { + background-color: #551e19; + color: #e7b17d; + border-radius: 2%; +} + +.offcanvas-body, .offcanvas-header { + background-color: #551e19; + border-color: black; + color: #e7b17d; +} + +.pairing-card{ + width: 36%; + height: 20%; + margin-top: 30em; + margin-right: -9em; + border-radius: 2%; + font-size: 15px; +} + +.roast-info{ + font-size: 15px; + width: 38%; + position: fixed; + right: 0em; + top: 3em; + z-index: 4; + margin-top: 7em; + padding-bottom: 0; + border-radius: 2%; +} + +.roast-header{ + background-color: #551e19; + border-color: black; + color: #e7b17d; +} + +.add-card{ + background-color: #99592b; +} + +.coffee-bean-btn { + border: thick black; +} \ No newline at end of file diff --git a/images/OldPaperBackground.webp b/images/OldPaperBackground.webp new file mode 100644 index 000000000..beda29ac0 Binary files /dev/null and b/images/OldPaperBackground.webp differ diff --git a/images/american.webp b/images/american.webp new file mode 100644 index 000000000..24805c840 Binary files /dev/null and b/images/american.webp differ diff --git a/images/breakfast.jpeg b/images/breakfast.jpeg new file mode 100644 index 000000000..e898bb1e0 Binary files /dev/null and b/images/breakfast.jpeg differ diff --git a/images/cinnamon-beans.jpg b/images/cinnamon-beans.jpg new file mode 100644 index 000000000..63ce7bd7b Binary files /dev/null and b/images/cinnamon-beans.jpg differ diff --git a/images/cinnamon.jpeg b/images/cinnamon.jpeg new file mode 100644 index 000000000..cd9d7a7bd Binary files /dev/null and b/images/cinnamon.jpeg differ diff --git a/images/city.jpeg b/images/city.jpeg new file mode 100644 index 000000000..2a2f50ccc Binary files /dev/null and b/images/city.jpeg differ diff --git a/images/coffee-images-all.jpeg b/images/coffee-images-all.jpeg new file mode 100644 index 000000000..f994f9392 Binary files /dev/null and b/images/coffee-images-all.jpeg differ diff --git a/images/coffeebean.png b/images/coffeebean.png new file mode 100644 index 000000000..f838ce891 Binary files /dev/null and b/images/coffeebean.png differ diff --git a/images/continental.jpeg b/images/continental.jpeg new file mode 100644 index 000000000..1b620b5a6 Binary files /dev/null and b/images/continental.jpeg differ diff --git a/images/destinguished-gentleman-high-resolution-color-logo.png b/images/destinguished-gentleman-high-resolution-color-logo.png new file mode 100644 index 000000000..6f599707a Binary files /dev/null and b/images/destinguished-gentleman-high-resolution-color-logo.png differ diff --git a/images/destinguished-gentleman-high-resolution-logo-color-on-transparent-background.png b/images/destinguished-gentleman-high-resolution-logo-color-on-transparent-background.png new file mode 100644 index 000000000..ff8386d5b Binary files /dev/null and b/images/destinguished-gentleman-high-resolution-logo-color-on-transparent-background.png differ diff --git a/images/espresso-beans.jpg b/images/espresso-beans.jpg new file mode 100644 index 000000000..63047bf67 Binary files /dev/null and b/images/espresso-beans.jpg differ diff --git a/images/espresso.jpeg b/images/espresso.jpeg new file mode 100644 index 000000000..210bee8e2 Binary files /dev/null and b/images/espresso.jpeg differ diff --git a/images/european.jpeg b/images/european.jpeg new file mode 100644 index 000000000..98be78d78 Binary files /dev/null and b/images/european.jpeg differ diff --git a/images/fireplace.webp b/images/fireplace.webp new file mode 100644 index 000000000..67c2bd91a Binary files /dev/null and b/images/fireplace.webp differ diff --git a/images/french.jpeg b/images/french.jpeg new file mode 100644 index 000000000..5db794efc Binary files /dev/null and b/images/french.jpeg differ diff --git a/images/half-city.jpeg b/images/half-city.jpeg new file mode 100644 index 000000000..cbd0b931b Binary files /dev/null and b/images/half-city.jpeg differ diff --git a/images/hear-espresso-beans.jpg b/images/hear-espresso-beans.jpg new file mode 100644 index 000000000..c1a66a638 Binary files /dev/null and b/images/hear-espresso-beans.jpg differ diff --git a/images/high.jpeg b/images/high.jpeg new file mode 100644 index 000000000..2b355b699 Binary files /dev/null and b/images/high.jpeg differ diff --git a/images/insert-coffee.webp b/images/insert-coffee.webp new file mode 100644 index 000000000..611196541 Binary files /dev/null and b/images/insert-coffee.webp differ diff --git a/images/italian.webp b/images/italian.webp new file mode 100644 index 000000000..f645c37dd Binary files /dev/null and b/images/italian.webp differ diff --git a/images/light-city.jpeg b/images/light-city.jpeg new file mode 100644 index 000000000..5663ec7a4 Binary files /dev/null and b/images/light-city.jpeg differ diff --git a/images/new-orleans.jpeg b/images/new-orleans.jpeg new file mode 100644 index 000000000..65f1ac817 Binary files /dev/null and b/images/new-orleans.jpeg differ diff --git a/images/roasting-type.jpeg b/images/roasting-type.jpeg new file mode 100644 index 000000000..f7ef49239 Binary files /dev/null and b/images/roasting-type.jpeg differ diff --git a/images/vienesse.jpeg b/images/vienesse.jpeg new file mode 100644 index 000000000..66a7575d9 Binary files /dev/null and b/images/vienesse.jpeg differ diff --git a/index.html b/index.html index 0d5208117..0cc70256b 100644 --- a/index.html +++ b/index.html @@ -3,32 +3,129 @@ - - - -

Coffee!

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

Distinguished Gentleman's Coffee

+
+ + + +
- +
+ +
+
+ + +
+
+
+ Know Your Roasts +
+
    +
  • Light Roast: Light brown in color, this roast is generally preferred for milder coffee varieties. There will be no oil on the surface of these beans because they are not roasted long enough for the oils to break through to the surface.
    • +
  • Medium Roast: This roast is medium brown in color with a stronger flavor and a non-oily surface. It’s often referred to as the American roast because it is generally preferred in the United States.
    • +
  • Dark Roast: This roast produces shiny black beans with an oily surface and a pronounced bitterness. The darker the roast, the less acidity will be found in the coffee beverage. Dark roast coffees run from slightly dark to charred, and the names are often used interchangeably — be sure to check your beans before you buy them!
    • +
+
+
+
+ Know Your Pairing +
+
    +
  • Mild Cigar: Paired best with a Light Roast.
    • +
  • Medium to Full Body Cigar: Paired best with a Medium Roast
    • +
  • Rich Full Body Cigar: Paired best with a Dark Roast
    • +
+
+
+
+ +
+ +
+ + + diff --git a/js/main.js b/js/main.js new file mode 100644 index 000000000..676bc35e8 --- /dev/null +++ b/js/main.js @@ -0,0 +1,149 @@ +"use strict"; + +(function () { + + +// Creates the initial coffee table by taking in the Coffee Array's objects and organizing them +function renderCoffee(coffee) { + + let coffeeCards = '
'; + coffeeCards += '...'; + coffeeCards += '
' + coffeeCards += '
'+ coffee.name +'
' + coffeeCards += '

' + coffee.roast + ' roast

' + coffeeCards += '
' + coffeeCards += '
' + + return coffeeCards; +} + +// Takes in the filtered Array of objects and adds to the established Coffee Table +function renderCoffees(coffees) { + let html = ''; + for(let i = 0; i < coffees.length; i++) { + // if () + html += renderCoffee(coffees[i]); + } + return html; +} + +//-----Function takes in the input from Roast Selection and updates the Coffee Table's Content-----// +function updateCoffees() { + //------------don't submit the form, we just want to update the data-------------------------// + // e.preventDefault(); + + //-------------Establishes the criteria to filter the Coffee Table--------------------------// + let selectedRoast = roastSelection.value; + selectedRoast = selectedRoast.toLowerCase(); + let input = document.getElementById('search-Coffee').value; + input = input.toLowerCase(); + let filteredCoffees = []; + + //-----------Takes in the Array's criteria and adds it to a new array--------------------------// + coffees.forEach(function(coffee) { + if (((coffee.roast === selectedRoast) || (selectedRoast === 'all')) && (coffee.name.toLowerCase().includes(input))){ + filteredCoffees.push(coffee); + } + }); + tbody.innerHTML = renderCoffees(filteredCoffees); +} + +// ------------------- Add to Coffee Object-----------------------------// + + +// from http://www.ncausa.org/About-Coffee/Coffee-Roasts-Guide +let coffees = [ + {id: 101, name: 'Light City', roast: 'light', image: 'images/light-city.jpeg'}, + {id: 102, name: 'Half City', roast: 'light', image: 'images/half-city.jpeg'}, + {id: 103, name: 'Cinnamon', roast: 'light', image: 'images/cinnamon-beans.jpg'}, + {id: 201, name: 'City', roast: 'medium', image: 'images/city.jpeg'}, + {id: 202, name: 'American', roast: 'medium', image: 'images/american.webp'}, + {id: 203, name: 'Breakfast', roast: 'medium', image: 'images/breakfast.jpeg'}, + {id: 301, name: 'High', roast: 'dark', image: 'images/high.jpeg'}, + {id: 302, name: 'Continental', roast: 'dark', image: 'images/continental.jpeg'}, + {id: 303, name: 'New Orleans', roast: 'dark', image: 'images/new-orleans.jpeg'}, + {id: 304, name: 'European', roast: 'dark', image: 'images/european.jpeg'}, + {id: 305, name: 'Espresso', roast: 'dark', image: 'images/hear-espresso-beans.jpg'}, + {id: 306, name: 'Viennese', roast: 'dark', image: 'images/vienesse.jpeg'}, + {id: 307, name: 'Italian', roast: 'dark', image: 'images/italian.webp'}, + {id: 308, name: 'French', roast: 'dark', image: 'images/french.jpeg'}, +]; + +function pullFromLocalStorage(){ + let localStorageCoffees = JSON.parse(localStorage.getItem('newCoffees')); + + if (localStorageCoffees == null) { + localStorage.setItem('newCoffees', JSON.stringify(localStorageCoffeeArray)); + } else { + localStorageCoffees.forEach(function (coffee) { + coffees.push(coffee); + + }) + } + updateCoffees(); + console.log(localStorageCoffees); + console.log(coffees); +} + + + +let localStorageCoffeeArray = JSON.parse(localStorage.getItem('newCoffees')); + +//----------------------------creates new coffee obj------------------- +function createCoffee(){ + let newCoffeeInput = document.getElementById('new-coffee-name').value; + let newCoffeeRoast = document.querySelector('#new-roast-selection').value; + let newCoffeeObj = {}; + + + newCoffeeObj.id = ''; + newCoffeeObj.name = newCoffeeInput; + newCoffeeObj.roast = newCoffeeRoast; + newCoffeeObj.image = 'images/insert-coffee.webp'; + coffees.push(newCoffeeObj); + localStorageCoffeeArray.push(newCoffeeObj); + localStorage.setItem('newCoffees', JSON.stringify(localStorageCoffeeArray)); + updateCoffees(); +} + + + +//------------- Creates Variable that holds Coffee Cards in html format for later display ---------// +let tbody = document.querySelector('#coffees'); + +//-------- Creates Variable that holds user selection for Roast Type (Dark, Medium, Light) and created listener that Filters and Updates Coffee Cards based on Roast Selection-------// +let roastSelection = document.querySelector('#roast-selection'); +roastSelection.addEventListener('change', updateCoffees); + +//--------------- Adds filtered Coffee Cards to the HTML document for display --------------------// +tbody.innerHTML = renderCoffees(coffees); + + +//---------------- Created variable for coffee searchbar input and created listener that Filters coffee card list based on coffee search bar---------------------------------// +let coffeeInput = document.getElementById('search-Coffee'); +coffeeInput.addEventListener('keyup', updateCoffees); + +//------------------ runs create coffee function when button is pressed-----------------------// +let addCoffeeBtn = document.getElementById('add-coffee-button'); +addCoffeeBtn.addEventListener('click', createCoffee); + + +window.addEventListener('load', pullFromLocalStorage); + +})(); + +/*----------------------------------------------------------------------------------------------- + + + + +Skeleton: + + +create user input form that creates new coffee cards + - Create 3 variables to count dark, medium, and light roasts + - Set each variable equal to a function that runs through the 'Coffees' array and counts the number of + instances each category appears + - Make newly inputted coffee's IDs = to variable counter + 1 + + */ \ No newline at end of file diff --git a/main.js b/main.js deleted file mode 100644 index 043b24824..000000000 --- a/main.js +++ /dev/null @@ -1,57 +0,0 @@ -"use strict" - -function renderCoffee(coffee) { - var html = ''; - html += '' + coffee.id + ''; - html += '' + coffee.name + ''; - html += '' + coffee.roast + ''; - html += ''; - - return html; -} - -function renderCoffees(coffees) { - var html = ''; - for(var 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 - var selectedRoast = roastSelection.value; - var filteredCoffees = []; - coffees.forEach(function(coffee) { - if (coffee.roast === selectedRoast) { - filteredCoffees.push(coffee); - } - }); - tbody.innerHTML = renderCoffees(filteredCoffees); -} - -// from http://www.ncausa.org/About-Coffee/Coffee-Roasts-Guide -var 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'}, -]; - -var tbody = document.querySelector('#coffees'); -var submitButton = document.querySelector('#submit'); -var 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; -}