';
+ // 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--) {
+ for(var i = 0; i <= coffees.length - 1; i++) {
html += renderCoffee(coffees[i]);
}
return html;
}
-function updateCoffees(e) {
- e.preventDefault(); // don't submit the form, we just want to update the data
+//updates coffee list!*******
+var updateCoffees = function() {
+ // 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) {
+ if (coffee.roast === selectedRoast || selectedRoast === 'All') {
filteredCoffees.push(coffee);
}
});
tbody.innerHTML = renderCoffees(filteredCoffees);
}
+//searches non-case sensitive for coffees in list******
+function searchCoffees(){
+ console.log('I work.')
+ var filteredCoffees = [];
+ coffees.forEach(function (coffee){
+ if(coffee.name.toLowerCase().includes(selectedCoffee.value.toLowerCase())){
+ filteredCoffees.push(coffee);
+ }
+ tbody.innerHTML = renderCoffees(filteredCoffees);
+ });
+}
+
+
+//adds to array of objects
+var newCoffee = function (name, type) {
+ var selectedRoast = roastType.value;
+ var coffeeName = newCoffeeName.value;
+ var coffeeID = coffees.length + 1;
+ var coffeeObj = {id: coffeeID, name: coffeeName, roast: selectedRoast}
+ coffees.push(coffeeObj)
+ console.log(localStorage.getItem('coffees').toUpperCase())
+ localStorage.removeItem('coffees')
+ localStorage.setItem('coffees', JSON.stringify(coffees))
+}
+
+
+
// 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: 1, name: 'Afternoon', roast: 'light'},
+ {id: 2, name: 'Mountain View', roast: 'light'},
{id: 3, name: 'Cinnamon', roast: 'light'},
- {id: 4, name: 'City', roast: 'medium'},
+ {id: 4, name: 'Nicaraguan', roast: 'medium'},
{id: 5, name: 'American', roast: 'medium'},
{id: 6, name: 'Breakfast', roast: 'medium'},
- {id: 7, name: 'High', roast: 'dark'},
+ {id: 7, name: 'Costa Rican', roast: 'dark'},
{id: 8, name: 'Continental', roast: 'dark'},
{id: 9, name: 'New Orleans', roast: 'dark'},
{id: 10, name: 'European', roast: 'dark'},
@@ -48,10 +76,42 @@ var coffees = [
{id: 14, name: 'French', roast: 'dark'},
];
-var tbody = document.querySelector('#coffees');
-var submitButton = document.querySelector('#submit');
-var roastSelection = document.querySelector('#roast-selection');
-
+//getting info from HTML*******
+var selectedCoffee = document.getElementById('filterCoffees')
+var tbody = document.getElementById('coffees');
+var submitButton = document.getElementById('submit');
+var roastSelection = document.getElementById('roast-selection');
+var newCoffeeSubmit = document.getElementById('createSubmit');
tbody.innerHTML = renderCoffees(coffees);
+
+//event listener for search coffee****
submitButton.addEventListener('click', updateCoffees);
+selectedCoffee.addEventListener('keyup', searchCoffees);
+
+
+//creat coffee event listener*********
+var roastType = document.getElementById('add-roast');
+var newCoffeeName = document.getElementById("addRoast");
+
+newCoffeeSubmit.addEventListener('click', function(e){
+ e.preventDefault();
+ if(newCoffeeName !== " ") {
+ newCoffee(newCoffeeName.value, roastType.value);
+ updateCoffees();
+ }
+});
+
+
+//gets items from local storage*******
+window.onload = () =>{
+ if (!(localStorage.getItem('coffees') === null)){
+ coffees = JSON.parse(localStorage.getItem('coffees'));
+ updateCoffees()
+ console.log('coffees loaded')
+ } else {
+ localStorage.setItem('coffees', JSON.stringify(coffees));
+
+ console.log('coffees created')
+ }
+}
diff --git a/style.css b/style.css
index cd051aae3..7683ad3a8 100644
--- a/style.css
+++ b/style.css
@@ -1,9 +1,115 @@
-table {
- border-collapse: collapse;
- margin: 15px 0;
+@import url('https://fonts.googleapis.com/css2?family=Gochi+Hand&family=Just+Another+Hand&display=swap');
+/*font-family: 'Gochi Hand', cursive;*/
+/*font-family: 'Just Another Hand', cursive;*/
+* {
+ /*display: inline-block;*/
+ /*margin: 0;*/
+ /*border: solid lightgray .5px;*/
+ padding: 0;
+ /*align-content: center;*/
+ font-family: 'Gochi Hand', cursive;
}
-td, th {
- border: 1px solid black;
- padding: 5px 10px;
+body {
+ background-image: url("images/patryk-gauza-vs0tzSHVcac-unsplash.jpg");
}
+
+.jumbotron {
+ /*background: #f4dfbdd1; !important;*/
+ background-image: url("images/gif-roasting-better.gif");
+ background-repeat: no-repeat;
+ background-size: cover;
+ background-position: bottom;
+ opacity: 80%;
+ border-bottom: black solid 3px;
+}
+
+h4 {
+ color: #f4dfbd; !important;
+}
+
+
+#submit, #createSubmit {
+ background: #764520;
+ border-radius: 5px;
+ margin-top: .25em;
+}
+
+#filterCoffees, #addRoast {
+ height: 3em;
+ border-radius: 5px;
+ margin-top: .25em;
+}
+
+
+#createSubmit {
+ background: #764520;
+ border-radius: 5px;
+ margin-bottom: 5px;
+}
+
+.row {
+ margin: 0;
+}
+#chalkBoard {
+ border: solid #764520 10px;
+ background-image: url("images/chalkboard-or-blackboard.jpg");
+ color: whitesmoke; !important;
+ letter-spacing: 4px;
+ border-radius: 5px;
+ height: 640px;
+ overflow: auto;
+}
+
+#roast-selection, #add-roast {
+ background: #f4dfbdd1; !important;
+ border-radius: 5px;
+}
+
+#add-roast {
+ margin-top: 5px;
+}
+
+img {
+ margin-top: 2em;
+ border-radius: 10px;
+
+}
+
+#h1 {
+ background: #f4dfbdd1 ;
+ border-radius:45%;
+ width: 300px;
+ margin-left: 1.5em;
+}
+
+#footer {
+ margin-top: 3em;
+ min-height: 100px;
+ color: whitesmoke; !important;
+ background-image: url("images/chalkboard-or-blackboard.jpg");
+ border-top: black solid 3px;
+}
+
+a {
+ color: whitesmoke; !important;
+}
+
+ul {
+ list-style: none;
+ text-align: center;
+}
+
+a:visited {
+ color: gray;
+}
+
+
+a:hover {
+ color: #764520;
+}
+
+
+i {
+ height: 20px;
+}
\ No newline at end of file
+