forked from gocodeup/coffee-project
-
Notifications
You must be signed in to change notification settings - Fork 0
/
main.js
79 lines (67 loc) · 2.57 KB
/
main.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
"use strict"
function renderCoffee(coffee) {
var html = '<div class="coffee">';
html += '<h3>' + coffee.name + '</h3>';
html += '<p>' + coffee.roast + '</p>';
html += '</div>';
return html;
}
function renderCoffees(coffees) {
var html = '';
for(var i = 0; i < coffees.length; 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 searchInput = searchFieldResponse.value;
var filteredCoffees = [];
coffees.forEach(function(coffee) {
if (coffee.roast === selectedRoast && coffee.name.toLowerCase().includes(searchInput)) {
filteredCoffees.push(coffee);
}
});
coffeeList.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 coffeeList = document.querySelector('#coffees');
var submitButton = document.querySelector('#submit');
var roastSelection = document.querySelector('#roast-selection');
var searchFieldResponse = document.querySelector("#search-field");
coffeeList.innerHTML = renderCoffees(coffees);
submitButton.addEventListener('click', updateCoffees);
searchFieldResponse.addEventListener('keyup', updateCoffees)
roastSelection.addEventListener('change',updateCoffees);
// function listener() {
// coffeeList.forEach(function (coffee) {
//
// //get user input
// var whatUserIsSearchingFor = searchFieldResponse.value;
//
// if (coffee.toLowerCase().includes(whatUserIsSearchingFor.toLowerCase())) {
// // display only the coffees that match the provided search term
// document.write(coffee);
// // console.log(coffee)
// }
// })
// }
// search through the coffees by name,
// (You will need to add an input field to the existing form for this)