From e538ff49b8b59faeea8f4e6ba7849b7249d090c7 Mon Sep 17 00:00:00 2001 From: charlesrolo22 Date: Wed, 22 Mar 2023 12:25:59 -0500 Subject: [PATCH 1/6] new push --- index.html | 80 +++++++++++++++++++++++++++++++++++++++++++++++++++--- main.js | 11 ++++++++ style.css | 8 ++++++ 3 files changed, 95 insertions(+), 4 deletions(-) diff --git a/index.html b/index.html index 0d5208117..3d007389b 100644 --- a/index.html +++ b/index.html @@ -3,13 +3,16 @@ + -

Coffee!

- -
- +

Coffee!

+
+ + +
+
+ + + +
+ @@ -28,7 +37,70 @@

Coffee!
+ +
+

Light City

+

Light

+
+
+

Half City

+

Light

+
+
+

Cinnamon

+

Light

+
+
+

City

+

Medium

+
+
+

American

+

Medium

+
+
+

Breakfast

+

Medium

+
+
+

High

+

Dark

+
+
+

Continental

+

Dark

+
+
+

New Orleans

+

Dark

+
+
+

Espresso

+

Dark

+
+
+

Viennese'

+

Dark

+
+
+

Viennese

+

Dark

+
+
+

Italian

+

Dark

+
+
+

French

+

Dark

+
+ + + + + + diff --git a/main.js b/main.js index 043b24824..d6755c4b1 100644 --- a/main.js +++ b/main.js @@ -48,6 +48,8 @@ var coffees = [ {id: 14, name: 'French', roast: 'dark'}, ]; + + var tbody = document.querySelector('#coffees'); var submitButton = document.querySelector('#submit'); var roastSelection = document.querySelector('#roast-selection'); @@ -55,3 +57,12 @@ var roastSelection = document.querySelector('#roast-selection'); tbody.innerHTML = renderCoffees(coffees); submitButton.addEventListener('click', updateCoffees); + +// New Code// +(function(){ + let light = document.getElementsByClassName("light"); + // console.log(light); + for(let i =0; i Date: Wed, 22 Mar 2023 16:37:41 -0500 Subject: [PATCH 2/6] Project --- index.html | 95 ++++++++++++++---------------------------------------- main.js | 80 +++++++++++++++++++++++++++++++++------------ style.css | 18 ++++++++--- 3 files changed, 96 insertions(+), 97 deletions(-) diff --git a/index.html b/index.html index 3d007389b..54931ad0d 100644 --- a/index.html +++ b/index.html @@ -11,92 +11,45 @@

Coffee!

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

Light City

-

Light

-
-
-

Half City

-

Light

-
-
-

Cinnamon

-

Light

-
-
-

City

-

Medium

-
-
-

American

-

Medium

-
-
-

Breakfast

-

Medium

-
-
-

High

-

Dark

-
-
-

Continental

-

Dark

-
-
-

New Orleans

-

Dark

-
-
-

Espresso

-

Dark

-
-
-

Viennese'

-

Dark

-
+ +
+ +
+ + + +
-

Viennese

-

Dark

+
+ +
-
-

Italian

-

Dark

+ +
-
-

French

-

Dark

- diff --git a/main.js b/main.js index d6755c4b1..e76eee16b 100644 --- a/main.js +++ b/main.js @@ -1,18 +1,21 @@ "use strict" function renderCoffee(coffee) { - var html = ''; - html += '' + coffee.id + ''; - html += '' + coffee.name + ''; - html += '' + coffee.roast + ''; - html += ''; + //this is responsible for rendering one coffee + let 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--) { + // this is responsible for rendering all of your coffees + let html = ''; + for(let i = coffees.length - 1; i >= 0; i--) { + //this is appending a coffee that is a div in html as an item in our list of coffees html += renderCoffee(coffees[i]); } return html; @@ -20,18 +23,24 @@ function renderCoffees(coffees) { function updateCoffees(e) { e.preventDefault(); // don't submit the form, we just want to update the data - var selectedRoast = roastSelection.value; - var filteredCoffees = []; + //this is getting the value selected from the dropdown + let selectedRoast = roastSelection.value; + //this will be the new array of coffees with only my searched values + let filteredCoffees = []; + //this will iterate over our original array that we don't want to display but rather filter our coffees.forEach(function(coffee) { + //if the coffee roast is equal to the selected value if (coffee.roast === selectedRoast) { + //then push this valid coffee into my new array(filteredCoffees) so that this could be displayed in place of the original array filteredCoffees.push(coffee); } }); + //this section will display/render our coffees in our html tbody.innerHTML = renderCoffees(filteredCoffees); } // from http://www.ncausa.org/About-Coffee/Coffee-Roasts-Guide -var coffees = [ +let coffees = [ {id: 1, name: 'Light City', roast: 'light'}, {id: 2, name: 'Half City', roast: 'light'}, {id: 3, name: 'Cinnamon', roast: 'light'}, @@ -48,21 +57,50 @@ var coffees = [ {id: 14, name: 'French', roast: 'dark'}, ]; +// let coffeeNames= document.querySelector("#name"); - -var tbody = document.querySelector('#coffees'); -var submitButton = document.querySelector('#submit'); -var roastSelection = document.querySelector('#roast-selection'); +let tbody = document.querySelector('#coffees'); +let submitButton = document.querySelector('#submit'); +let roastSelection = document.querySelector('#roast-selection'); +let nameSelection = document.querySelector('#name'); tbody.innerHTML = renderCoffees(coffees); submitButton.addEventListener('click', updateCoffees); -// New Code// -(function(){ - let light = document.getElementsByClassName("light"); - // console.log(light); - for(let i =0; i= 0; i--) { + //if the current coffee in my array contains the inputted value, then push it into my array + //Recommendation: use the .contains method(ex. coffees[i].name.contains(var that gets input)) + // if() { + html += renderCoffee(coffees[i]); + // }else{ + console.log("coffee not in filter") + // } } -}()); + + //push the new array into renderCoffees function; + // tbody.innerHTML = renderCoffees(filterCoffees); + // console.log(coffeeName); +}) +function typeCoffee(){ + let selectedCoffee = nameSelection.value; + // let filteredCoffees = []; + for (let i = coffees.length -1; i >= 0; i--){ + + } + + + + + diff --git a/style.css b/style.css index e4a6e4658..fd547861c 100644 --- a/style.css +++ b/style.css @@ -8,10 +8,18 @@ td, th { padding: 5px 10px; } -.coffee-name{ - float: right; -} +/*.coffee-name{*/ +/* float: right;*/ +/*}*/ + +/*.roast{*/ +/* float: right;*/ +/*}*/ -roast{ - float: right; +.coffee-name, .roast{ + display:flex; + flex-direction: column; } +p{ + color:lightgray; +} \ No newline at end of file From 65e74f5c410e641e60c16f8dd2edc481e3c4847b Mon Sep 17 00:00:00 2001 From: Savanna McCauley Date: Thu, 23 Mar 2023 09:08:01 -0500 Subject: [PATCH 3/6] try again --- main.js | 12 ++++++------ 1 file changed, 6 insertions(+), 6 deletions(-) diff --git a/main.js b/main.js index e76eee16b..3b5e85725 100644 --- a/main.js +++ b/main.js @@ -93,12 +93,12 @@ coffeeName.addEventListener("keyup", function(){ // tbody.innerHTML = renderCoffees(filterCoffees); // console.log(coffeeName); }) -function typeCoffee(){ - let selectedCoffee = nameSelection.value; - // let filteredCoffees = []; - for (let i = coffees.length -1; i >= 0; i--){ - - } +// function typeCoffee(){ +// let selectedCoffee = nameSelection.value; +// // let filteredCoffees = []; +// for (let i = coffees.length -1; i >= 0; i--){ +// +// } From 9f79c702bbd9087d844d07e16b6aa089ef6daf0b Mon Sep 17 00:00:00 2001 From: charlesrolo22 Date: Thu, 23 Mar 2023 11:48:53 -0500 Subject: [PATCH 4/6] message --- index.html | 50 ++++++++++++++++++++++++++++++++++++++++---------- main.js | 39 +++++++++++++-------------------------- style.css | 32 ++++++++++++++++++++++++++++++++ 3 files changed, 85 insertions(+), 36 deletions(-) diff --git a/index.html b/index.html index 54931ad0d..0afe3f22a 100644 --- a/index.html +++ b/index.html @@ -5,10 +5,11 @@ + -

Coffee!

+

Coffee!

@@ -27,33 +28,62 @@

Coffee!

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

Add a Coffee

+
+ + +
+
+ + + + + +
+ +
+
- -
+ + +
- + - - - - + + diff --git a/main.js b/main.js index 3b5e85725..0f8933f1b 100644 --- a/main.js +++ b/main.js @@ -62,44 +62,31 @@ let coffees = [ let tbody = document.querySelector('#coffees'); let submitButton = document.querySelector('#submit'); let roastSelection = document.querySelector('#roast-selection'); -let nameSelection = document.querySelector('#name'); tbody.innerHTML = renderCoffees(coffees); submitButton.addEventListener('click', updateCoffees); -submitButton.addEventListener('keypress', updateCoffees); -let coffeeName = document.getElementsByClassName('java'); -coffeeName.addEventListener("keyup", function(){ - // 1. get input value from input box - // document.getElementById() - // 2. iterate through coffees - let html = ''; - for(let i = coffees.length - 1; i >= 0; i--) { - //if the current coffee in my array contains the inputted value, then push it into my array - //Recommendation: use the .contains method(ex. coffees[i].name.contains(var that gets input)) - // if() { - html += renderCoffee(coffees[i]); - // }else{ - console.log("coffee not in filter") - // } +let searchBox = document.getElementById('coffee-name'); +searchBox.addEventListener("keyup", function(){ + + let input = searchBox.value.toUpperCase(); + let filteredCoffees = []; + + + for( let i = 0; i < coffees.length; i++){ + if (coffees[i].name.toUpperCase().includes(input)){ + filteredCoffees.push(coffees[i]) + } } + console.log(filteredCoffees); + tbody.innerHTML = renderCoffees(filteredCoffees) - //push the new array into renderCoffees function; - // tbody.innerHTML = renderCoffees(filterCoffees); - // console.log(coffeeName); }) -// function typeCoffee(){ -// let selectedCoffee = nameSelection.value; -// // let filteredCoffees = []; -// for (let i = coffees.length -1; i >= 0; i--){ -// -// } - diff --git a/style.css b/style.css index fd547861c..d4cdacec4 100644 --- a/style.css +++ b/style.css @@ -19,7 +19,39 @@ td, th { .coffee-name, .roast{ display:flex; flex-direction: column; + font-family: cursive; + color: darkgoldenrod; } p{ color:lightgray; +} + +h1{ + font-family: fantasy; + color: black; +} + +#submit{ + background-color: dodgerblue; +} + +#submit2{ + background-color: dodgerblue; +} + +body{ + background-image: url("https://e1.pxfuel.com/desktop-wallpaper/283/645/desktop-wallpaper-squirt-reflection-table-background-coffee-grain-cup-section-%D0%BC%D0%B0%D0%BA%D1%80%D0%BE.jpg"); + background-size: 100%; +} + +.top{ + margin-top: 25px; +} + +i{ + color: darkgoldenrod; +} + +p{ + color: darkgoldenrod; } \ No newline at end of file From e3b3a0683a5c99a81227651a5ace4b984ec53e0e Mon Sep 17 00:00:00 2001 From: Savanna McCauley Date: Thu, 23 Mar 2023 15:13:20 -0500 Subject: [PATCH 5/6] Finished all portion --- index.html | 7 ++++--- main.js | 11 +++++++++-- 2 files changed, 13 insertions(+), 5 deletions(-) diff --git a/index.html b/index.html index 0afe3f22a..c3e60b6cc 100644 --- a/index.html +++ b/index.html @@ -13,13 +13,13 @@

Coffee!

-
-
+
+
@@ -53,6 +54,7 @@

Add a Coffee dark +
diff --git a/main.js b/main.js index e961aff5e..2f190df29 100644 --- a/main.js +++ b/main.js @@ -4,7 +4,7 @@ function renderCoffee(coffee) { //this is responsible for rendering one coffee let html = '
'; // html += '' + coffee.id + ''; - html += '

' + coffee.name + '

'; + html += '

' + coffee.name + '

'; html += '

' + coffee.roast + '

'; // html += ''; @@ -58,11 +58,11 @@ let coffees = [ {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: 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'}, ]; // let coffeeNames= document.querySelector("#name"); diff --git a/style.css b/style.css index d4cdacec4..9455457f5 100644 --- a/style.css +++ b/style.css @@ -29,6 +29,7 @@ p{ h1{ font-family: fantasy; color: black; + } #submit{ @@ -54,4 +55,10 @@ i{ p{ color: darkgoldenrod; +} + +h4{ + font-family: fantasy; + color: black; + } \ No newline at end of file