From 7269872b72afdfea697203989cf8739d136af1e4 Mon Sep 17 00:00:00 2001
From: Andrew Szucs <andrew0szucs@gmail.com>
Date: Thu, 18 Jan 2018 18:44:11 +0100
Subject: [PATCH 01/45] Refactor DinnerModel to ES6, Implement interface
 methods

---
 js/app.js               |   4 +-
 js/model/dinnerModel.js | 608 ++++++++++++++++++++--------------------
 2 files changed, 308 insertions(+), 304 deletions(-)

diff --git a/js/app.js b/js/app.js
index 296b0bae2..e87dab2c5 100644
--- a/js/app.js
+++ b/js/app.js
@@ -1,9 +1,9 @@
 $(function() {
 	//We instantiate our model
-	var model = new DinnerModel();
+	const model = createDinnerModel();
 	
 	// And create the instance of ExampleView
-	var exampleView = new ExampleView($("#exampleView"));
+	const exampleView = new ExampleView($("#exampleView"));
 
 	/**
 	 * IMPORTANT: app.js is the only place where you are allowed to
diff --git a/js/model/dinnerModel.js b/js/model/dinnerModel.js
index 47476a61b..a41c06452 100644
--- a/js/model/dinnerModel.js
+++ b/js/model/dinnerModel.js
@@ -1,330 +1,334 @@
 //DinnerModel Object constructor
-var DinnerModel = function() {
- 
-	//TODO Lab 1 implement the data structure that will hold number of guest
-	// and selected dishes for the dinner menu
-
-
-	this.setNumberOfGuests = function(num) {
-		//TODO Lab 1
-	}
+const createDinnerModel = () => {
 	
-	this.getNumberOfGuests = function() {
-		//TODO Lab 1
+	// the data structure that will hold number of guest
+	// and selected dishes for the dinner menu
+	const state = {
+		numberOfGuests: 1,
+		menu: []
 	}
 
-	//Returns the dish that is on the menu for selected type 
-	this.getSelectedDish = function(type) {
-		//TODO Lab 1
+	const setNumberOfGuests = num => {
+		state.numberOfGuests = num
 	}
 
-	//Returns all the dishes on the menu.
-	this.getFullMenu = function() {
-		//TODO Lab 1
-	}
+	const getNumberOfGuests = () => state.numberOfGuests
+	
+	// Returns the dish that is on the menu for selected type 
+	const getSelectedDish = type => state.menu.find(dish => dish.type === type)
 
-	//Returns all ingredients for all the dishes on the menu.
-	this.getAllIngredients = function() {
-		//TODO Lab 1
-	}
+	// Returns all the dishes on the menu.
+	const getFullMenu = () => state.menu
 
-	//Returns the total price of the menu (all the ingredients multiplied by number of guests).
-	this.getTotalMenuPrice = function() {
-		//TODO Lab 1
-	}
+	// Returns all ingredients for all the dishes on the menu.
+	const getAllIngredients = () => state.menu.map(dish => dish.ingredients)
 
-	//Adds the passed dish to the menu. If the dish of that type already exists on the menu
-	//it is removed from the menu and the new one added.
-	this.addDishToMenu = function(id) {
-		//TODO Lab 1 
+	// Returns the total price of the menu (all the ingredients multiplied by number of guests).
+	const getTotalMenuPrice = () => getAllIngredients().reduce((acc, curr) => acc = acc + state.numberOfGuests * curr.price, 0)
+	
+	// Adds the passed dish to the menu. If the dish of that type already exists on the menu
+	// it is removed from the menu and the new one added.
+	const addDishToMenu = id => {
+		const selectedDish = getDish(id)
+		const restOfTheMenu = state.menu.filter(dish => dish.type !== selectedDish.type)
+		state.menu = restOfTheMenu.push(selectedDish)
 	}
 
-	//Removes dish from menu
-	this.removeDishFromMenu = function(id) {
-		//TODO Lab 1
+	// Removes dish from menu
+	const removeDishFromMenu = id => {
+		const newMenu = menu.filter(dish => dish.id !== id)
+		state.menu = newMenu
+		return newMenu
 	}
 
-	//function that returns all dishes of specific type (i.e. "starter", "main dish" or "dessert")
-	//you can use the filter argument to filter out the dish by name or ingredient (use for search)
-	//if you don't pass any filter all the dishes will be returned
-	this.getAllDishes = function (type,filter) {
-	  return dishes.filter(function(dish) {
-		var found = true;
-		if(filter){
-			found = false;
-			dish.ingredients.forEach(function(ingredient) {
-				if(ingredient.name.indexOf(filter)!=-1) {
-					found = true;
-				}
-			});
-			if(dish.name.indexOf(filter) != -1)
-			{
-				found = true;
+	// function that returns all dishes of specific type (i.e. "starter", "main dish" or "dessert")
+	// you can use the filter argument to filter out the dish by name or ingredient (use for search)
+	// if you don't pass any filter all the dishes will be returned
+	const getAllDishes = (type, filter) => {
+		
+		return dishes.filter(dish => {
+			
+			let typeMatch =  dish.type === type
+			if(type === 'all') {
+				typeMatch = true
+			}
+			
+			let filterMatch = true
+			if(filter !== undefined) {
+				const nameMatch = dish.name.includes(filter)
+				const ingredientMatch = dish.ingredients.some(ingredient => ingredient.name.includes(filter))
+				filterMatch = nameMatch || ingredientMatch
 			}
-		}
-	  	return dish.type == type && found;
-	  });	
+			
+			return typeMatch && filterMatch
+		})
 	}
 
 	//function that returns a dish of specific ID
-	this.getDish = function (id) {
-	  for(key in dishes){
-			if(dishes[key].id == id) {
-				return dishes[key];
-			}
-		}
-	}
+	const getDish = id => dishes.find(dish => dish.id === id)
 
+	return ({
+		setNumberOfGuests,
+		getNumberOfGuests,
+		getSelectedDish,
+		getFullMenu,
+		getAllIngredients,
+		getTotalMenuPrice,
+		addDishToMenu,
+		removeDishFromMenu,
+		getAllDishes,
+		getDish
+	})
 
-	// the dishes variable contains an array of all the 
-	// dishes in the database. each dish has id, name, type,
-	// image (name of the image file), description and
-	// array of ingredients. Each ingredient has name, 
-	// quantity (a number), price (a number) and unit (string 
-	// defining the unit i.e. "g", "slices", "ml". Unit
-	// can sometimes be empty like in the example of eggs where
-	// you just say "5 eggs" and not "5 pieces of eggs" or anything else.
-	var dishes = [{
-		'id':1,
-		'name':'French toast',
-		'type':'starter',
-		'image':'toast.jpg',
-		'description':"In a large mixing bowl, beat the eggs. Add the milk, brown sugar and nutmeg; stir well to combine. Soak bread slices in the egg mixture until saturated. Heat a lightly oiled griddle or frying pan over medium high heat. Brown slices on both sides, sprinkle with cinnamon and serve hot.",
-		'ingredients':[{ 
-			'name':'eggs',
-			'quantity':0.5,
-			'unit':'',
-			'price':10
-			},{
-			'name':'milk',
-			'quantity':30,
-			'unit':'ml',
-			'price':6
-			},{
-			'name':'brown sugar',
-			'quantity':7,
-			'unit':'g',
-			'price':1
-			},{
-			'name':'ground nutmeg',
-			'quantity':0.5,
-			'unit':'g',
-			'price':12
-			},{
-			'name':'white bread',
-			'quantity':2,
-			'unit':'slices',
-			'price':2
-			}]
+}
+
+// the dishes variable contains an array of all the 
+// dishes in the database. each dish has id, name, type,
+// image (name of the image file), description and
+// array of ingredients. Each ingredient has name, 
+// quantity (a number), price (a number) and unit (string 
+// defining the unit i.e. "g", "slices", "ml". Unit
+// can sometimes be empty like in the example of eggs where
+// you just say "5 eggs" and not "5 pieces of eggs" or anything else.
+const dishes = [{
+	'id':1,
+	'name':'French toast',
+	'type':'starter',
+	'image':'toast.jpg',
+	'description':"In a large mixing bowl, beat the eggs. Add the milk, brown sugar and nutmeg; stir well to combine. Soak bread slices in the egg mixture until saturated. Heat a lightly oiled griddle or frying pan over medium high heat. Brown slices on both sides, sprinkle with cinnamon and serve hot.",
+	'ingredients':[{ 
+		'name':'eggs',
+		'quantity':0.5,
+		'unit':'',
+		'price':10
 		},{
-		'id':2,
-		'name':'Sourdough Starter',
-		'type':'starter',
-		'image':'sourdough.jpg',
-		'description':"Here is how you make it... Lore ipsum...",
-		'ingredients':[{ 
-			'name':'active dry yeast',
-			'quantity':0.5,
-			'unit':'g',
-			'price':4
-			},{
-			'name':'warm water',
-			'quantity':30,
-			'unit':'ml',
-			'price':0
-			},{
-			'name':'all-purpose flour',
-			'quantity':15,
-			'unit':'g',
-			'price':2
-			}]
+		'name':'milk',
+		'quantity':30,
+		'unit':'ml',
+		'price':6
 		},{
-		'id':3,
-		'name':'Baked Brie with Peaches',
-		'type':'starter',
-		'image':'bakedbrie.jpg',
-		'description':"Here is how you make it... Lore ipsum...",
-		'ingredients':[{ 
-			'name':'round Brie cheese',
-			'quantity':10,
-			'unit':'g',
-			'price':8
-			},{
-			'name':'raspberry preserves',
-			'quantity':15,
-			'unit':'g',
-			'price':10
-			},{
-			'name':'peaches',
-			'quantity':1,
-			'unit':'',
-			'price':4
-			}]
+		'name':'brown sugar',
+		'quantity':7,
+		'unit':'g',
+		'price':1
 		},{
-		'id':100,
-		'name':'Meat balls',
-		'type':'main dish',
-		'image':'meatballs.jpg',
-		'description':"Preheat an oven to 400 degrees F (200 degrees C). Place the beef into a mixing bowl, and season with salt, onion, garlic salt, Italian seasoning, oregano, red pepper flakes, hot pepper sauce, and Worcestershire sauce; mix well. Add the milk, Parmesan cheese, and bread crumbs. Mix until evenly blended, then form into 1 1/2-inch meatballs, and place onto a baking sheet. Bake in the preheated oven until no longer pink in the center, 20 to 25 minutes.",
-		'ingredients':[{ 
-			'name':'extra lean ground beef',
-			'quantity':115,
-			'unit':'g',
-			'price':20
-			},{
-			'name':'sea salt',
-			'quantity':0.7,
-			'unit':'g',
-			'price':3
-			},{
-			'name':'small onion, diced',
-			'quantity':0.25,
-			'unit':'',
-			'price':2
-			},{
-			'name':'garlic salt',
-			'quantity':0.7,
-			'unit':'g',
-			'price':2
-			},{
-			'name':'Italian seasoning',
-			'quantity':0.6,
-			'unit':'g',
-			'price':3
-			},{
-			'name':'dried oregano',
-			'quantity':0.3,
-			'unit':'g',
-			'price':3
-			},{
-			'name':'crushed red pepper flakes',
-			'quantity':0.6,
-			'unit':'g',
-			'price':3
-			},{
-			'name':'Worcestershire sauce',
-			'quantity':6,
-			'unit':'ml',
-			'price':7
-			},{
-			'name':'milk',
-			'quantity':20,
-			'unit':'ml',
-			'price':4
-			},{
-			'name':'grated Parmesan cheese',
-			'quantity':5,
-			'unit':'g',
-			'price':8
-			},{
-			'name':'seasoned bread crumbs',
-			'quantity':15,
-			'unit':'g',
-			'price':4
-			}]
+		'name':'ground nutmeg',
+		'quantity':0.5,
+		'unit':'g',
+		'price':12
 		},{
-		'id':101,
-		'name':'MD 2',
-		'type':'main dish',
-		'image':'bakedbrie.jpg',
-		'description':"Here is how you make it... Lore ipsum...",
-		'ingredients':[{ 
-			'name':'ingredient 1',
-			'quantity':1,
-			'unit':'pieces',
-			'price':8
-			},{
-			'name':'ingredient 2',
-			'quantity':15,
-			'unit':'g',
-			'price':7
-			},{
-			'name':'ingredient 3',
-			'quantity':10,
-			'unit':'ml',
-			'price':4
-			}]
+		'name':'white bread',
+		'quantity':2,
+		'unit':'slices',
+		'price':2
+		}]
+	},{
+	'id':2,
+	'name':'Sourdough Starter',
+	'type':'starter',
+	'image':'sourdough.jpg',
+	'description':"Here is how you make it... Lore ipsum...",
+	'ingredients':[{ 
+		'name':'active dry yeast',
+		'quantity':0.5,
+		'unit':'g',
+		'price':4
 		},{
-		'id':102,
-		'name':'MD 3',
-		'type':'main dish',
-		'image':'meatballs.jpg',
-		'description':"Here is how you make it... Lore ipsum...",
-		'ingredients':[{ 
-			'name':'ingredient 1',
-			'quantity':2,
-			'unit':'pieces',
-			'price':8
-			},{
-			'name':'ingredient 2',
-			'quantity':10,
-			'unit':'g',
-			'price':7
-			},{
-			'name':'ingredient 3',
-			'quantity':5,
-			'unit':'ml',
-			'price':4
-			}]
+		'name':'warm water',
+		'quantity':30,
+		'unit':'ml',
+		'price':0
 		},{
-		'id':103,
-		'name':'MD 4',
-		'type':'main dish',
-		'image':'meatballs.jpg',
-		'description':"Here is how you make it... Lore ipsum...",
-		'ingredients':[{ 
-			'name':'ingredient 1',
-			'quantity':1,
-			'unit':'pieces',
-			'price':4
-			},{
-			'name':'ingredient 2',
-			'quantity':12,
-			'unit':'g',
-			'price':7
-			},{
-			'name':'ingredient 3',
-			'quantity':6,
-			'unit':'ml',
-			'price':4
-			}]
+		'name':'all-purpose flour',
+		'quantity':15,
+		'unit':'g',
+		'price':2
+		}]
+	},{
+	'id':3,
+	'name':'Baked Brie with Peaches',
+	'type':'starter',
+	'image':'bakedbrie.jpg',
+	'description':"Here is how you make it... Lore ipsum...",
+	'ingredients':[{ 
+		'name':'round Brie cheese',
+		'quantity':10,
+		'unit':'g',
+		'price':8
 		},{
-		'id':200,
-		'name':'Chocolat Ice cream',
-		'type':'dessert',
-		'image':'icecream.jpg',
-		'description':"Here is how you make it... Lore ipsum...",
-		'ingredients':[{ 
-			'name':'ice cream',
-			'quantity':100,
-			'unit':'ml',
-			'price':6
-			}]
+		'name':'raspberry preserves',
+		'quantity':15,
+		'unit':'g',
+		'price':10
 		},{
-		'id':201,
-		'name':'Vanilla Ice cream',
-		'type':'dessert',
-		'image':'icecream.jpg',
-		'description':"Here is how you make it... Lore ipsum...",
-		'ingredients':[{ 
-			'name':'ice cream',
-			'quantity':100,
-			'unit':'ml',
-			'price':6
-			}]
+		'name':'peaches',
+		'quantity':1,
+		'unit':'',
+		'price':4
+		}]
+	},{
+	'id':100,
+	'name':'Meat balls',
+	'type':'main dish',
+	'image':'meatballs.jpg',
+	'description':"Preheat an oven to 400 degrees F (200 degrees C). Place the beef into a mixing bowl, and season with salt, onion, garlic salt, Italian seasoning, oregano, red pepper flakes, hot pepper sauce, and Worcestershire sauce; mix well. Add the milk, Parmesan cheese, and bread crumbs. Mix until evenly blended, then form into 1 1/2-inch meatballs, and place onto a baking sheet. Bake in the preheated oven until no longer pink in the center, 20 to 25 minutes.",
+	'ingredients':[{ 
+		'name':'extra lean ground beef',
+		'quantity':115,
+		'unit':'g',
+		'price':20
 		},{
-		'id':202,
-		'name':'Strawberry',
-		'type':'dessert',
-		'image':'icecream.jpg',
-		'description':"Here is how you make it... Lore ipsum...",
-		'ingredients':[{ 
-			'name':'ice cream',
-			'quantity':100,
-			'unit':'ml',
-			'price':6
-			}]
-		}
-	];
-
-}
+		'name':'sea salt',
+		'quantity':0.7,
+		'unit':'g',
+		'price':3
+		},{
+		'name':'small onion, diced',
+		'quantity':0.25,
+		'unit':'',
+		'price':2
+		},{
+		'name':'garlic salt',
+		'quantity':0.7,
+		'unit':'g',
+		'price':2
+		},{
+		'name':'Italian seasoning',
+		'quantity':0.6,
+		'unit':'g',
+		'price':3
+		},{
+		'name':'dried oregano',
+		'quantity':0.3,
+		'unit':'g',
+		'price':3
+		},{
+		'name':'crushed red pepper flakes',
+		'quantity':0.6,
+		'unit':'g',
+		'price':3
+		},{
+		'name':'Worcestershire sauce',
+		'quantity':6,
+		'unit':'ml',
+		'price':7
+		},{
+		'name':'milk',
+		'quantity':20,
+		'unit':'ml',
+		'price':4
+		},{
+		'name':'grated Parmesan cheese',
+		'quantity':5,
+		'unit':'g',
+		'price':8
+		},{
+		'name':'seasoned bread crumbs',
+		'quantity':15,
+		'unit':'g',
+		'price':4
+		}]
+	},{
+	'id':101,
+	'name':'MD 2',
+	'type':'main dish',
+	'image':'bakedbrie.jpg',
+	'description':"Here is how you make it... Lore ipsum...",
+	'ingredients':[{ 
+		'name':'ingredient 1',
+		'quantity':1,
+		'unit':'pieces',
+		'price':8
+		},{
+		'name':'ingredient 2',
+		'quantity':15,
+		'unit':'g',
+		'price':7
+		},{
+		'name':'ingredient 3',
+		'quantity':10,
+		'unit':'ml',
+		'price':4
+		}]
+	},{
+	'id':102,
+	'name':'MD 3',
+	'type':'main dish',
+	'image':'meatballs.jpg',
+	'description':"Here is how you make it... Lore ipsum...",
+	'ingredients':[{ 
+		'name':'ingredient 1',
+		'quantity':2,
+		'unit':'pieces',
+		'price':8
+		},{
+		'name':'ingredient 2',
+		'quantity':10,
+		'unit':'g',
+		'price':7
+		},{
+		'name':'ingredient 3',
+		'quantity':5,
+		'unit':'ml',
+		'price':4
+		}]
+	},{
+	'id':103,
+	'name':'MD 4',
+	'type':'main dish',
+	'image':'meatballs.jpg',
+	'description':"Here is how you make it... Lore ipsum...",
+	'ingredients':[{ 
+		'name':'ingredient 1',
+		'quantity':1,
+		'unit':'pieces',
+		'price':4
+		},{
+		'name':'ingredient 2',
+		'quantity':12,
+		'unit':'g',
+		'price':7
+		},{
+		'name':'ingredient 3',
+		'quantity':6,
+		'unit':'ml',
+		'price':4
+		}]
+	},{
+	'id':200,
+	'name':'Chocolat Ice cream',
+	'type':'dessert',
+	'image':'icecream.jpg',
+	'description':"Here is how you make it... Lore ipsum...",
+	'ingredients':[{ 
+		'name':'ice cream',
+		'quantity':100,
+		'unit':'ml',
+		'price':6
+		}]
+	},{
+	'id':201,
+	'name':'Vanilla Ice cream',
+	'type':'dessert',
+	'image':'icecream.jpg',
+	'description':"Here is how you make it... Lore ipsum...",
+	'ingredients':[{ 
+		'name':'ice cream',
+		'quantity':100,
+		'unit':'ml',
+		'price':6
+		}]
+	},{
+	'id':202,
+	'name':'Strawberry',
+	'type':'dessert',
+	'image':'icecream.jpg',
+	'description':"Here is how you make it... Lore ipsum...",
+	'ingredients':[{ 
+		'name':'ice cream',
+		'quantity':100,
+		'unit':'ml',
+		'price':6
+		}]
+	}
+]
\ No newline at end of file

From 2ab6fbf39840738ec057c78d975797795d04aa1d Mon Sep 17 00:00:00 2001
From: Andrew Szucs <andrew0szucs@gmail.com>
Date: Thu, 18 Jan 2018 22:10:36 +0100
Subject: [PATCH 02/45] Create layout for first Home screen

---
 index.html      | 50 ++++++++++++++++++++++++++++++++-----------------
 styles/main.css | 40 +++++++++++++++++++++++++++++++++++++++
 2 files changed, 73 insertions(+), 17 deletions(-)
 create mode 100644 styles/main.css

diff --git a/index.html b/index.html
index 79a6b773b..534540eb5 100644
--- a/index.html
+++ b/index.html
@@ -6,33 +6,49 @@
     <meta name="viewport" content="width=device-width, initial-scale=1">
     <title>Dinner planner</title>
 
-    <!-- Bootstrap CSS -->
-    <link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.0/css/bootstrap.min.css">
+		<!-- Bootstrap CSS -->
+    <!-- <link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.0/css/bootstrap.min.css"> -->
+		<link rel="stylesheet" href="styles/main.css">
 
   </head>
   <body>
-	<div class="container">
-		<h1>Dinner planner</h1>
-		<div id="exampleView">
-			<div>
-				Number of guests: <span id="numberOfGuests"></span>
-			</div>
-			<div>
-          <button id="minusGuest" class="btn"><span class="glyphicon glyphicon-minus"></span></button>
-				<button id="plusGuest" class="btn"><span class="glyphicon glyphicon-plus"></span></button>
-			</div>
+		<div class="container">
+			<header>
+				<h1>Dinner Planner</h1>
+			</header>
+			<main>
+				<div class="content">
+					<div class="text">
+						Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
+					</div>
+					<button class="startButton">Create new dinner</button>
+				</div>
+			</main>
 		</div>
-	</div>
 
-    <!-- jQuery -->
-    <script src="https://code.jquery.com/jquery.js"></script>
-    <!-- Bootstrap JavaScript, needed if you want for instance tabs, models, popovers etc. -->
-    <script src="http://netdna.bootstrapcdn.com/bootstrap/3.1.0/js/bootstrap.min.js"></script>
+		<!-- <div class="container">
+			<h1>Dinner planner</h1>
+			<div id="exampleView">
+				<div>
+					Number of guests: <span id="numberOfGuests"></span>
+				</div>
+				<div>
+						<button id="minusGuest" class="btn"><span class="glyphicon glyphicon-minus"></span></button>
+					<button id="plusGuest" class="btn"><span class="glyphicon glyphicon-plus"></span></button>
+				</div>
+			</div>
+		</div> -->
+
+	<!-- jQuery -->
+	<!-- <script src="https://code.jquery.com/jquery.js"></script> -->
+	<!-- Bootstrap JavaScript, needed if you want for instance tabs, models, popovers etc. -->
+	<!-- <script src="http://netdna.bootstrapcdn.com/bootstrap/3.1.0/js/bootstrap.min.js"></script> -->
 
 	<!-- The application JavaScript code -->
 	<script src="js/app.js"></script>
 	<script src="js/model/dinnerModel.js"></script>
 	<script src="js/view/exampleView.js"></script>
 	<!-- TODO: Here you should include JS code for your other views -->
+
   </body>
 </html>
\ No newline at end of file
diff --git a/styles/main.css b/styles/main.css
new file mode 100644
index 000000000..d745cb04a
--- /dev/null
+++ b/styles/main.css
@@ -0,0 +1,40 @@
+body {
+  margin: 0;
+}
+
+.container {
+  display: grid;
+  grid-template-rows: 6rem auto;
+  text-align: center;
+  height: 100vh;
+}
+
+header {
+  background-color: rgba(173, 173, 173, 1);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+main {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+main .content {
+  max-width: 50%;
+}
+
+main .content .text {
+  margin-bottom: 3rem;
+}
+
+main .startButton {
+  color: rgba(0, 0, 0, 1);
+  background-color: orange;
+  border: 0.1em solid black;
+  box-shadow: 0.1em 0.1em 0.1em black;
+  font-size: 1em;
+  padding: 0.5em;
+}
\ No newline at end of file

From 947971e5ef623d41edda303c7994f7ab199c1a5d Mon Sep 17 00:00:00 2001
From: Andrew Szucs <andrew0szucs@gmail.com>
Date: Fri, 19 Jan 2018 14:01:33 +0100
Subject: [PATCH 03/45] Fixed a typo in a comment

---
 js/model/dinnerModel.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/js/model/dinnerModel.js b/js/model/dinnerModel.js
index a41c06452..7d7b93265 100644
--- a/js/model/dinnerModel.js
+++ b/js/model/dinnerModel.js
@@ -14,7 +14,7 @@ const createDinnerModel = () => {
 
 	const getNumberOfGuests = () => state.numberOfGuests
 	
-	// Returns the dish that is on the menu for selected type 
+	// Returns the dish that is on the menu for the selected type 
 	const getSelectedDish = type => state.menu.find(dish => dish.type === type)
 
 	// Returns all the dishes on the menu.

From c2dd3c8a47b49a313261e5e6e84e857cba240632 Mon Sep 17 00:00:00 2001
From: Andrew Szucs <andrew0szucs@gmail.com>
Date: Fri, 19 Jan 2018 14:02:15 +0100
Subject: [PATCH 04/45] Add the desktop version of the dish search screen with
 the sidebar.

---
 select.html       | 120 ++++++++++++++++++++++++++++++++++++++++++++++
 styles/select.css |  76 +++++++++++++++++++++++++++++
 2 files changed, 196 insertions(+)
 create mode 100644 select.html
 create mode 100644 styles/select.css

diff --git a/select.html b/select.html
new file mode 100644
index 000000000..f27c98546
--- /dev/null
+++ b/select.html
@@ -0,0 +1,120 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <title>Dinner planner</title>
+
+		<!-- Bootstrap CSS -->
+    <!-- <link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.0/css/bootstrap.min.css"> -->
+		<link rel="stylesheet" href="styles/select.css">
+
+  </head>
+  <body>
+		<div class="container">
+			<header>
+				<h1>Dinner Planner</h1>
+			</header>
+			<main>
+				<div class="sidebar">
+					<div class="sidebarHeader">
+            My Dinner
+          </div>
+          <div class="guestSelector">
+            <label for="guestNumber">Guests:</label>
+            <input id="guestNumber" type="number" value="1">
+          </div>
+          <div class="menu">
+            <div class="menuHeader">
+              <div class="dishNameHeader">Dish Name</div>
+              <div class="dishCostHeader">Cost</div>
+            </div>
+            <div class="dishList">
+              <div class="dish">
+                <div class="dishName">Lasagne</div>
+                <div class="dishCost">77.20</div>
+              </div>
+              <div class="dish">
+                  <div class="dishName">Lasagne</div>
+                  <div class="dishCost">77.20</div>
+                </div>
+            </div>
+            <div class="menuCost">
+              <div class="currency">
+                SEK
+              </div>
+              <div class="cost">
+                77.20
+              </div>
+            </div>
+            <button class="confirmMenuButton">Confirm Dinner</button>
+          </div>
+        </div>
+        <div class="content">
+          <div class="dishSearch">
+            <div class="searchHeader">
+              Add another one
+            </div>
+            <div class="dishSearchForm">
+              <input type="search" id="dishSearchField" name="q">
+              <select id="dishTypeSelectField" name="dishTypeSelectField">
+                  <option value="all" selected>All</option>
+                  <option value="starter">Starter</option>
+                  <option value="main dish">Main Dish</option>
+                  <option value="dessert">Dessert</option>
+                </select>
+              <button class="dishSearchButton">Search</button>
+            </div>
+          </div>
+          <div class="dishResultsContainer">
+            <div class="dishResults">
+              <div class="dishResult">
+                <div class="dishResultImageContainer">
+                  <img class="dishResultImage" src="images/bakedbrie.jpg" alt="">
+                </div>
+                <div class="dishResultName">Baked Brie</div>
+              </div>
+              <div class="dishResult">
+                <div class="dishResultImageContainer">
+                  <img class="dishResultImage" src="images/icecream.jpg" alt="">
+                </div>
+                <div class="dishResultName">Ice Cream</div>
+              </div>
+              <div class="dishResult">
+                <div class="dishResultImageContainer">
+                  <img class="dishResultImage" src="images/meatballs.jpg" alt="">
+                </div>
+                <div class="dishResultName">Meatballs</div>
+              </div>
+              <div class="dishResult">
+                <div class="dishResultImageContainer">
+                  <img class="dishResultImage" src="images/sourdough.jpg" alt="">
+                </div>
+                <div class="dishResultName">Sourdough</div>
+              </div>
+              <div class="dishResult">
+                <div class="dishResultImageContainer">
+                  <img class="dishResultImage" src="images/toast.jpg" alt="">
+                </div>
+                <div class="dishResultName">Toast</div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </main>
+		</div>
+
+	<!-- jQuery -->
+	<!-- <script src="https://code.jquery.com/jquery.js"></script> -->
+	<!-- Bootstrap JavaScript, needed if you want for instance tabs, models, popovers etc. -->
+	<!-- <script src="http://netdna.bootstrapcdn.com/bootstrap/3.1.0/js/bootstrap.min.js"></script> -->
+
+	<!-- The application JavaScript code -->
+	<script src="js/app.js"></script>
+	<script src="js/model/dinnerModel.js"></script>
+	<script src="js/view/exampleView.js"></script>
+	<!-- TODO: Here you should include JS code for your other views -->
+
+  </body>
+</html>
\ No newline at end of file
diff --git a/styles/select.css b/styles/select.css
new file mode 100644
index 000000000..ec4ce6d15
--- /dev/null
+++ b/styles/select.css
@@ -0,0 +1,76 @@
+body {
+  margin: 0;
+}
+
+.container {
+  display: grid;
+  grid-template-rows: 6rem auto;
+  text-align: center;
+  height: 100vh;
+}
+
+header {
+  background-color: rgba(173, 173, 173, 1);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+main {
+  display: grid;
+  grid-template-columns: 12rem auto;
+}
+
+.sidebar {
+  background-color: aquamarine;
+  display: grid;
+  grid-template-rows: fit-content(100%) fit-content(100%) auto;
+}
+
+.guestSelector {
+  display: flex;
+
+}
+
+.menu {
+  display: grid;
+  grid-template-rows: fit-content(100%) fit-content(100%) fit-content(100%) fit-content(100%);
+}
+
+.menuHeader, .dish {
+  display: flex;
+}
+
+.menuHeader .dishCostHeader, .dish .dishCost {
+  margin-left: auto;
+}
+
+.menuCost {
+  display: flex;
+  margin-left: auto;
+}
+
+.content {
+  background-color: blanchedalmond;
+}
+
+.dishResultsContainer {
+  margin: 0 auto;
+  width: 80%;
+}
+
+.dishResults {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(10rem, 1fr));
+}
+
+.dishResult {
+  display: grid;
+  grid-template-rows: 140px auto;
+}
+
+.dishResultImageContainer {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
\ No newline at end of file

From c5cf573e1acb138af42e853a3697f363a491235e Mon Sep 17 00:00:00 2001
From: Andrew Szucs <andrew0szucs@gmail.com>
Date: Fri, 19 Jan 2018 21:57:42 +0100
Subject: [PATCH 05/45] Add responsive sidebar to dish search screen

---
 index.html              |  3 +-
 js/model/dinnerModel.js |  3 ++
 js/toggleMenu.js        | 20 +++++++++++
 select.html             | 54 ++++++++++++++++------------
 styles/select.css       | 79 +++++++++++++++++++++++++++++++++++++++--
 5 files changed, 133 insertions(+), 26 deletions(-)
 create mode 100644 js/toggleMenu.js

diff --git a/index.html b/index.html
index 534540eb5..a516875bb 100644
--- a/index.html
+++ b/index.html
@@ -10,7 +10,8 @@
     <!-- <link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.0/css/bootstrap.min.css"> -->
 		<link rel="stylesheet" href="styles/main.css">
 
-  </head>
+	</head>
+	
   <body>
 		<div class="container">
 			<header>
diff --git a/js/model/dinnerModel.js b/js/model/dinnerModel.js
index 7d7b93265..8bf7009d2 100644
--- a/js/model/dinnerModel.js
+++ b/js/model/dinnerModel.js
@@ -23,6 +23,9 @@ const createDinnerModel = () => {
 	// Returns all ingredients for all the dishes on the menu.
 	const getAllIngredients = () => state.menu.map(dish => dish.ingredients)
 
+	// Return the full price of a given dish (represented by id)
+	const getPriceForDish = (id) => getDish(id).ingredients.reduce((acc, curr) => acc = acc + curr.price)
+
 	// Returns the total price of the menu (all the ingredients multiplied by number of guests).
 	const getTotalMenuPrice = () => getAllIngredients().reduce((acc, curr) => acc = acc + state.numberOfGuests * curr.price, 0)
 	
diff --git a/js/toggleMenu.js b/js/toggleMenu.js
new file mode 100644
index 000000000..57fe2eb5c
--- /dev/null
+++ b/js/toggleMenu.js
@@ -0,0 +1,20 @@
+const toggleMenu = () => {
+  const sidebarContent = document.getElementById('sidebarContent')
+  const collapsedMenuCost = document.getElementById('collapsedMenuCost')
+
+  const sidebarContentDisplay = window.getComputedStyle(sidebarContent).display
+
+  if(sidebarContentDisplay === 'none') {
+    sidebarContent.classList.remove('hiddenOnMobile')
+    sidebarContent.classList.add('shownOnMobile')
+    collapsedMenuCost.classList.remove('shownOnMobile')
+    collapsedMenuCost.classList.add('hiddenOnMobile')
+  }
+  else {
+    sidebarContent.classList.remove('shownOnMobile')
+    sidebarContent.classList.add('hiddenOnMobile')
+    collapsedMenuCost.classList.remove('hiddenOnMobile')
+    collapsedMenuCost.classList.add('shownOnMobile')
+  }
+
+}
\ No newline at end of file
diff --git a/select.html b/select.html
index f27c98546..fa219a8b1 100644
--- a/select.html
+++ b/select.html
@@ -17,39 +17,46 @@
 				<h1>Dinner Planner</h1>
 			</header>
 			<main>
-				<div class="sidebar">
+				<div class="sidebar" id="sidebar">
 					<div class="sidebarHeader">
-            My Dinner
-          </div>
-          <div class="guestSelector">
-            <label for="guestNumber">Guests:</label>
-            <input id="guestNumber" type="number" value="1">
+            <div class="sidebarTitle">
+              My Dinner
+            </div>
+            <div class="shownOnMobile" id="collapsedMenuCost">
+              <span class="currency">SEK</span> <span class="cost">77.20</span>
+            </div>
+            <button id="expandButton" class="shownOnMobile" onclick="toggleMenu()">
+              Expand
+            </button>
           </div>
-          <div class="menu">
-            <div class="menuHeader">
-              <div class="dishNameHeader">Dish Name</div>
-              <div class="dishCostHeader">Cost</div>
+          
+          <div id="sidebarContent" class="hiddenOnMobile">
+            <div class="guestSelector" id="guestSelector">
+              <label for="guestNumber">Guests:</label>
+              <input id="guestNumber" type="number" value="1">
             </div>
-            <div class="dishList">
-              <div class="dish">
-                <div class="dishName">Lasagne</div>
-                <div class="dishCost">77.20</div>
+            <div class="menu" id="menu">
+              <div class="menuHeader" id="menuHeader">
+                <div class="dishNameHeader">Dish Name</div>
+                <div class="dishCostHeader">Cost</div>
               </div>
-              <div class="dish">
+              <div class="dishList" id="dishList">
+                <div class="dish" >
                   <div class="dishName">Lasagne</div>
                   <div class="dishCost">77.20</div>
                 </div>
-            </div>
-            <div class="menuCost">
-              <div class="currency">
-                SEK
+                <div class="dish">
+                    <div class="dishName">Lasagne</div>
+                    <div class="dishCost">77.20</div>
+                  </div>
               </div>
-              <div class="cost">
-                77.20
+              <div class="menuCost">
+                <span class="currency">SEK</span> <span class="cost">77.20</span>
               </div>
+              <button class="confirmMenuButton" id="confirmMenuButton">Confirm Dinner</button>
             </div>
-            <button class="confirmMenuButton">Confirm Dinner</button>
           </div>
+
         </div>
         <div class="content">
           <div class="dishSearch">
@@ -111,7 +118,8 @@ <h1>Dinner Planner</h1>
 	<!-- <script src="http://netdna.bootstrapcdn.com/bootstrap/3.1.0/js/bootstrap.min.js"></script> -->
 
 	<!-- The application JavaScript code -->
-	<script src="js/app.js"></script>
+  <script src="js/toggleMenu.js"></script>
+  <script src="js/app.js"></script>
 	<script src="js/model/dinnerModel.js"></script>
 	<script src="js/view/exampleView.js"></script>
 	<!-- TODO: Here you should include JS code for your other views -->
diff --git a/styles/select.css b/styles/select.css
index ec4ce6d15..292f23bf5 100644
--- a/styles/select.css
+++ b/styles/select.css
@@ -29,7 +29,7 @@ main {
 
 .guestSelector {
   display: flex;
-
+  
 }
 
 .menu {
@@ -46,10 +46,19 @@ main {
 }
 
 .menuCost {
-  display: flex;
   margin-left: auto;
 }
 
+.confirmMenuButton {
+  color: rgba(0, 0, 0, 1);
+  background-color: orange;
+  border: 0.1em solid black;
+  box-shadow: 0.1em 0.1em 0.1em black;
+  font-size: 1em;
+  padding: 0.5em;
+  margin: 1em;
+}
+
 .content {
   background-color: blanchedalmond;
 }
@@ -73,4 +82,70 @@ main {
   display: flex;
   align-items: center;
   justify-content: center;
+}
+
+.show {
+  display: inline;
+}
+
+.hide {
+  display: none;
+}
+
+@media (min-width: 592px) {
+  /* Collapsible Menu changes */
+  #collapsedMenuCost {
+    display: none;
+  }
+  
+  #expandButton {
+    display: none;
+  }
+
+  #sidebarContent {
+    display: inline;
+  }
+  
+  .hiddenOnMobile {
+    display: inline;
+  }
+
+  .shownOnMobile {
+    display: none;
+  }
+}
+
+@media (max-width: 591px) {
+  main {
+    display: block;
+  }
+
+  .sidebarHeader {
+    display: flex;
+  }
+
+  .sidebarTitle {
+    margin-right: auto;
+  }
+
+  /* Collapsible Menu changes */
+  .hiddenOnMobile {
+    display: none;
+  }
+
+  .shownOnMobile {
+    display: inline;
+  }
+  /* #collapsedMenuCost {
+    display: inline;
+  }
+  
+  #expandButton {
+    display: inline;
+  }
+
+  #sidebarContent {
+    display: none;
+  } */
+  
 }
\ No newline at end of file

From 973417e958d32198a52cfedb1355e9767af2d770 Mon Sep 17 00:00:00 2001
From: Andrew Szucs <andrew0szucs@gmail.com>
Date: Sat, 20 Jan 2018 13:28:21 +0100
Subject: [PATCH 06/45] Add Dinner Overview Confirm screen

---
 confirm.html       | 211 +++++++++++++++++++++++++++++++++++++++++++++
 styles/confirm.css |  30 +++++++
 2 files changed, 241 insertions(+)
 create mode 100644 confirm.html
 create mode 100644 styles/confirm.css

diff --git a/confirm.html b/confirm.html
new file mode 100644
index 000000000..bd66787a4
--- /dev/null
+++ b/confirm.html
@@ -0,0 +1,211 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <title>Dinner planner</title>
+
+		<!-- Bootstrap CSS -->
+    <!-- <link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.0/css/bootstrap.min.css"> -->
+		<link rel="stylesheet" href="styles/confirm.css">
+
+  </head>
+
+  <body>
+		<div class="container">
+
+      <div id="header" class="verticallyCentered">
+        <h1>Dinner Planner</h1>
+      </div>
+      
+      <div id="statusBar" class="verticallyCentered">
+        <p id="statusTitle">My Dinner: <span id="numberOfGuests">3</span> people</p>
+        <button id="backButton" class="primaryButton" >Go back and edit dinner</button>
+      </div>
+
+      <div id="menuSummary" class="verticallyCentered">
+
+        <div id="starter" class="dishItemContainer">
+          <div class="verticallyCentered dishImage">
+            <img src="images/bakedbrie.jpg" alt="">
+          </div>
+          <p class="dishName">Baked Brie</p>
+          <p class="dishPrice">
+            <span class="value">77.20</span> <span class="currency">SEK</span>
+          </p>
+        </div>
+
+        <div id="mainCourse" class="dishItemContainer">
+          <div class="verticallyCentered dishImage">
+            <img src="images/icecream.jpg" alt="">
+          </div>
+          <p class="dishName">Ice Cream</p>
+          <p class="dishPrice">
+            <span class="value">77.20</span> <span class="currency">SEK</span>
+          </p>
+        </div>
+
+        <div id="dessert" class="dishItemContainer">
+          <div class="verticallyCentered dishImage">
+            <img src="images/meatballs.jpg" alt="">
+          </div>
+          <p class="dishName">Meatballs</p>
+          <p class="dishPrice">
+            <span class="value">77.20</span> <span class="currency">SEK</span>
+          </p>
+        </div>
+
+        <div id="totalPrice" class="dishItemContainer">
+          <div class="verticallyCentered dishImage"></div>
+          <p class="dishName">Total:</p>
+          <p class="dishPrice">
+            <span class="value">77.20</span> <span class="currency">SEK</span>
+          </p>
+        </div>
+
+      </div>        
+
+      <div id="printButtonContainer" class="item">
+        <button id="printButton" class="primaryButton">Print Full Recipe</button>
+      </div>
+
+    </div>
+
+    <style>
+      p {
+        margin: 0;
+      }
+
+      .primaryButton {
+        color: rgba(0, 0, 0, 1);
+        background-color: orange;
+        border: 0.1em solid black;
+        box-shadow: 0.1em 0.1em 0.1em black;
+        font-size: 1em;
+        padding: 0.5em;
+      }
+
+      .container {
+        /* height: 100vh; */
+        display: grid;
+        grid-template-rows: 6rem 2rem auto;
+        grid-template-areas:
+          "header"
+          "statusBar"
+          "menuSummary"
+          "printButtonContainer";
+      }
+
+      .verticallyCentered {
+        display: flex;
+        justify-content: center;
+        align-items: center;
+      }
+
+      #header {
+        grid-area: header;
+        background-color: rgba(173, 173, 173, 1);
+      }
+
+      #statusBar {
+        grid-area: statusBar;
+        padding: 1.5rem 0rem;
+        border-bottom: 0.2rem solid black;
+      }
+
+      #statusTitle {
+        margin-right: auto;
+      }
+
+      #backButton {
+        margin-left: auto;
+      }
+
+      #menuSummary {
+        grid-area: menuSummary;
+        display: grid;
+        grid-gap: 3rem;
+        grid-template-areas: 
+          "starter mainCourse dessert totalPrice"
+      }
+
+      #starter {
+        grid-area: starter;
+      }
+
+      #mainCourse {
+        grid-area: mainCourse;
+      }
+
+      #dessert {
+        grid-area: dessert;
+      }
+
+      #totalPrice {
+        grid-area: totalPrice;
+        border-left: 0.2rem solid black;
+        padding: 0rem 1rem;
+      }
+
+      .dishItemContainer {
+        display: grid;
+        grid-template-rows: 140px repeat(2, auto);
+        grid-template-areas:
+          "dishImage"
+          "dishName"
+          "dishPrice";
+      }
+
+      .dishImage {
+        grid-area: dishImage;
+      }
+
+      .dishName {
+        grid-area: dishName;
+      }
+
+      .dishPrice {
+        grid-area: dishPrice;
+      }
+
+      #printButtonContainer {
+        grid-area: printButtonContainer;
+        border-top: 0.2rem solid black;
+        padding: 2rem 0rem;
+        margin-bottom: 2rem;
+      }
+
+      @media (max-width: 700px) {
+        #menuSummary {
+          grid-template-areas:
+            "starter"
+            "mainCourse"
+            "dessert"
+            "totalPrice"
+        }
+
+        #totalPrice {
+          display: inline;
+          border-left: none;
+          border-top: 0.2rem solid black;
+          padding: 1rem 0rem;
+        }
+      }
+
+    </style>
+
+    <!-- jQuery -->
+    <!-- <script src="https://code.jquery.com/jquery.js"></script> -->
+    <!-- Bootstrap JavaScript, needed if you want for instance tabs, models, popovers etc. -->
+    <!-- <script src="http://netdna.bootstrapcdn.com/bootstrap/3.1.0/js/bootstrap.min.js"></script> -->
+
+    <!-- The application JavaScript code -->
+    <script src="js/toggleMenu.js"></script>
+    <script src="js/app.js"></script>
+    <script src="js/model/dinnerModel.js"></script>
+    <script src="js/view/exampleView.js"></script>
+    <!-- TODO: Here you should include JS code for your other views -->
+
+  </body>
+</html>
\ No newline at end of file
diff --git a/styles/confirm.css b/styles/confirm.css
new file mode 100644
index 000000000..24205ccc9
--- /dev/null
+++ b/styles/confirm.css
@@ -0,0 +1,30 @@
+body {
+  margin: 0;
+}
+
+.container {
+  display: grid;
+  grid-template-rows: 6rem auto;
+  text-align: center;
+  height: 100vh;
+}
+
+header {
+  background-color: rgba(173, 173, 173, 1);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.main {
+  display: grid;
+  grid-template-rows: fit-content(100%) auto fit-content(100%);
+}
+
+.confirmHeader {
+  display: flex;
+}
+
+.confirmBackButton {
+  margin-left: auto;
+}
\ No newline at end of file

From d36bdae97021ea1b3543165df02debda6d72fd9e Mon Sep 17 00:00:00 2001
From: Andrew Szucs <andrew0szucs@gmail.com>
Date: Sat, 20 Jan 2018 13:33:02 +0100
Subject: [PATCH 07/45] Remove CSS from Confirm screen HTML and put it into the
 CSS file.

---
 confirm.html       | 123 ---------------------------------------------
 styles/confirm.css | 115 ++++++++++++++++++++++++++++++++++++++----
 2 files changed, 105 insertions(+), 133 deletions(-)

diff --git a/confirm.html b/confirm.html
index bd66787a4..1f4bf95f2 100644
--- a/confirm.html
+++ b/confirm.html
@@ -72,129 +72,6 @@ <h1>Dinner Planner</h1>
 
     </div>
 
-    <style>
-      p {
-        margin: 0;
-      }
-
-      .primaryButton {
-        color: rgba(0, 0, 0, 1);
-        background-color: orange;
-        border: 0.1em solid black;
-        box-shadow: 0.1em 0.1em 0.1em black;
-        font-size: 1em;
-        padding: 0.5em;
-      }
-
-      .container {
-        /* height: 100vh; */
-        display: grid;
-        grid-template-rows: 6rem 2rem auto;
-        grid-template-areas:
-          "header"
-          "statusBar"
-          "menuSummary"
-          "printButtonContainer";
-      }
-
-      .verticallyCentered {
-        display: flex;
-        justify-content: center;
-        align-items: center;
-      }
-
-      #header {
-        grid-area: header;
-        background-color: rgba(173, 173, 173, 1);
-      }
-
-      #statusBar {
-        grid-area: statusBar;
-        padding: 1.5rem 0rem;
-        border-bottom: 0.2rem solid black;
-      }
-
-      #statusTitle {
-        margin-right: auto;
-      }
-
-      #backButton {
-        margin-left: auto;
-      }
-
-      #menuSummary {
-        grid-area: menuSummary;
-        display: grid;
-        grid-gap: 3rem;
-        grid-template-areas: 
-          "starter mainCourse dessert totalPrice"
-      }
-
-      #starter {
-        grid-area: starter;
-      }
-
-      #mainCourse {
-        grid-area: mainCourse;
-      }
-
-      #dessert {
-        grid-area: dessert;
-      }
-
-      #totalPrice {
-        grid-area: totalPrice;
-        border-left: 0.2rem solid black;
-        padding: 0rem 1rem;
-      }
-
-      .dishItemContainer {
-        display: grid;
-        grid-template-rows: 140px repeat(2, auto);
-        grid-template-areas:
-          "dishImage"
-          "dishName"
-          "dishPrice";
-      }
-
-      .dishImage {
-        grid-area: dishImage;
-      }
-
-      .dishName {
-        grid-area: dishName;
-      }
-
-      .dishPrice {
-        grid-area: dishPrice;
-      }
-
-      #printButtonContainer {
-        grid-area: printButtonContainer;
-        border-top: 0.2rem solid black;
-        padding: 2rem 0rem;
-        margin-bottom: 2rem;
-      }
-
-      @media (max-width: 700px) {
-        #menuSummary {
-          grid-template-areas:
-            "starter"
-            "mainCourse"
-            "dessert"
-            "totalPrice"
-        }
-
-        #totalPrice {
-          display: inline;
-          border-left: none;
-          border-top: 0.2rem solid black;
-          padding: 1rem 0rem;
-        }
-      }
-
-    </style>
-
     <!-- jQuery -->
     <!-- <script src="https://code.jquery.com/jquery.js"></script> -->
     <!-- Bootstrap JavaScript, needed if you want for instance tabs, models, popovers etc. -->
diff --git a/styles/confirm.css b/styles/confirm.css
index 24205ccc9..f82dcb794 100644
--- a/styles/confirm.css
+++ b/styles/confirm.css
@@ -2,29 +2,124 @@ body {
   margin: 0;
 }
 
+p {
+  margin: 0;
+}
+
+.primaryButton {
+  color: rgba(0, 0, 0, 1);
+  background-color: orange;
+  border: 0.1em solid black;
+  box-shadow: 0.1em 0.1em 0.1em black;
+  font-size: 1em;
+  padding: 0.5em;
+}
+
 .container {
-  display: grid;
-  grid-template-rows: 6rem auto;
   text-align: center;
   height: 100vh;
+  display: grid;
+  grid-template-rows: 6rem 2rem auto;
+  grid-template-areas:
+    "header"
+    "statusBar"
+    "menuSummary"
+    "printButtonContainer";
 }
 
-header {
-  background-color: rgba(173, 173, 173, 1);
+.verticallyCentered {
   display: flex;
-  align-items: center;
   justify-content: center;
+  align-items: center;
+}
+
+#header {
+  grid-area: header;
+  background-color: rgba(173, 173, 173, 1);
+}
+
+#statusBar {
+  grid-area: statusBar;
+  padding: 1.5rem 0rem;
+  border-bottom: 0.2rem solid black;
+}
+
+#statusTitle {
+  margin-right: auto;
+}
+
+#backButton {
+  margin-left: auto;
 }
 
-.main {
+#menuSummary {
+  grid-area: menuSummary;
   display: grid;
-  grid-template-rows: fit-content(100%) auto fit-content(100%);
+  grid-gap: 3rem;
+  grid-template-areas: 
+    "starter mainCourse dessert totalPrice"
 }
 
-.confirmHeader {
-  display: flex;
+#starter {
+  grid-area: starter;
+}
+
+#mainCourse {
+  grid-area: mainCourse;
+}
+
+#dessert {
+  grid-area: dessert;
+}
+
+#totalPrice {
+  grid-area: totalPrice;
+  border-left: 0.2rem solid black;
+  padding: 0rem 1rem;
+}
+
+.dishItemContainer {
+  display: grid;
+  grid-template-rows: 140px repeat(2, auto);
+  grid-template-areas:
+    "dishImage"
+    "dishName"
+    "dishPrice";
 }
 
-.confirmBackButton {
+.dishImage {
+  grid-area: dishImage;
+}
+
+.dishName {
+  grid-area: dishName;
+}
+
+.dishPrice {
+  grid-area: dishPrice;
   margin-left: auto;
+}
+
+#printButtonContainer {
+  grid-area: printButtonContainer;
+  border-top: 0.2rem solid black;
+  padding: 2rem 0rem;
+  margin-bottom: 2rem;
+}
+
+@media (max-width: 700px) {
+  #menuSummary {
+    grid-template-areas:
+      "starter"
+      "mainCourse"
+      "dessert"
+      "totalPrice"
+  }
+
+  #totalPrice {
+    display: inline;
+    border-left: none;
+    border-top: 0.2rem solid black;
+    padding: 1rem 0rem;
+  }
 }
\ No newline at end of file

From 35f96102e65fbf4f57ddaf24f428ae4e63d6ed5d Mon Sep 17 00:00:00 2001
From: Andrew Szucs <andrew0szucs@gmail.com>
Date: Sun, 21 Jan 2018 16:26:36 +0100
Subject: [PATCH 08/45] Add Dish screen and Printout screen.

---
 dish.html           | 146 ++++++++++++++++++++++++++
 printout.html       | 105 ++++++++++++++++++
 styles/dish.css     | 251 ++++++++++++++++++++++++++++++++++++++++++++
 styles/printout.css |  84 +++++++++++++++
 4 files changed, 586 insertions(+)
 create mode 100644 dish.html
 create mode 100644 printout.html
 create mode 100644 styles/dish.css
 create mode 100644 styles/printout.css

diff --git a/dish.html b/dish.html
new file mode 100644
index 000000000..319424524
--- /dev/null
+++ b/dish.html
@@ -0,0 +1,146 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <title>Dinner planner</title>
+
+		<!-- Bootstrap CSS -->
+    <!-- <link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.0/css/bootstrap.min.css"> -->
+		<link rel="stylesheet" href="styles/dish.css">
+
+  </head>
+
+  <body>
+		<div class="container">
+
+      <div id="header" class="verticallyCentered">
+        <h1>Dinner Planner</h1>
+      </div>
+      
+      <div id="sidebar">
+        
+        <div id="titleBar">
+          <h4>My Dinner</h4>
+        </div>
+
+        <div id="guestSelector">
+          <label for="guestNumber">Guests:</label>
+          <input id="guestNumber" type="number" value="1">
+        </div>
+
+        <div id="dishTable">
+          <div id="tableHeader">
+            <div id="tableName">Dish name</div>
+            <div id="tableCost">Cost</div>
+          </div>
+
+          <div id="tableContent">
+
+            <div class="tableRow">
+              <div class="rowName">Lasagne</div>
+              <div class="rowCost">77.20</div>
+            </div>
+
+            <div class="tableRow">
+              <div class="rowName">Lasagne</div>
+              <div class="rowCost">77.20</div>
+            </div>
+
+          </div>
+
+          <div id="tableFooter">
+            <div id="tableTotalPrice" class="totalPrice">
+              <span id="currency">SEK</span> <span id="value">77.20</span>
+            </div>
+          </div>
+          
+        </div>
+
+        <div id="confirmButtonContainer">
+          <button class="primaryButton" id="confirmMenuButton">Confirm Dinner</button>
+        </div>
+
+      </div>
+
+      <div id="content">
+        <div id="dishDetails">
+          
+          <div id="dishDescription">
+            <div id="dishTitle">
+              <h2>Baked Brie</h2>
+            </div>
+            <div id="dishImage">
+              <img src="images/bakedbrie.jpg" alt="">
+            </div>
+            <div id="dishDescription">
+              <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Eget aliquet nibh praesent tristique. Quis hendrerit dolor magna eget. In cursus turpis massa tincidunt dui ut ornare.</p>
+            </div>
+            <button id="backButton" class="primaryButton">Back to Search</button>
+          </div>
+          
+          <div id="ingredientsList">
+            
+            <div id="ingredientsTitle">
+              <h3>Ingredients for <span id="numberOfGuests">3</span> people</h3>
+            </div>
+
+            <div id="ingredientsTable">
+
+              <div class="ingredientsTableRow">
+                <div class="ingredientQuantity">
+                  <span id="quantity">2</span> <span id="unit">tbsp</span>
+                </div>
+                <div class="ingredientName">olive oil</div>
+                <div class="ingredientCurrency">SEK</div>
+                <div class="ingredientPrice">0.20</div>
+              </div>
+  
+              <div class="ingredientsTableRow">
+                <div class="ingredientQuantity">
+                  <span id="quantity">750</span> <span id="unit">g</span>
+                </div>
+                <div class="ingredientName">lean beef mince</div>
+                <div class="ingredientCurrency">SEK</div>
+                <div class="ingredientPrice">10.00</div>
+              </div>
+  
+            </div>
+
+            <div id="ingredientsFooter">
+              <div id="addToMenu" class="verticallyCentered">
+                <button id="addToMenuButton" class="primaryButton">Add to menu</button>
+              </div>
+              <div id="ingredientsTotalPriceCurrency">SEK</div>
+              <div id="ingredientsTotalPrice">10.00</div>
+            </div>
+
+          </div>
+          
+          <div id="dishPreparation">
+            <h3>Preparation</h3>
+            <div id="dishPreparationText">
+              <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Eget aliquet nibh praesent tristique. Quis hendrerit dolor magna eget. In cursus turpis massa tincidunt dui ut ornare. Sed adipiscing diam donec adipiscing tristique risus nec feugiat in. Dolor sit amet consectetur adipiscing elit. Ac tincidunt vitae semper quis lectus nulla at. Mauris augue neque gravida in fermentum. Egestas diam in arcu cursus euismod quis viverra nibh. Vulputate enim nulla aliquet porttitor lacus luctus accumsan. Quis varius quam quisque id. Non odio euismod lacinia at quis risus sed vulputate. Id cursus metus aliquam eleifend mi in. Tortor pretium viverra suspendisse potenti nullam ac tortor.</p>
+            </div>
+          </div>
+
+        </div>
+      </div>
+
+    </div>
+
+    <!-- jQuery -->
+    <!-- <script src="https://code.jquery.com/jquery.js"></script> -->
+    <!-- Bootstrap JavaScript, needed if you want for instance tabs, models, popovers etc. -->
+    <!-- <script src="http://netdna.bootstrapcdn.com/bootstrap/3.1.0/js/bootstrap.min.js"></script> -->
+
+    <!-- The application JavaScript code -->
+    <script src="js/toggleMenu.js"></script>
+    <script src="js/app.js"></script>
+    <script src="js/model/dinnerModel.js"></script>
+    <script src="js/view/exampleView.js"></script>
+    <!-- TODO: Here you should include JS code for your other views -->
+
+  </body>
+</html>
\ No newline at end of file
diff --git a/printout.html b/printout.html
new file mode 100644
index 000000000..0970df4e0
--- /dev/null
+++ b/printout.html
@@ -0,0 +1,105 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <title>Dinner planner</title>
+
+		<!-- Bootstrap CSS -->
+    <!-- <link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.0/css/bootstrap.min.css"> -->
+		<link rel="stylesheet" href="styles/printout.css">
+
+  </head>
+
+  <body>
+		<div class="container">
+
+      <div id="header" class="verticallyCentered">
+        <h1>Dinner Planner</h1>
+      </div>
+      
+      <div id="statusBar" class="verticallyCentered">
+        <p id="statusTitle">My Dinner: <span id="numberOfGuests">3</span> people</p>
+        <button id="backButton" class="primaryButton" >Go back and edit dinner</button>
+      </div>
+
+      <div id="recipes">
+
+        <div class="recipe">
+          <div class="verticallyCentered recipeImage">
+            <img src="images/bakedbrie.jpg" alt="">
+          </div>
+          
+          <div class="recipeTextbox">
+            <h2 class="recipeName">Baked Brie</h2>
+            <p class="recipeDescriptionText">
+              Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Eget aliquet nibh praesent tristique. Quis hendrerit dolor magna eget. In cursus turpis massa tincidunt dui ut ornare. Sed adipiscing diam donec adipiscing tristique risus nec feugiat in.
+            </p>
+          </div>
+
+          <div class="recipeTextbox">
+            <h3>Preparation</h3>
+            <p class="recipePreparationText">
+              Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Eget aliquet nibh praesent tristique. Quis hendrerit dolor magna eget. In cursus turpis massa tincidunt dui ut ornare. Sed adipiscing diam donec adipiscing tristique risus nec feugiat in. Dolor sit amet consectetur adipiscing elit. Ac tincidunt vitae semper quis lectus nulla at. Mauris augue neque gravida in fermentum. Egestas diam in arcu cursus euismod quis viverra nibh. Vulputate enim nulla aliquet porttitor lacus luctus accumsan. Quis varius quam quisque id. Non odio euismod lacinia at quis risus sed vulputate. Id cursus metus aliquam eleifend mi in. Tortor pretium viverra suspendisse potenti nullam ac tortor.
+            </p>
+          </div>
+        </div>
+
+        <div class="recipe">
+          <div class="verticallyCentered recipeImage">
+            <img src="images/icecream.jpg" alt="">
+          </div>
+          
+          <div class="recipeTextbox">
+            <h2 class="recipeName">Ice Cream</h2>
+            <p class="recipeDescriptionText">
+              Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Eget aliquet nibh praesent tristique. Quis hendrerit dolor magna eget. In cursus turpis massa tincidunt dui ut ornare. Sed adipiscing diam donec adipiscing tristique risus nec feugiat in.
+            </p>
+          </div>
+
+          <div class="recipeTextbox">
+            <h3>Preparation</h3>
+            <p class="recipePreparationText">
+              Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Eget aliquet nibh praesent tristique. Quis hendrerit dolor magna eget. In cursus turpis massa tincidunt dui ut ornare. Sed adipiscing diam donec adipiscing tristique risus nec feugiat in. Dolor sit amet consectetur adipiscing elit. Ac tincidunt vitae semper quis lectus nulla at. Mauris augue neque gravida in fermentum. Egestas diam in arcu cursus euismod quis viverra nibh. Vulputate enim nulla aliquet porttitor lacus luctus accumsan. Quis varius quam quisque id. Non odio euismod lacinia at quis risus sed vulputate. Id cursus metus aliquam eleifend mi in. Tortor pretium viverra suspendisse potenti nullam ac tortor.
+            </p>
+          </div>
+        </div>
+
+        <div class="recipe">
+            <div class="verticallyCentered recipeImage">
+              <img src="images/meatballs.jpg" alt="">
+            </div>
+            
+            <div class="recipeTextbox">
+              <h2 class="recipeName">Meatball</h2>
+              <p class="recipeDescriptionText">
+                Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Eget aliquet nibh praesent tristique. Quis hendrerit dolor magna eget. In cursus turpis massa tincidunt dui ut ornare. Sed adipiscing diam donec adipiscing tristique risus nec feugiat in.
+              </p>
+            </div>
+            <div class="recipeTextbox">
+              <h3 class="recipePreparationTitle">Preparation</h3>
+              <p class="recipePreparationText">
+                Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Eget aliquet nibh praesent tristique. Quis hendrerit dolor magna eget. In cursus turpis massa tincidunt dui ut ornare. Sed adipiscing diam donec adipiscing tristique risus nec feugiat in. Dolor sit amet consectetur adipiscing elit. Ac tincidunt vitae semper quis lectus nulla at. Mauris augue neque gravida in fermentum. Egestas diam in arcu cursus euismod quis viverra nibh. Vulputate enim nulla aliquet porttitor lacus luctus accumsan. Quis varius quam quisque id. Non odio euismod lacinia at quis risus sed vulputate. Id cursus metus aliquam eleifend mi in. Tortor pretium viverra suspendisse potenti nullam ac tortor.
+              </p>
+            </div>
+          </div>
+
+      </div>
+
+    </div>
+
+    <!-- jQuery -->
+    <!-- <script src="https://code.jquery.com/jquery.js"></script> -->
+    <!-- Bootstrap JavaScript, needed if you want for instance tabs, models, popovers etc. -->
+    <!-- <script src="http://netdna.bootstrapcdn.com/bootstrap/3.1.0/js/bootstrap.min.js"></script> -->
+
+    <!-- The application JavaScript code -->
+    <script src="js/toggleMenu.js"></script>
+    <script src="js/app.js"></script>
+    <script src="js/model/dinnerModel.js"></script>
+    <script src="js/view/exampleView.js"></script>
+    <!-- TODO: Here you should include JS code for your other views -->
+
+  </body>
+</html>
\ No newline at end of file
diff --git a/styles/dish.css b/styles/dish.css
new file mode 100644
index 000000000..b21e1b340
--- /dev/null
+++ b/styles/dish.css
@@ -0,0 +1,251 @@
+body {
+  margin: 0;
+}
+
+h4 {
+  margin: 0;
+}
+
+p {
+  margin: 0;
+}
+
+.left {
+  text-align: left;
+}
+
+.right {
+  text-align: right;
+}
+
+.primaryButton {
+  color: rgba(0, 0, 0, 1);
+  background-color: orange;
+  border: 0.1em solid black;
+  box-shadow: 0.1em 0.1em 0.1em black;
+  font-size: 1em;
+  padding: 0.5em;
+}
+
+.verticallyCentered {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+.container {
+  text-align: center;
+  height: 100vh;
+  display: grid;
+  grid-template-columns: 12rem auto;
+  grid-template-rows: 6rem auto;
+  grid-template-areas:
+    "header     header"
+    "sidebar  content";
+}
+
+#header {
+  grid-area: header;
+  background-color: rgba(173, 173, 173, 1);
+}
+
+#sidebar {
+  grid-area: sidebar;
+  display: grid;
+  grid-template-rows: 2rem 2rem fit-content(100%) 3rem;
+  grid-template-areas: 
+    "titleBar"
+    "guestSelector"
+    "dishTable"
+    "confirmButtonContainer";
+  
+  background-color: aqua;
+  text-align: left;
+}
+
+#titleBar {
+  grid-area: titleBar;
+}
+
+#guestSelector {
+  grid-area: guestSelector;
+}
+
+#dishTable {
+  grid-area: dishTable;
+  display: grid;
+  grid-template-areas:
+    "tableHeader"
+    "tableContent"
+    "tableFooter"
+}
+
+#tableHeader {
+  grid-area: tableHeader;
+  display: grid;
+  grid-template-areas:
+    "tableName tableCost";
+
+  background-color: gainsboro;
+  font-weight: bold;
+}
+
+#tableName {
+  grid-area: tableName;
+  text-align: left;
+}
+
+#tableCost {
+  grid-area: tableCost;
+  text-align: right;
+}
+
+#tableContent {
+  grid-area: tableContent;
+  display: grid;
+  grid-template-rows: auto;
+}
+
+.tableRow {
+  display: grid;
+  grid-template-areas:
+    "rowName rowCost";
+}
+
+.rowName {
+  grid-area: rowName;
+  text-align: left;
+}
+
+.rowCost {
+  grid-area: rowCost;
+  text-align: right;
+}
+
+#tableFooter {
+  grid-area: tableFooter;
+  display: flex;
+  align-items: baseline;
+  justify-content: flex-end;
+}
+
+#confirmButtonContainer {
+  grid-area: confirmButtonContainer;
+  text-align: center;
+}
+
+#content {
+  background-color: blanchedalmond;
+  grid-area: content;
+}
+
+#dishDetails {
+  display: grid;
+  grid-template-areas:
+    "dishDescription ingredientsList"
+    "dishPreparation dishPreparation";
+
+  text-align: left;
+}
+
+#dishDescription {
+  grid-area: dishDescription;
+}
+
+#ingredientsList {
+  grid-area: ingredientsList;
+  display: grid;
+  grid-template-rows: 4rem fit-content(100%) 4rem;
+  grid-template-areas: 
+    "ingredientsTitle"
+    "ingredientsTable"
+    "ingredientsFooter";
+
+  background-color: burlywood;
+  text-align: left;
+}
+
+#ingredientsTitle {
+  grid-area: ingredientsTitle;
+}
+
+#ingredientsTable {
+  grid-area: ingredientsTable;
+  display: grid;
+  grid-template-rows: auto;
+}
+
+.ingredientsTableRow {
+  display: grid;
+  grid-template-columns: repeat(4, 1fr);
+  grid-template-areas: 
+    "ingredientQuantity ingredientName ingredientCurrency ingredientPrice";
+  padding: 0.5rem 0;
+}
+
+.ingredientQuantity {
+  grid-area: ingredientQuantity;
+}
+
+.ingredientName {
+  grid-area: ingredientName;
+}
+
+.ingredientCurrency {
+  grid-area: ingredientCurrency;
+  text-align: right;
+}
+
+.ingredientPrice {
+  grid-area: ingredientPrice;
+  text-align: right;
+}
+
+#ingredientsFooter {
+  grid-area: ingredientsFooter;
+  display: grid;
+  grid-template-columns: repeat(4, 1fr);
+  grid-template-areas: 
+    "addToMenu addToMenu ingredientsTotalPriceCurrency ingredientsTotalPrice"
+}
+
+#addToMenu {
+  grid-area: addToMenu;
+  grid-column: span 2;
+}
+
+#ingredientsTotalPriceCurrency {
+  grid-area: ingredientsTotalPriceCurrency;
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+}
+
+#ingredientsTotalPrice {
+  grid-area: ingredientsTotalPrice;
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+}
+
+#dishPreparation {
+  grid-area: dishPreparation;
+}
+
+
+
+@media (max-width: 700px) {
+  .container {
+    grid-template-areas:
+      "header header"
+      "sidebar sidebar"
+      "content content"
+  }
+
+  #dishDetails {
+    grid-template-areas:
+      "dishDescription"
+      "ingredientsList"
+      "dishPreparation";
+  }
+}
\ No newline at end of file
diff --git a/styles/printout.css b/styles/printout.css
new file mode 100644
index 000000000..d26bfb626
--- /dev/null
+++ b/styles/printout.css
@@ -0,0 +1,84 @@
+body {
+  margin: 0;
+}
+
+p {
+  margin: 0;
+}
+
+.primaryButton {
+  color: rgba(0, 0, 0, 1);
+  background-color: orange;
+  border: 0.1em solid black;
+  box-shadow: 0.1em 0.1em 0.1em black;
+  font-size: 1em;
+  padding: 0.5em;
+}
+
+.container {
+  text-align: center;
+  height: 100vh;
+  display: grid;
+  grid-template-rows: 6rem 2rem auto;
+  grid-template-areas:
+    "header"
+    "statusBar"
+    "recipes"
+}
+
+.verticallyCentered {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+#header {
+  grid-area: header;
+  background-color: rgba(173, 173, 173, 1);
+}
+
+#statusBar {
+  grid-area: statusBar;
+  padding: 1.5rem 0rem;
+  border-bottom: 0.2rem solid black;
+}
+
+#statusTitle {
+  margin-right: auto;
+}
+
+#backButton {
+  margin-left: auto;
+}
+
+#recipes {
+  margin-top: 3rem;
+  grid-area: recipes;
+  display: grid;
+  grid-template-rows: auto;
+  text-align: left;
+}
+
+.recipe {
+  display: grid;
+  grid-gap: 2rem;
+  grid-template-columns: 140px 1fr 1fr;
+}
+
+.recipeTextbox {
+  display: grid;
+  grid-template-rows: 4rem auto;
+}
+
+@media (max-width: 700px) {
+
+  #recipes {
+    grid-gap: 2rem;
+  }
+
+  .recipe {
+    grid-gap: 0;
+    grid-template-columns: none;
+    grid-template-rows: repeat(3, auto);
+  }
+}
\ No newline at end of file

From 97ca437a5f3c304d6d7df7b16099ae6ebf287027 Mon Sep 17 00:00:00 2001
From: Andrew Szucs <andrew0szucs@gmail.com>
Date: Sun, 21 Jan 2018 17:48:51 +0100
Subject: [PATCH 09/45] Fix Collapse Sidebar on Dish screen

---
 dish.html               | 68 +++++++++++++++++++++++------------------
 js/lib/toggleSidebar.js | 19 ++++++++++++
 styles/dish.css         | 60 +++++++++++++++++++++++++++++++++---
 3 files changed, 113 insertions(+), 34 deletions(-)
 create mode 100644 js/lib/toggleSidebar.js

diff --git a/dish.html b/dish.html
index 319424524..f28bad036 100644
--- a/dish.html
+++ b/dish.html
@@ -22,44 +22,52 @@ <h1>Dinner Planner</h1>
       <div id="sidebar">
         
         <div id="titleBar">
-          <h4>My Dinner</h4>
-        </div>
-
-        <div id="guestSelector">
-          <label for="guestNumber">Guests:</label>
-          <input id="guestNumber" type="number" value="1">
+          <h4 id="titleBarTitle">My Dinner</h4>
+          <div id="collapsedMenuTotalPrice" class="totalPrice showOnMobile">
+            <span class="totalPriceCurrency">SEK</span> <span class="totalPriceValue">77.20</span>
+          </div>
+          <button id="expandButton" class="secondaryButton showOnMobile" onclick="toggleSidebar()">
+            Expand
+          </button>
         </div>
 
-        <div id="dishTable">
-          <div id="tableHeader">
-            <div id="tableName">Dish name</div>
-            <div id="tableCost">Cost</div>
+        <div id="sideBarContent" class="collapseContent hideOnMobile">
+          <div id="guestSelector" class="show">
+            <label for="guestNumber">Guests:</label>
+            <input id="guestNumber" type="number" value="1">
           </div>
-
-          <div id="tableContent">
-
-            <div class="tableRow">
-              <div class="rowName">Lasagne</div>
-              <div class="rowCost">77.20</div>
+      
+          <div id="dishTable" class="show">
+            <div id="tableHeader">
+              <div id="tableName">Dish name</div>
+              <div id="tableCost">Cost</div>
             </div>
-
-            <div class="tableRow">
-              <div class="rowName">Lasagne</div>
-              <div class="rowCost">77.20</div>
+  
+            <div id="tableContent">
+  
+              <div class="tableRow">
+                <div class="rowName">Lasagne</div>
+                <div class="rowCost">77.20</div>
+              </div>
+  
+              <div class="tableRow">
+                <div class="rowName">Lasagne</div>
+                <div class="rowCost">77.20</div>
+              </div>
+  
+            </div>
+  
+            <div id="tableFooter">
+              <div id="tableTotalPrice" class="totalPrice">
+                <span class="totalPriceCurrency">SEK</span> <span id="totalPriceValue">77.20</span>
+              </div>
             </div>
-
           </div>
 
-          <div id="tableFooter">
-            <div id="tableTotalPrice" class="totalPrice">
-              <span id="currency">SEK</span> <span id="value">77.20</span>
-            </div>
+          <div id="confirmButtonContainer" class="show">
+            <button class="primaryButton" id="confirmMenuButton">Confirm Dinner</button>
           </div>
-          
-        </div>
 
-        <div id="confirmButtonContainer">
-          <button class="primaryButton" id="confirmMenuButton">Confirm Dinner</button>
         </div>
 
       </div>
@@ -136,7 +144,7 @@ <h3>Preparation</h3>
     <!-- <script src="http://netdna.bootstrapcdn.com/bootstrap/3.1.0/js/bootstrap.min.js"></script> -->
 
     <!-- The application JavaScript code -->
-    <script src="js/toggleMenu.js"></script>
+    <script src="js/lib/toggleSidebar.js"></script>
     <script src="js/app.js"></script>
     <script src="js/model/dinnerModel.js"></script>
     <script src="js/view/exampleView.js"></script>
diff --git a/js/lib/toggleSidebar.js b/js/lib/toggleSidebar.js
new file mode 100644
index 000000000..d12108032
--- /dev/null
+++ b/js/lib/toggleSidebar.js
@@ -0,0 +1,19 @@
+const toggleSidebar = () => {
+  const collapseContent = document.getElementById('sideBarContent')
+  const collapsedMenuTotalPrice = document.getElementById('collapsedMenuTotalPrice')
+
+  const collapseContentDisplay = window.getComputedStyle(collapseContent).display
+
+  if(collapseContentDisplay === 'none') {
+    collapseContent.classList.remove('hideOnMobile')
+    collapseContent.classList.add('showOnMobile')
+    collapsedMenuTotalPrice.classList.remove('showOnMobile')
+    collapsedMenuTotalPrice.classList.add('hideOnMobile')
+  }
+  else {
+    collapseContent.classList.remove('showOnMobile')
+    collapseContent.classList.add('hideOnMobile')
+    collapsedMenuTotalPrice.classList.remove('hideOnMobile')
+    collapsedMenuTotalPrice.classList.add('showOnMobile')
+  }
+}
\ No newline at end of file
diff --git a/styles/dish.css b/styles/dish.css
index b21e1b340..62ec73bee 100644
--- a/styles/dish.css
+++ b/styles/dish.css
@@ -10,6 +10,14 @@ p {
   margin: 0;
 }
 
+.showOnMobile {
+  display: none;
+}
+
+.hideOnMobile {
+  display: inline;
+}
+
 .left {
   text-align: left;
 }
@@ -27,6 +35,15 @@ p {
   padding: 0.5em;
 }
 
+.secondaryButton {
+  color: rgba(0, 0, 0, 1);
+  background-color: orange;
+  border: 0.1em solid black;
+  box-shadow: 0.1em 0.1em 0.1em black;
+  font-size: 0.7em;
+  padding: 0.5em;
+}
+
 .verticallyCentered {
   display: flex;
   justify-content: center;
@@ -52,19 +69,40 @@ p {
 #sidebar {
   grid-area: sidebar;
   display: grid;
-  grid-template-rows: 2rem 2rem fit-content(100%) 3rem;
+  grid-template-rows: 2rem 1fr;
   grid-template-areas: 
     "titleBar"
-    "guestSelector"
-    "dishTable"
-    "confirmButtonContainer";
+    "collapseContent";
   
   background-color: aqua;
   text-align: left;
 }
 
+.collapseContent {
+  grid-area: collapseContent;
+  display: grid;
+  grid-template-rows: 2rem fit-content(100%) 3rem;
+  grid-template-areas: 
+    "guestSelector"
+    "dishTable"
+    "confirmButtonContainer";
+}
+
 #titleBar {
   grid-area: titleBar;
+  display: flex;
+  justify-content: flex-end;
+}
+
+#titleBarTitle {
+  align-self: center;
+  margin-right: auto;
+}
+
+#collapsedMenuTotalPrice {
+  align-self: center;
+  justify-self: center;
+  margin-right: 1rem;
 }
 
 #guestSelector {
@@ -233,8 +271,22 @@ p {
 }
 
 
+@media (min-width: 701px) {
+  #collapsedMenuTotalPrice {
+    display: none;
+  }
+}
 
 @media (max-width: 700px) {
+
+  .showOnMobile {
+    display: inline;
+  }
+
+  .hideOnMobile {
+    display: none;
+  }
+
   .container {
     grid-template-areas:
       "header header"

From b95d057ed1f0fff97b2ad38e52727dc8e0510994 Mon Sep 17 00:00:00 2001
From: Andrew Szucs <andrew0szucs@gmail.com>
Date: Sun, 21 Jan 2018 21:36:01 +0100
Subject: [PATCH 10/45] Improve the Dish search and select screen

---
 select.html       | 218 +++++++++++++++++++----------------
 styles/select.css | 282 ++++++++++++++++++++++++++++++++--------------
 2 files changed, 317 insertions(+), 183 deletions(-)

diff --git a/select.html b/select.html
index fa219a8b1..8436a4424 100644
--- a/select.html
+++ b/select.html
@@ -8,121 +8,147 @@
 
 		<!-- Bootstrap CSS -->
     <!-- <link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.0/css/bootstrap.min.css"> -->
-		<link rel="stylesheet" href="styles/select.css">
+		<link rel="stylesheet" href="styles/select2.css">
 
   </head>
+
   <body>
 		<div class="container">
-			<header>
-				<h1>Dinner Planner</h1>
-			</header>
-			<main>
-				<div class="sidebar" id="sidebar">
-					<div class="sidebarHeader">
-            <div class="sidebarTitle">
-              My Dinner
-            </div>
-            <div class="shownOnMobile" id="collapsedMenuCost">
-              <span class="currency">SEK</span> <span class="cost">77.20</span>
-            </div>
-            <button id="expandButton" class="shownOnMobile" onclick="toggleMenu()">
-              Expand
-            </button>
+
+      <div id="header" class="verticallyCentered">
+        <h1>Dinner Planner</h1>
+      </div>
+      
+      <div id="sidebar">
+        
+        <div id="titleBar">
+          <h4 id="titleBarTitle">My Dinner</h4>
+          <div id="collapsedMenuTotalPrice" class="totalPrice showOnMobile">
+            <span class="totalPriceCurrency">SEK</span> <span class="totalPriceValue">77.20</span>
           </div>
-          
-          <div id="sidebarContent" class="hiddenOnMobile">
-            <div class="guestSelector" id="guestSelector">
-              <label for="guestNumber">Guests:</label>
-              <input id="guestNumber" type="number" value="1">
+          <button id="expandButton" class="secondaryButton showOnMobile" onclick="toggleSidebar()">
+            Expand
+          </button>
+        </div>
+
+        <div id="sideBarContent" class="collapseContent hideOnMobile">
+          <div id="guestSelector" class="show">
+            <label for="guestNumber">Guests:</label>
+            <input id="guestNumber" type="number" value="1">
+          </div>
+      
+          <div id="dishTable" class="show">
+            <div id="tableHeader">
+              <div id="tableName">Dish name</div>
+              <div id="tableCost">Cost</div>
             </div>
-            <div class="menu" id="menu">
-              <div class="menuHeader" id="menuHeader">
-                <div class="dishNameHeader">Dish Name</div>
-                <div class="dishCostHeader">Cost</div>
+  
+            <div id="tableContent">
+  
+              <div class="tableRow">
+                <div class="rowName">Lasagne</div>
+                <div class="rowCost">77.20</div>
               </div>
-              <div class="dishList" id="dishList">
-                <div class="dish" >
-                  <div class="dishName">Lasagne</div>
-                  <div class="dishCost">77.20</div>
-                </div>
-                <div class="dish">
-                    <div class="dishName">Lasagne</div>
-                    <div class="dishCost">77.20</div>
-                  </div>
+  
+              <div class="tableRow">
+                <div class="rowName">Lasagne</div>
+                <div class="rowCost">77.20</div>
               </div>
-              <div class="menuCost">
-                <span class="currency">SEK</span> <span class="cost">77.20</span>
+  
+            </div>
+  
+            <div id="tableFooter">
+              <div id="tableTotalPrice" class="totalPrice">
+                <span class="totalPriceCurrency">SEK</span> <span id="totalPriceValue">77.20</span>
               </div>
-              <button class="confirmMenuButton" id="confirmMenuButton">Confirm Dinner</button>
             </div>
           </div>
 
+          <div id="confirmButtonContainer" class="show">
+            <button class="primaryButton" id="confirmMenuButton">Confirm Dinner</button>
+          </div>
+
         </div>
-        <div class="content">
-          <div class="dishSearch">
-            <div class="searchHeader">
-              Add another one
+
+      </div>
+
+    <div id="content">
+      <div id="dishSearch">
+        
+        <h2 id="dishSearchTitle">Find a dish</h2>
+
+        <div id="dishSearchForm">
+
+          <input type="search" id="dishSearchField" name="dishSearchField" placeholder="Enter keywords">
+
+          <select id="dishTypeSelectField" name="dishTypeSelectField">
+            <option value="all" selected>All</option>
+            <option value="starter">Starter</option>
+            <option value="main dish">Main Dish</option>
+            <option value="dessert">Dessert</option>
+          </select>
+          
+          <button id="dishSearchButton" class="secondaryButton">Search</button>
+
+        </div>
+
+        <div id="dishSearchResults">
+
+          <div class="dishResult">
+            <div class="dishResultImageContainer">
+              <img class="dishResultImage" src="images/bakedbrie.jpg" alt="">
             </div>
-            <div class="dishSearchForm">
-              <input type="search" id="dishSearchField" name="q">
-              <select id="dishTypeSelectField" name="dishTypeSelectField">
-                  <option value="all" selected>All</option>
-                  <option value="starter">Starter</option>
-                  <option value="main dish">Main Dish</option>
-                  <option value="dessert">Dessert</option>
-                </select>
-              <button class="dishSearchButton">Search</button>
+            <div class="dishResultName">Baked Brie</div>
+          </div>
+
+          <div class="dishResult">
+            <div class="dishResultImageContainer">
+              <img class="dishResultImage" src="images/bakedbrie.jpg" alt="">
             </div>
+            <div class="dishResultName">Baked Brie</div>
           </div>
-          <div class="dishResultsContainer">
-            <div class="dishResults">
-              <div class="dishResult">
-                <div class="dishResultImageContainer">
-                  <img class="dishResultImage" src="images/bakedbrie.jpg" alt="">
-                </div>
-                <div class="dishResultName">Baked Brie</div>
-              </div>
-              <div class="dishResult">
-                <div class="dishResultImageContainer">
-                  <img class="dishResultImage" src="images/icecream.jpg" alt="">
-                </div>
-                <div class="dishResultName">Ice Cream</div>
-              </div>
-              <div class="dishResult">
-                <div class="dishResultImageContainer">
-                  <img class="dishResultImage" src="images/meatballs.jpg" alt="">
-                </div>
-                <div class="dishResultName">Meatballs</div>
-              </div>
-              <div class="dishResult">
-                <div class="dishResultImageContainer">
-                  <img class="dishResultImage" src="images/sourdough.jpg" alt="">
-                </div>
-                <div class="dishResultName">Sourdough</div>
-              </div>
-              <div class="dishResult">
-                <div class="dishResultImageContainer">
-                  <img class="dishResultImage" src="images/toast.jpg" alt="">
-                </div>
-                <div class="dishResultName">Toast</div>
-              </div>
+          
+          <div class="dishResult">
+            <div class="dishResultImageContainer">
+              <img class="dishResultImage" src="images/bakedbrie.jpg" alt="">
+            </div>
+            <div class="dishResultName">Baked Brie</div>
+          </div>
+
+          <div class="dishResult">
+            <div class="dishResultImageContainer">
+              <img class="dishResultImage" src="images/bakedbrie.jpg" alt="">
             </div>
+            <div class="dishResultName">Baked Brie</div>
           </div>
+
+          <div class="dishResult">
+            <div class="dishResultImageContainer">
+              <img class="dishResultImage" src="images/bakedbrie.jpg" alt="">
+            </div>
+            <div class="dishResultName">Baked Brie</div>
+          </div>
+
+
+
         </div>
-      </main>
-		</div>
-
-	<!-- jQuery -->
-	<!-- <script src="https://code.jquery.com/jquery.js"></script> -->
-	<!-- Bootstrap JavaScript, needed if you want for instance tabs, models, popovers etc. -->
-	<!-- <script src="http://netdna.bootstrapcdn.com/bootstrap/3.1.0/js/bootstrap.min.js"></script> -->
-
-	<!-- The application JavaScript code -->
-  <script src="js/toggleMenu.js"></script>
-  <script src="js/app.js"></script>
-	<script src="js/model/dinnerModel.js"></script>
-	<script src="js/view/exampleView.js"></script>
-	<!-- TODO: Here you should include JS code for your other views -->
+
+      </div>
+    </div>
+
+    </div>
+
+    <!-- jQuery -->
+    <!-- <script src="https://code.jquery.com/jquery.js"></script> -->
+    <!-- Bootstrap JavaScript, needed if you want for instance tabs, models, popovers etc. -->
+    <!-- <script src="http://netdna.bootstrapcdn.com/bootstrap/3.1.0/js/bootstrap.min.js"></script> -->
+
+    <!-- The application JavaScript code -->
+    <script src="js/lib/toggleSidebar.js"></script>
+    <script src="js/app.js"></script>
+    <script src="js/model/dinnerModel.js"></script>
+    <script src="js/view/exampleView.js"></script>
+    <!-- TODO: Here you should include JS code for your other views -->
 
   </body>
 </html>
\ No newline at end of file
diff --git a/styles/select.css b/styles/select.css
index 292f23bf5..65ad53483 100644
--- a/styles/select.css
+++ b/styles/select.css
@@ -2,150 +2,258 @@ body {
   margin: 0;
 }
 
-.container {
-  display: grid;
-  grid-template-rows: 6rem auto;
-  text-align: center;
-  height: 100vh;
+h4 {
+  margin: 0;
 }
 
-header {
-  background-color: rgba(173, 173, 173, 1);
+p {
+  margin: 0;
+}
+
+.showOnMobile {
+  display: none;
+}
+
+.hideOnMobile {
+  display: inline;
+}
+
+.left {
+  text-align: left;
+}
+
+.right {
+  text-align: right;
+}
+
+.primaryButton {
+  color: rgba(0, 0, 0, 1);
+  background-color: orange;
+  border: 0.1em solid black;
+  box-shadow: 0.1em 0.1em 0.1em black;
+  font-size: 1em;
+  padding: 0.5em;
+}
+
+.secondaryButton {
+  color: rgba(0, 0, 0, 1);
+  background-color: orange;
+  border: 0.1em solid black;
+  box-shadow: 0.1em 0.1em 0.1em black;
+  font-size: 0.7em;
+  padding: 0.5em;
+}
+
+.verticallyCentered {
   display: flex;
-  align-items: center;
   justify-content: center;
+  align-items: center;
 }
 
-main {
+.container {
+  text-align: center;
+  height: 100vh;
   display: grid;
   grid-template-columns: 12rem auto;
+  grid-template-rows: 6rem auto;
+  grid-template-areas:
+    "header     header"
+    "sidebar  content";
 }
 
-.sidebar {
-  background-color: aquamarine;
-  display: grid;
-  grid-template-rows: fit-content(100%) fit-content(100%) auto;
+#header {
+  grid-area: header;
+  background-color: rgba(173, 173, 173, 1);
 }
 
-.guestSelector {
-  display: flex;
+#sidebar {
+  grid-area: sidebar;
+  display: grid;
+  grid-template-rows: 2rem 1fr;
+  grid-template-areas: 
+    "titleBar"
+    "collapseContent";
   
+  background-color: aqua;
+  text-align: left;
 }
 
-.menu {
+.collapseContent {
+  grid-area: collapseContent;
   display: grid;
-  grid-template-rows: fit-content(100%) fit-content(100%) fit-content(100%) fit-content(100%);
+  grid-template-rows: 2rem fit-content(100%) 3rem;
+  grid-template-areas: 
+    "guestSelector"
+    "dishTable"
+    "confirmButtonContainer";
 }
 
-.menuHeader, .dish {
+#titleBar {
+  grid-area: titleBar;
   display: flex;
+  justify-content: flex-end;
 }
 
-.menuHeader .dishCostHeader, .dish .dishCost {
-  margin-left: auto;
+#titleBarTitle {
+  align-self: center;
+  margin-right: auto;
 }
 
-.menuCost {
-  margin-left: auto;
+#collapsedMenuTotalPrice {
+  align-self: center;
+  justify-self: center;
+  margin-right: 1rem;
 }
 
-.confirmMenuButton {
-  color: rgba(0, 0, 0, 1);
-  background-color: orange;
-  border: 0.1em solid black;
-  box-shadow: 0.1em 0.1em 0.1em black;
-  font-size: 1em;
-  padding: 0.5em;
-  margin: 1em;
+#guestSelector {
+  grid-area: guestSelector;
 }
 
-.content {
-  background-color: blanchedalmond;
+#dishTable {
+  grid-area: dishTable;
+  display: grid;
+  grid-template-areas:
+    "tableHeader"
+    "tableContent"
+    "tableFooter"
+}
+
+#tableHeader {
+  grid-area: tableHeader;
+  display: grid;
+  grid-template-areas:
+    "tableName tableCost";
+
+  background-color: gainsboro;
+  font-weight: bold;
 }
 
-.dishResultsContainer {
-  margin: 0 auto;
-  width: 80%;
+#tableName {
+  grid-area: tableName;
+  text-align: left;
 }
 
-.dishResults {
+#tableCost {
+  grid-area: tableCost;
+  text-align: right;
+}
+
+#tableContent {
+  grid-area: tableContent;
   display: grid;
-  grid-template-columns: repeat(auto-fill, minmax(10rem, 1fr));
+  grid-template-rows: auto;
 }
 
-.dishResult {
+.tableRow {
   display: grid;
-  grid-template-rows: 140px auto;
+  grid-template-areas:
+    "rowName rowCost";
+}
+
+.rowName {
+  grid-area: rowName;
+  text-align: left;
 }
 
-.dishResultImageContainer {
+.rowCost {
+  grid-area: rowCost;
+  text-align: right;
+}
+
+#tableFooter {
+  grid-area: tableFooter;
   display: flex;
-  align-items: center;
-  justify-content: center;
+  align-items: baseline;
+  justify-content: flex-end;
 }
 
-.show {
-  display: inline;
+#confirmButtonContainer {
+  grid-area: confirmButtonContainer;
+  text-align: center;
 }
 
-.hide {
-  display: none;
+#content {
+  background-color: blanchedalmond;
+  grid-area: content;
 }
 
-@media (min-width: 592px) {
-  /* Collapsible Menu changes */
-  #collapsedMenuCost {
-    display: none;
-  }
-  
-  #expandButton {
-    display: none;
-  }
+#dishSearch {
+  display: grid;
+  grid-template-areas:
+    "dishSearchTitle"
+    "dishSearchForm"
+    "dishSearchResults";
+  margin: 0rem 2rem;
+}
 
-  #sidebarContent {
-    display: inline;
-  }
-  
-  .hiddenOnMobile {
-    display: inline;
-  }
+#dishSearchTitle {
+  grid-area: dishSearchTitle;
+  align-self: center;
+  justify-self: flex-start;
+}
 
-  .shownOnMobile {
-    display: none;
-  }
+#dishSearchForm {
+  grid-area: dishSearchForm;
+  align-self: center;
+  justify-self: center;
+  display: grid;
+  grid-template-columns: 1fr 1fr 1fr;
+  grid-template-areas:
+    "dishSearchField dishTypeSelectField dishSearchButton";
 }
 
-@media (max-width: 591px) {
-  main {
-    display: block;
-  }
+#dishSearchField {
+  grid-area: dishSearchField;
+}
 
-  .sidebarHeader {
-    display: flex;
-  }
+#dishTypeSelectField {
+  grid-area: dishTypeSelectField;
+}
+
+#dishSearchButton {
+  grid-area: dishSearchButton;
+}
+
+#dishSearchResults {
+  grid-area: dishSearchResults;
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
+  margin: 2rem 0rem;
+}
 
-  .sidebarTitle {
-    margin-right: auto;
-  }
 
-  /* Collapsible Menu changes */
-  .hiddenOnMobile {
+@media (min-width: 701px) {
+  #collapsedMenuTotalPrice {
     display: none;
   }
+}
+
+@media (max-width: 700px) {
 
-  .shownOnMobile {
+  .showOnMobile {
     display: inline;
   }
-  /* #collapsedMenuCost {
-    display: inline;
+
+  .hideOnMobile {
+    display: none;
   }
-  
-  #expandButton {
-    display: inline;
+
+  .container {
+    grid-template-areas:
+      "header header"
+      "sidebar sidebar"
+      "content content"
   }
+}
 
-  #sidebarContent {
-    display: none;
-  } */
-  
+@media (max-width: 320px) {
+
+  #dishSearchForm {
+    grid-template-rows: 1fr 1fr 1fr;
+    grid-template-columns: none;
+    grid-template-areas:
+      "dishSearchField"
+      "dishTypeSelectField"
+      "dishSearchButton";
+  }
 }
\ No newline at end of file

From bb2f075a1581b0e6126a541033094f2bb9a6010e Mon Sep 17 00:00:00 2001
From: Andrew Szucs <andrew0szucs@gmail.com>
Date: Mon, 22 Jan 2018 16:40:03 +0100
Subject: [PATCH 11/45] Create Welcome view and CSS in the single index.html
 page

---
 index.html      | 60 ++++++++++++------------------
 styles/main.css | 98 +++++++++++++++++++++++++++++++++++++++----------
 2 files changed, 102 insertions(+), 56 deletions(-)

diff --git a/index.html b/index.html
index a516875bb..012dc4af2 100644
--- a/index.html
+++ b/index.html
@@ -6,50 +6,36 @@
     <meta name="viewport" content="width=device-width, initial-scale=1">
     <title>Dinner planner</title>
 
-		<!-- Bootstrap CSS -->
-    <!-- <link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.0/css/bootstrap.min.css"> -->
 		<link rel="stylesheet" href="styles/main.css">
+  </head>
 
-	</head>
-	
   <body>
+
 		<div class="container">
-			<header>
-				<h1>Dinner Planner</h1>
-			</header>
-			<main>
-				<div class="content">
-					<div class="text">
-						Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
-					</div>
-					<button class="startButton">Create new dinner</button>
-				</div>
-			</main>
-		</div>
 
-		<!-- <div class="container">
-			<h1>Dinner planner</h1>
-			<div id="exampleView">
-				<div>
-					Number of guests: <span id="numberOfGuests"></span>
-				</div>
-				<div>
-						<button id="minusGuest" class="btn"><span class="glyphicon glyphicon-minus"></span></button>
-					<button id="plusGuest" class="btn"><span class="glyphicon glyphicon-plus"></span></button>
-				</div>
-			</div>
-		</div> -->
+      <div id="header" class="verticallyCentered">
+        <h1>Dinner Planner</h1>
+      </div>
+      
+      <div id="content">
+        
+        <div id="mainView">
+          <div id="welcomeText">
+            Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
+          </div>
+          <button id="startButton" class="primaryButton">Create new dinner</button>
+        </div>
+        
+      </div>
 
-	<!-- jQuery -->
-	<!-- <script src="https://code.jquery.com/jquery.js"></script> -->
-	<!-- Bootstrap JavaScript, needed if you want for instance tabs, models, popovers etc. -->
-	<!-- <script src="http://netdna.bootstrapcdn.com/bootstrap/3.1.0/js/bootstrap.min.js"></script> -->
+    </div>
 
-	<!-- The application JavaScript code -->
-	<script src="js/app.js"></script>
-	<script src="js/model/dinnerModel.js"></script>
-	<script src="js/view/exampleView.js"></script>
-	<!-- TODO: Here you should include JS code for your other views -->
+    <script src="js/lib/toggleSidebar.js"></script>
+    <!-- Here you should include JS code for your other views -->
+    <script src="js/view/SidebarView.js"></script>
+    <script src="js/model/dinnerModel.js"></script>
+    <!-- The application JavaScript code -->
+    <script src="js/app.js"></script>
 
   </body>
 </html>
\ No newline at end of file
diff --git a/styles/main.css b/styles/main.css
index d745cb04a..b46968564 100644
--- a/styles/main.css
+++ b/styles/main.css
@@ -2,39 +2,99 @@ body {
   margin: 0;
 }
 
-.container {
-  display: grid;
-  grid-template-rows: 6rem auto;
-  text-align: center;
-  height: 100vh;
+h4 {
+  margin: 0;
 }
 
-header {
-  background-color: rgba(173, 173, 173, 1);
-  display: flex;
-  align-items: center;
-  justify-content: center;
+p {
+  margin: 0;
 }
 
-main {
-  display: flex;
-  align-items: center;
-  justify-content: center;
+.showOnMobile {
+  display: none;
 }
 
-main .content {
-  max-width: 50%;
+.hideOnMobile {
+  display: inline;
 }
 
-main .content .text {
-  margin-bottom: 3rem;
+.left {
+  text-align: left;
 }
 
-main .startButton {
+.right {
+  text-align: right;
+}
+
+.primaryButton {
   color: rgba(0, 0, 0, 1);
   background-color: orange;
   border: 0.1em solid black;
   box-shadow: 0.1em 0.1em 0.1em black;
   font-size: 1em;
   padding: 0.5em;
+}
+
+.secondaryButton {
+  color: rgba(0, 0, 0, 1);
+  background-color: orange;
+  border: 0.1em solid black;
+  box-shadow: 0.1em 0.1em 0.1em black;
+  font-size: 0.7em;
+  padding: 0.5em;
+}
+
+.verticallyCentered {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+.container {
+  height: 100vh;
+  display: grid;
+  grid-template-areas: 
+    "header"
+    "content";
+  grid-template-rows: 6rem auto;
+}
+
+#header {
+  grid-area: header;
+  text-align: center;
+  background-color: rgba(173, 173, 173, 1);
+}
+
+#content {
+  grid-area: content;
+  display: flex;
+  align-items: center;
+  justify-items: center;
+}
+
+#mainView {
+  margin: 0 8rem;
+  text-align: center;
+}
+
+#welcomeText {
+  margin-bottom: 1rem;
+}
+
+@media (max-width: 700px) {
+  #mainView {
+    margin: 0 6rem;
+  }
+}
+
+@media (max-width: 520px) {
+  #mainView {
+    margin: 0 4rem;
+  }
+}
+
+@media (max-width: 520px) {
+  #mainView {
+    margin: 0 2rem;
+  }
 }
\ No newline at end of file

From 68258fa427ec05de6ce58c008e3200b1a414f39f Mon Sep 17 00:00:00 2001
From: Andrew Szucs <andrew0szucs@gmail.com>
Date: Mon, 22 Jan 2018 23:33:07 +0100
Subject: [PATCH 12/45] Add Welcome, DishSearch and DishDetails views into
 index.html

---
 index.html              | 177 +++++++++++++++++++++++-
 js/app.js               |  20 ++-
 js/model/dinnerModel.js |   6 +-
 js/toggleMenu.js        |  20 ---
 js/view/SidebarView.js  |  42 ++++++
 styles/main.css         | 295 +++++++++++++++++++++++++++++++++++++++-
 6 files changed, 527 insertions(+), 33 deletions(-)
 delete mode 100644 js/toggleMenu.js
 create mode 100644 js/view/SidebarView.js

diff --git a/index.html b/index.html
index 012dc4af2..b6c1df20c 100644
--- a/index.html
+++ b/index.html
@@ -19,11 +19,186 @@ <h1>Dinner Planner</h1>
       
       <div id="content">
         
-        <div id="mainView">
+        <!-- <div id="mainView">
           <div id="welcomeText">
             Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
           </div>
           <button id="startButton" class="primaryButton">Create new dinner</button>
+        </div> -->
+
+        <div id="appView">
+          <div id="sidebarView">
+            <div id="titleBar">
+              <h4 id="titleBarTitle">My Dinner</h4>
+              <div id="collapsedMenuTotalPrice" class="totalPrice showOnMobile">
+                <span class="totalPriceCurrency">SEK</span> <span class="totalPriceValue">77.20</span>
+              </div>
+              <button id="expandButton" class="secondaryButton showOnMobile" onclick="toggleSidebar()">
+                Expand
+              </button>
+            </div>
+    
+            <div id="sideBarContent" class="collapseContent hideOnMobile">
+              <div id="guestSelector" class="show">
+                <label for="guestNumber">Guests:</label>
+                <input id="guestNumber" type="number" value="1">
+              </div>
+          
+              <div id="dishTable" class="show">
+                <div id="tableHeader">
+                  <div id="tableName">Dish name</div>
+                  <div id="tableCost">Cost</div>
+                </div>
+      
+                <div id="tableContent">
+                  <div class="tableRow">
+                    <div class="rowName">Lasagne</div>
+                    <div class="rowCost">77.20</div>
+                  </div>
+                </div>
+      
+                <div id="tableFooter">
+                  <div id="tableTotalPrice" class="totalPrice">
+                    <span class="totalPriceCurrency">SEK</span> <span id="totalPriceValue">77.20</span>
+                  </div>
+                </div>
+              </div>
+    
+              <div id="confirmButtonContainer" class="show">
+                <button class="primaryButton" id="confirmMenuButton">Confirm Dinner</button>
+              </div>
+    
+            </div>
+    
+          </div>
+
+          <div id="sectionView">
+
+            <!-- <div id="dishSearchView">
+          
+              <h2 id="dishSearchTitle">Find a dish</h2>
+  
+              <div id="dishSearchForm">
+      
+                <input type="search" id="dishSearchField" name="dishSearchField" placeholder="Enter keywords">
+      
+                <select id="dishTypeSelectField" name="dishTypeSelectField">
+                  <option value="all" selected>All</option>
+                  <option value="starter">Starter</option>
+                  <option value="main dish">Main Dish</option>
+                  <option value="dessert">Dessert</option>
+                </select>
+                
+                <button id="dishSearchButton" class="secondaryButton">Search</button>
+      
+              </div>
+      
+              <div id="dishSearchResults">
+      
+                <div class="dishResult">
+                  <div class="dishResultImageContainer">
+                    <img class="dishResultImage" src="images/bakedbrie.jpg" alt="">
+                  </div>
+                  <div class="dishResultName">Baked Brie</div>
+                </div>
+      
+                <div class="dishResult">
+                  <div class="dishResultImageContainer">
+                    <img class="dishResultImage" src="images/bakedbrie.jpg" alt="">
+                  </div>
+                  <div class="dishResultName">Baked Brie</div>
+                </div>
+                
+                <div class="dishResult">
+                  <div class="dishResultImageContainer">
+                    <img class="dishResultImage" src="images/bakedbrie.jpg" alt="">
+                  </div>
+                  <div class="dishResultName">Baked Brie</div>
+                </div>
+      
+                <div class="dishResult">
+                  <div class="dishResultImageContainer">
+                    <img class="dishResultImage" src="images/bakedbrie.jpg" alt="">
+                  </div>
+                  <div class="dishResultName">Baked Brie</div>
+                </div>
+      
+                <div class="dishResult">
+                  <div class="dishResultImageContainer">
+                    <img class="dishResultImage" src="images/bakedbrie.jpg" alt="">
+                  </div>
+                  <div class="dishResultName">Baked Brie</div>
+                </div>  
+      
+              </div>
+  
+            </div> -->
+
+            <!-- <div id="dishDetailsView">
+              <div id="dishDescription">
+                <div id="dishTitle">
+                  <h2>Baked Brie</h2>
+                </div>
+                <div id="dishImage">
+                  <img src="images/bakedbrie.jpg" alt="">
+                </div>
+                <div id="dishDescription">
+                  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Eget aliquet nibh praesent tristique. Quis hendrerit dolor magna eget. In cursus turpis massa tincidunt dui ut ornare.</p>
+                </div>
+                <button id="backButton" class="primaryButton">Back to Search</button>
+              </div>
+              
+              <div id="ingredientsList">
+                
+                <div id="ingredientsTitle">
+                  <h3>Ingredients for <span id="numberOfGuests">3</span> people</h3>
+                </div>
+    
+                <div id="ingredientsTable">
+    
+                  <div class="ingredientsTableRow">
+                    <div class="ingredientQuantity">
+                      <span id="quantity">2</span> <span id="unit">tbsp</span>
+                    </div>
+                    <div class="ingredientName">olive oil</div>
+                    <div class="ingredientCurrency">SEK</div>
+                    <div class="ingredientPrice">0.20</div>
+                  </div>
+      
+                  <div class="ingredientsTableRow">
+                    <div class="ingredientQuantity">
+                      <span id="quantity">750</span> <span id="unit">g</span>
+                    </div>
+                    <div class="ingredientName">lean beef mince</div>
+                    <div class="ingredientCurrency">SEK</div>
+                    <div class="ingredientPrice">10.00</div>
+                  </div>
+      
+                </div>
+    
+                <div id="ingredientsFooter">
+                  <div id="addToMenu" class="verticallyCentered">
+                    <button id="addToMenuButton" class="primaryButton">Add to menu</button>
+                  </div>
+                  <div id="ingredientsTotalPriceCurrency">SEK</div>
+                  <div id="ingredientsTotalPrice">10.00</div>
+                </div>
+    
+              </div>
+              
+              <div id="dishPreparation">
+                <h3>Preparation</h3>
+                <div id="dishPreparationText">
+                  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Eget aliquet nibh praesent tristique. Quis hendrerit dolor magna eget. In cursus turpis massa tincidunt dui ut ornare. Sed adipiscing diam donec adipiscing tristique risus nec feugiat in. Dolor sit amet consectetur adipiscing elit. Ac tincidunt vitae semper quis lectus nulla at. Mauris augue neque gravida in fermentum. Egestas diam in arcu cursus euismod quis viverra nibh. Vulputate enim nulla aliquet porttitor lacus luctus accumsan. Quis varius quam quisque id. Non odio euismod lacinia at quis risus sed vulputate. Id cursus metus aliquam eleifend mi in. Tortor pretium viverra suspendisse potenti nullam ac tortor.</p>
+                </div>
+              </div>
+    
+            </div> -->
+
+            
+
+          </div>
+
         </div>
         
       </div>
diff --git a/js/app.js b/js/app.js
index e87dab2c5..27f9f3e05 100644
--- a/js/app.js
+++ b/js/app.js
@@ -1,9 +1,17 @@
-$(function() {
+(function () {
 	//We instantiate our model
-	const model = createDinnerModel();
-	
-	// And create the instance of ExampleView
-	const exampleView = new ExampleView($("#exampleView"));
+	const model = createDinnerModel()
+
+	// Create the instances of the Views
+	const sidebarView = createSidebarView(
+		document.getElementById('sidebar'),
+		model
+	)
+
+	const welcomeView = createWelcomeView(
+		document.getElementById('mainView'),
+		model
+	)
 
 	/**
 	 * IMPORTANT: app.js is the only place where you are allowed to
@@ -12,4 +20,4 @@ $(function() {
 	 * of the specific view you're working with (see exampleView.js).
 	 */
 
-});
\ No newline at end of file
+})()
\ No newline at end of file
diff --git a/js/model/dinnerModel.js b/js/model/dinnerModel.js
index 8bf7009d2..8d6e3cbc1 100644
--- a/js/model/dinnerModel.js
+++ b/js/model/dinnerModel.js
@@ -24,7 +24,7 @@ const createDinnerModel = () => {
 	const getAllIngredients = () => state.menu.map(dish => dish.ingredients)
 
 	// Return the full price of a given dish (represented by id)
-	const getPriceForDish = (id) => getDish(id).ingredients.reduce((acc, curr) => acc = acc + curr.price)
+	const getPriceForDish = (id) => getDish(id).ingredients.reduce((acc, curr) => acc = acc + curr.price, 0)
 
 	// Returns the total price of the menu (all the ingredients multiplied by number of guests).
 	const getTotalMenuPrice = () => getAllIngredients().reduce((acc, curr) => acc = acc + state.numberOfGuests * curr.price, 0)
@@ -34,7 +34,8 @@ const createDinnerModel = () => {
 	const addDishToMenu = id => {
 		const selectedDish = getDish(id)
 		const restOfTheMenu = state.menu.filter(dish => dish.type !== selectedDish.type)
-		state.menu = restOfTheMenu.push(selectedDish)
+		restOfTheMenu.push(selectedDish)
+		state.menu = restOfTheMenu
 	}
 
 	// Removes dish from menu
@@ -76,6 +77,7 @@ const createDinnerModel = () => {
 		getSelectedDish,
 		getFullMenu,
 		getAllIngredients,
+		getPriceForDish,
 		getTotalMenuPrice,
 		addDishToMenu,
 		removeDishFromMenu,
diff --git a/js/toggleMenu.js b/js/toggleMenu.js
deleted file mode 100644
index 57fe2eb5c..000000000
--- a/js/toggleMenu.js
+++ /dev/null
@@ -1,20 +0,0 @@
-const toggleMenu = () => {
-  const sidebarContent = document.getElementById('sidebarContent')
-  const collapsedMenuCost = document.getElementById('collapsedMenuCost')
-
-  const sidebarContentDisplay = window.getComputedStyle(sidebarContent).display
-
-  if(sidebarContentDisplay === 'none') {
-    sidebarContent.classList.remove('hiddenOnMobile')
-    sidebarContent.classList.add('shownOnMobile')
-    collapsedMenuCost.classList.remove('shownOnMobile')
-    collapsedMenuCost.classList.add('hiddenOnMobile')
-  }
-  else {
-    sidebarContent.classList.remove('shownOnMobile')
-    sidebarContent.classList.add('hiddenOnMobile')
-    collapsedMenuCost.classList.remove('hiddenOnMobile')
-    collapsedMenuCost.classList.add('shownOnMobile')
-  }
-
-}
\ No newline at end of file
diff --git a/js/view/SidebarView.js b/js/view/SidebarView.js
new file mode 100644
index 000000000..c8413dabc
--- /dev/null
+++ b/js/view/SidebarView.js
@@ -0,0 +1,42 @@
+/*
+  * Sidebar View Object factory function
+
+  * @param {HTML DOM element} container - references the HTML parent element that contains the view.
+  * @param {Object} model - the reference to the Dinner Model
+*/
+
+const createSidebarView = (container, model) => {
+
+  const guestNumber = container.querySelector('#guestNumber')
+  guestNumber.value = model.getNumberOfGuests()
+  guestNumber.onchange = (event) => {
+    const newGuestNumber = event.target.value
+    model.setNumberOfGuests(newGuestNumber)
+  }
+
+  const menuTableContent = container.querySelector('#tableContent')
+
+  const createNewRow = (name, cost) => {
+
+    const tableRow = document.createElement('div')
+    tableRow.classList.add('tableRow')
+
+    const rowName = document.createElement('div')
+    rowName.classList.add('rowName')
+    rowName.innerHTML = `${name}`
+    
+    const rowCost = document.createElement('div')
+    rowCost.classList.add('rowCost')
+    rowCost.innerHTML = `${cost}:-`
+
+    tableRow.appendChild(rowName)
+    tableRow.appendChild(rowCost)
+
+    return tableRow
+  }
+
+  model.addDishToMenu(1)
+  model.getFullMenu().map(item => {
+    menuTableContent.appendChild(createNewRow(item.name, model.getPriceForDish(item.id)))
+  })
+}
\ No newline at end of file
diff --git a/styles/main.css b/styles/main.css
index b46968564..520608710 100644
--- a/styles/main.css
+++ b/styles/main.css
@@ -33,6 +33,8 @@ p {
   box-shadow: 0.1em 0.1em 0.1em black;
   font-size: 1em;
   padding: 0.5em;
+
+  margin: 0.5rem 0rem;
 }
 
 .secondaryButton {
@@ -67,24 +69,309 @@ p {
 
 #content {
   grid-area: content;
-  display: flex;
-  align-items: center;
-  justify-items: center;
+  display: grid;
 }
 
 #mainView {
   margin: 0 8rem;
   text-align: center;
+  align-self: center;
+  justify-self: center;
 }
 
 #welcomeText {
   margin-bottom: 1rem;
 }
 
+#appView {
+  display: grid;
+  grid-template-columns: 12rem auto;
+  grid-template-areas:
+    "sidebarView sectionView";
+}
+
+/* Sidebar View */
+#sidebarView {
+  grid-area: sidebarView;
+
+  display: grid;
+  grid-template-rows: 2rem 1fr;
+  grid-template-areas: 
+    "titleBar"
+    "collapseContent";
+  
+  background-color: aqua;
+  text-align: left;
+}
+
+#titleBar {
+  grid-area: titleBar;
+  display: flex;
+  justify-content: flex-end;
+}
+
+.collapseContent {
+  grid-area: collapseContent;
+  display: grid;
+  grid-template-rows: 2rem fit-content(100%) 3rem;
+  grid-template-areas: 
+    "guestSelector"
+    "dishTable"
+    "confirmButtonContainer";
+}
+
+#titleBarTitle {
+  align-self: center;
+  margin-right: auto;
+}
+
+#collapsedMenuTotalPrice {
+  align-self: center;
+  justify-self: center;
+  margin-right: 1rem;
+}
+
+#guestSelector {
+  grid-area: guestSelector;
+}
+
+#dishTable {
+  grid-area: dishTable;
+  display: grid;
+  grid-template-areas:
+    "tableHeader"
+    "tableContent"
+    "tableFooter"
+}
+
+#tableHeader {
+  grid-area: tableHeader;
+  display: grid;
+  grid-template-areas:
+    "tableName tableCost";
+
+  background-color: gainsboro;
+  font-weight: bold;
+}
+
+#tableName {
+  grid-area: tableName;
+  text-align: left;
+}
+
+#tableCost {
+  grid-area: tableCost;
+  text-align: right;
+}
+
+#tableContent {
+  grid-area: tableContent;
+  display: grid;
+  grid-template-rows: auto;
+}
+
+.tableRow {
+  display: grid;
+  grid-template-areas:
+    "rowName rowCost";
+}
+
+.rowName {
+  grid-area: rowName;
+  text-align: left;
+}
+
+.rowCost {
+  grid-area: rowCost;
+  text-align: right;
+}
+
+#tableFooter {
+  grid-area: tableFooter;
+  display: flex;
+  align-items: baseline;
+  justify-content: flex-end;
+}
+
+#confirmButtonContainer {
+  grid-area: confirmButtonContainer;
+  text-align: center;
+}
+
+#sectionView {
+  grid-area: sectionView;
+}
+
+/* Dish Search View */
+
+#dishSearchView {
+  display: grid;
+  grid-template-areas: 
+    "dishSearchTitle"
+    "dishSearchForm"
+    "dishSearchResults";
+}
+
+#dishSearchTitle {
+  grid-area: dishSearchTitle;
+  margin: 1rem 1rem;
+}
+
+#dishSearchForm {
+  grid-area: dishSearchForm;
+  margin: 0 1rem;
+  align-self: center;
+  justify-self: center;
+}
+
+#dishSearchField {
+  grid-area: dishSearchField;
+  width: 8rem;
+}
+
+#dishTypeSelectField {
+  grid-area: dishTypeSelectField;
+}
+
+#dishSearchButton {
+  grid-area: dishSearchButton;
+}
+
+#dishSearchResults {
+  grid-area: dishSearchResults;
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
+  margin: 2rem 2rem;
+
+  align-items: center;
+  justify-items: center;
+  text-align: center;
+}
+
+/* Dish Details View */
+#dishDetailsView {
+  display: grid;
+  grid-template-areas:
+    "dishDescription ingredientsList"
+    "dishPreparation dishPreparation";
+
+  text-align: left;
+}
+
+#dishDescription {
+  grid-area: dishDescription;
+}
+
+#ingredientsList {
+  grid-area: ingredientsList;
+  display: grid;
+  grid-template-rows: 4rem fit-content(100%) 4rem;
+  grid-template-areas: 
+    "ingredientsTitle"
+    "ingredientsTable"
+    "ingredientsFooter";
+
+  background-color: burlywood;
+  text-align: left;
+}
+
+#ingredientsTitle {
+  grid-area: ingredientsTitle;
+}
+
+#ingredientsTable {
+  grid-area: ingredientsTable;
+  display: grid;
+  grid-template-rows: auto;
+}
+
+.ingredientsTableRow {
+  display: grid;
+  grid-template-columns: repeat(4, 1fr);
+  grid-template-areas: 
+    "ingredientQuantity ingredientName ingredientCurrency ingredientPrice";
+  padding: 0.5rem 0;
+}
+
+.ingredientQuantity {
+  grid-area: ingredientQuantity;
+}
+
+.ingredientName {
+  grid-area: ingredientName;
+}
+
+.ingredientCurrency {
+  grid-area: ingredientCurrency;
+  text-align: right;
+}
+
+.ingredientPrice {
+  grid-area: ingredientPrice;
+  text-align: right;
+}
+
+#ingredientsFooter {
+  grid-area: ingredientsFooter;
+  display: grid;
+  grid-template-columns: repeat(4, 1fr);
+  grid-template-areas: 
+    "addToMenu addToMenu ingredientsTotalPriceCurrency ingredientsTotalPrice"
+}
+
+#addToMenu {
+  grid-area: addToMenu;
+  grid-column: span 2;
+}
+
+#ingredientsTotalPriceCurrency {
+  grid-area: ingredientsTotalPriceCurrency;
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+}
+
+#ingredientsTotalPrice {
+  grid-area: ingredientsTotalPrice;
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+}
+
+#dishPreparation {
+  grid-area: dishPreparation;
+}
+
+@media (min-width: 701px) {
+  #collapsedMenuTotalPrice {
+    display: none;
+  }
+}
+
 @media (max-width: 700px) {
   #mainView {
     margin: 0 6rem;
   }
+
+  .showOnMobile {
+    display: inline;
+  }
+
+  .hideOnMobile {
+    display: none;
+  }
+
+  #appView {
+    grid-template-areas: "sidebarView" "sectionView";
+    grid-template-columns: none;
+  }
+
+  #dishDetailsView {
+    grid-template-areas:
+      "dishDescription"
+      "ingredientsList"
+      "dishPreparation";
+  }
 }
 
 @media (max-width: 520px) {
@@ -93,7 +380,7 @@ p {
   }
 }
 
-@media (max-width: 520px) {
+@media (max-width: 320px) {
   #mainView {
     margin: 0 2rem;
   }

From c846fe7166320ac179692910e1bf3da5c64063cd Mon Sep 17 00:00:00 2001
From: Andrew Szucs <andrew0szucs@gmail.com>
Date: Tue, 23 Jan 2018 00:25:17 +0100
Subject: [PATCH 13/45] Add MenuSummary/Confirm view to index.html

---
 index.html      |  74 +++++++++++++++++++++++++++++---
 styles/main.css | 110 ++++++++++++++++++++++++++++++++++++++++++++++++
 2 files changed, 179 insertions(+), 5 deletions(-)

diff --git a/index.html b/index.html
index b6c1df20c..cd6285dd4 100644
--- a/index.html
+++ b/index.html
@@ -26,8 +26,9 @@ <h1>Dinner Planner</h1>
           <button id="startButton" class="primaryButton">Create new dinner</button>
         </div> -->
 
-        <div id="appView">
-          <div id="sidebarView">
+        <!-- <div id="appView"> -->
+          
+          <!-- <div id="sidebarView">
             <div id="titleBar">
               <h4 id="titleBarTitle">My Dinner</h4>
               <div id="collapsedMenuTotalPrice" class="totalPrice showOnMobile">
@@ -70,9 +71,9 @@ <h4 id="titleBarTitle">My Dinner</h4>
     
             </div>
     
-          </div>
+          </div> -->
 
-          <div id="sectionView">
+          <!-- <div id="sectionView"> -->
 
             <!-- <div id="dishSearchView">
           
@@ -195,7 +196,70 @@ <h3>Preparation</h3>
     
             </div> -->
 
-            
+          <!-- </div> -->
+
+        <!-- </div> -->
+
+        <div id="menuSummaryView">
+              
+          <div id="statusBar" class="">
+            <h2 id="statusTitle">My Dinner: <span id="numberOfGuests">3</span> people</h2>
+            <button id="backButton" class="primaryButton" >Go back and edit dinner</button>
+          </div>
+
+          <div id="summaryView">
+
+            <div id="priceSummary">
+
+              <div id="dishListContainer">
+
+                <div id="starter" class="dishItemContainer">
+                  <div class="verticallyCentered dishImage">
+                    <img src="images/bakedbrie.jpg" alt="">
+                  </div>
+                  <p class="dishName">Baked Brie</p>
+                  <p class="dishPrice">
+                    <span class="value">77.20</span> <span class="currency">SEK</span>
+                  </p>
+                </div>
+        
+                <div id="mainCourse" class="dishItemContainer">
+                  <div class="verticallyCentered dishImage">
+                    <img src="images/icecream.jpg" alt="">
+                  </div>
+                  <p class="dishName">Ice Cream</p>
+                  <p class="dishPrice">
+                    <span class="value">77.20</span> <span class="currency">SEK</span>
+                  </p>
+                </div>
+        
+                <div id="dessert" class="dishItemContainer">
+                  <div class="verticallyCentered dishImage">
+                    <img src="images/meatballs.jpg" alt="">
+                  </div>
+                  <p class="dishName">Meatballs</p>
+                  <p class="dishPrice">
+                    <span class="value">77.20</span> <span class="currency">SEK</span>
+                  </p>
+                </div>
+        
+                <div id="totalPrice" class="dishItemContainer">
+                  <div class="verticallyCentered dishImage"></div>
+                  <p class="dishName">Total:</p>
+                  <p class="dishPrice">
+                    <span class="value">77.20</span> <span class="currency">SEK</span>
+                  </p>
+                </div>
+
+              </div>
+
+              <div id="printButtonContainer" class="item">
+                <button id="printButton" class="primaryButton">Print Full Recipe</button>
+              </div>
+
+            </div>
+
+            <div id="recipeSummary"></div>
 
           </div>
 
diff --git a/styles/main.css b/styles/main.css
index 520608710..7fd5a1657 100644
--- a/styles/main.css
+++ b/styles/main.css
@@ -342,6 +342,100 @@ p {
   grid-area: dishPreparation;
 }
 
+/* Menu Summary View */
+#menuSummaryView {
+  display: grid;
+  grid-template-rows: 4rem auto;
+  grid-template-areas:
+    "statusBar"
+    "summaryView"
+}
+
+#statusBar {
+  grid-area: statusBar;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 0 1rem;
+  border-bottom: 0.2rem solid black;
+}
+
+#summaryView {
+  grid-area: summaryView;
+}
+
+/* Price Summary View */
+#priceSummary {
+  display: grid;
+  grid-template-areas: 
+    "dishListContainer"
+    "printButtonContainer";
+}
+
+#dishListContainer {
+  grid-area: dishListContainer;
+  display: grid;
+  grid-gap: 3rem;
+  grid-template-areas: 
+  "starter mainCourse dessert totalPrice";
+  
+  align-items: center;
+  justify-content: center;
+  text-align: center;
+  margin: 5rem 0rem;
+}
+
+
+#starter {
+  grid-area: starter;
+}
+
+#mainCourse {
+  grid-area: mainCourse;
+}
+
+#dessert {
+  grid-area: dessert;
+}
+
+#totalPrice {
+  grid-area: totalPrice;
+  border-left: 0.2rem solid black;
+  padding: 0rem 1rem;
+}
+
+.dishItemContainer {
+  display: grid;
+  grid-template-rows: 140px repeat(2, auto);
+  grid-template-areas:
+    "dishImage"
+    "dishName"
+    "dishPrice";
+}
+
+.dishImage {
+  grid-area: dishImage;
+}
+
+.dishName {
+  grid-area: dishName;
+}
+
+.dishPrice {
+  grid-area: dishPrice;
+  margin-left: auto;
+}
+
+#printButtonContainer {
+  grid-area: printButtonContainer;
+  border-top: 0.2rem solid black;
+
+  text-align: center;
+  padding: 1rem 0rem;
+}
+
+/* Recipe Summary View */
+
 @media (min-width: 701px) {
   #collapsedMenuTotalPrice {
     display: none;
@@ -372,6 +466,22 @@ p {
       "ingredientsList"
       "dishPreparation";
   }
+
+  #dishListContainer {
+    grid-template-areas:
+      "starter"
+      "mainCourse"
+      "dessert"
+      "totalPrice";
+    margin: 1rem 0rem;
+  }
+
+  #totalPrice {
+    display: inline;
+    border-left: none;
+    border-top: 0.2rem solid black;
+    padding: 1rem 0rem;
+  }
 }
 
 @media (max-width: 520px) {

From 1cfa03859fe451efb2a726dd1134141343f87fe0 Mon Sep 17 00:00:00 2001
From: Andrew Szucs <andrew0szucs@gmail.com>
Date: Tue, 23 Jan 2018 00:52:15 +0100
Subject: [PATCH 14/45] Add all views into index.html

---
 confirm.html              |  88 -----------
 dish.html                 | 154 -------------------
 index.html                |  95 +++++++++---
 js/app.js                 |  31 +++-
 js/view/DishSearchView.js |  10 ++
 js/view/SidebarView.js    |   1 +
 printout.html             | 105 -------------
 select.html               | 154 -------------------
 styles/confirm.css        | 125 ----------------
 styles/dish.css           | 303 --------------------------------------
 styles/main.css           |  34 +++++
 styles/printout.css       |  84 -----------
 styles/select.css         | 259 --------------------------------
 13 files changed, 151 insertions(+), 1292 deletions(-)
 delete mode 100644 confirm.html
 delete mode 100644 dish.html
 create mode 100644 js/view/DishSearchView.js
 delete mode 100644 printout.html
 delete mode 100644 select.html
 delete mode 100644 styles/confirm.css
 delete mode 100644 styles/dish.css
 delete mode 100644 styles/printout.css
 delete mode 100644 styles/select.css

diff --git a/confirm.html b/confirm.html
deleted file mode 100644
index 1f4bf95f2..000000000
--- a/confirm.html
+++ /dev/null
@@ -1,88 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-  <head>
-    <meta charset="utf-8">
-    <meta http-equiv="X-UA-Compatible" content="IE=edge">
-    <meta name="viewport" content="width=device-width, initial-scale=1">
-    <title>Dinner planner</title>
-
-		<!-- Bootstrap CSS -->
-    <!-- <link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.0/css/bootstrap.min.css"> -->
-		<link rel="stylesheet" href="styles/confirm.css">
-
-  </head>
-
-  <body>
-		<div class="container">
-
-      <div id="header" class="verticallyCentered">
-        <h1>Dinner Planner</h1>
-      </div>
-      
-      <div id="statusBar" class="verticallyCentered">
-        <p id="statusTitle">My Dinner: <span id="numberOfGuests">3</span> people</p>
-        <button id="backButton" class="primaryButton" >Go back and edit dinner</button>
-      </div>
-
-      <div id="menuSummary" class="verticallyCentered">
-
-        <div id="starter" class="dishItemContainer">
-          <div class="verticallyCentered dishImage">
-            <img src="images/bakedbrie.jpg" alt="">
-          </div>
-          <p class="dishName">Baked Brie</p>
-          <p class="dishPrice">
-            <span class="value">77.20</span> <span class="currency">SEK</span>
-          </p>
-        </div>
-
-        <div id="mainCourse" class="dishItemContainer">
-          <div class="verticallyCentered dishImage">
-            <img src="images/icecream.jpg" alt="">
-          </div>
-          <p class="dishName">Ice Cream</p>
-          <p class="dishPrice">
-            <span class="value">77.20</span> <span class="currency">SEK</span>
-          </p>
-        </div>
-
-        <div id="dessert" class="dishItemContainer">
-          <div class="verticallyCentered dishImage">
-            <img src="images/meatballs.jpg" alt="">
-          </div>
-          <p class="dishName">Meatballs</p>
-          <p class="dishPrice">
-            <span class="value">77.20</span> <span class="currency">SEK</span>
-          </p>
-        </div>
-
-        <div id="totalPrice" class="dishItemContainer">
-          <div class="verticallyCentered dishImage"></div>
-          <p class="dishName">Total:</p>
-          <p class="dishPrice">
-            <span class="value">77.20</span> <span class="currency">SEK</span>
-          </p>
-        </div>
-
-      </div>        
-
-      <div id="printButtonContainer" class="item">
-        <button id="printButton" class="primaryButton">Print Full Recipe</button>
-      </div>
-
-    </div>
-
-    <!-- jQuery -->
-    <!-- <script src="https://code.jquery.com/jquery.js"></script> -->
-    <!-- Bootstrap JavaScript, needed if you want for instance tabs, models, popovers etc. -->
-    <!-- <script src="http://netdna.bootstrapcdn.com/bootstrap/3.1.0/js/bootstrap.min.js"></script> -->
-
-    <!-- The application JavaScript code -->
-    <script src="js/toggleMenu.js"></script>
-    <script src="js/app.js"></script>
-    <script src="js/model/dinnerModel.js"></script>
-    <script src="js/view/exampleView.js"></script>
-    <!-- TODO: Here you should include JS code for your other views -->
-
-  </body>
-</html>
\ No newline at end of file
diff --git a/dish.html b/dish.html
deleted file mode 100644
index f28bad036..000000000
--- a/dish.html
+++ /dev/null
@@ -1,154 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-  <head>
-    <meta charset="utf-8">
-    <meta http-equiv="X-UA-Compatible" content="IE=edge">
-    <meta name="viewport" content="width=device-width, initial-scale=1">
-    <title>Dinner planner</title>
-
-		<!-- Bootstrap CSS -->
-    <!-- <link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.0/css/bootstrap.min.css"> -->
-		<link rel="stylesheet" href="styles/dish.css">
-
-  </head>
-
-  <body>
-		<div class="container">
-
-      <div id="header" class="verticallyCentered">
-        <h1>Dinner Planner</h1>
-      </div>
-      
-      <div id="sidebar">
-        
-        <div id="titleBar">
-          <h4 id="titleBarTitle">My Dinner</h4>
-          <div id="collapsedMenuTotalPrice" class="totalPrice showOnMobile">
-            <span class="totalPriceCurrency">SEK</span> <span class="totalPriceValue">77.20</span>
-          </div>
-          <button id="expandButton" class="secondaryButton showOnMobile" onclick="toggleSidebar()">
-            Expand
-          </button>
-        </div>
-
-        <div id="sideBarContent" class="collapseContent hideOnMobile">
-          <div id="guestSelector" class="show">
-            <label for="guestNumber">Guests:</label>
-            <input id="guestNumber" type="number" value="1">
-          </div>
-      
-          <div id="dishTable" class="show">
-            <div id="tableHeader">
-              <div id="tableName">Dish name</div>
-              <div id="tableCost">Cost</div>
-            </div>
-  
-            <div id="tableContent">
-  
-              <div class="tableRow">
-                <div class="rowName">Lasagne</div>
-                <div class="rowCost">77.20</div>
-              </div>
-  
-              <div class="tableRow">
-                <div class="rowName">Lasagne</div>
-                <div class="rowCost">77.20</div>
-              </div>
-  
-            </div>
-  
-            <div id="tableFooter">
-              <div id="tableTotalPrice" class="totalPrice">
-                <span class="totalPriceCurrency">SEK</span> <span id="totalPriceValue">77.20</span>
-              </div>
-            </div>
-          </div>
-
-          <div id="confirmButtonContainer" class="show">
-            <button class="primaryButton" id="confirmMenuButton">Confirm Dinner</button>
-          </div>
-
-        </div>
-
-      </div>
-
-      <div id="content">
-        <div id="dishDetails">
-          
-          <div id="dishDescription">
-            <div id="dishTitle">
-              <h2>Baked Brie</h2>
-            </div>
-            <div id="dishImage">
-              <img src="images/bakedbrie.jpg" alt="">
-            </div>
-            <div id="dishDescription">
-              <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Eget aliquet nibh praesent tristique. Quis hendrerit dolor magna eget. In cursus turpis massa tincidunt dui ut ornare.</p>
-            </div>
-            <button id="backButton" class="primaryButton">Back to Search</button>
-          </div>
-          
-          <div id="ingredientsList">
-            
-            <div id="ingredientsTitle">
-              <h3>Ingredients for <span id="numberOfGuests">3</span> people</h3>
-            </div>
-
-            <div id="ingredientsTable">
-
-              <div class="ingredientsTableRow">
-                <div class="ingredientQuantity">
-                  <span id="quantity">2</span> <span id="unit">tbsp</span>
-                </div>
-                <div class="ingredientName">olive oil</div>
-                <div class="ingredientCurrency">SEK</div>
-                <div class="ingredientPrice">0.20</div>
-              </div>
-  
-              <div class="ingredientsTableRow">
-                <div class="ingredientQuantity">
-                  <span id="quantity">750</span> <span id="unit">g</span>
-                </div>
-                <div class="ingredientName">lean beef mince</div>
-                <div class="ingredientCurrency">SEK</div>
-                <div class="ingredientPrice">10.00</div>
-              </div>
-  
-            </div>
-
-            <div id="ingredientsFooter">
-              <div id="addToMenu" class="verticallyCentered">
-                <button id="addToMenuButton" class="primaryButton">Add to menu</button>
-              </div>
-              <div id="ingredientsTotalPriceCurrency">SEK</div>
-              <div id="ingredientsTotalPrice">10.00</div>
-            </div>
-
-          </div>
-          
-          <div id="dishPreparation">
-            <h3>Preparation</h3>
-            <div id="dishPreparationText">
-              <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Eget aliquet nibh praesent tristique. Quis hendrerit dolor magna eget. In cursus turpis massa tincidunt dui ut ornare. Sed adipiscing diam donec adipiscing tristique risus nec feugiat in. Dolor sit amet consectetur adipiscing elit. Ac tincidunt vitae semper quis lectus nulla at. Mauris augue neque gravida in fermentum. Egestas diam in arcu cursus euismod quis viverra nibh. Vulputate enim nulla aliquet porttitor lacus luctus accumsan. Quis varius quam quisque id. Non odio euismod lacinia at quis risus sed vulputate. Id cursus metus aliquam eleifend mi in. Tortor pretium viverra suspendisse potenti nullam ac tortor.</p>
-            </div>
-          </div>
-
-        </div>
-      </div>
-
-    </div>
-
-    <!-- jQuery -->
-    <!-- <script src="https://code.jquery.com/jquery.js"></script> -->
-    <!-- Bootstrap JavaScript, needed if you want for instance tabs, models, popovers etc. -->
-    <!-- <script src="http://netdna.bootstrapcdn.com/bootstrap/3.1.0/js/bootstrap.min.js"></script> -->
-
-    <!-- The application JavaScript code -->
-    <script src="js/lib/toggleSidebar.js"></script>
-    <script src="js/app.js"></script>
-    <script src="js/model/dinnerModel.js"></script>
-    <script src="js/view/exampleView.js"></script>
-    <!-- TODO: Here you should include JS code for your other views -->
-
-  </body>
-</html>
\ No newline at end of file
diff --git a/index.html b/index.html
index cd6285dd4..283e9a6a7 100644
--- a/index.html
+++ b/index.html
@@ -26,9 +26,9 @@ <h1>Dinner Planner</h1>
           <button id="startButton" class="primaryButton">Create new dinner</button>
         </div> -->
 
-        <!-- <div id="appView"> -->
+        <div id="appView">
           
-          <!-- <div id="sidebarView">
+          <div id="sidebarView">
             <div id="titleBar">
               <h4 id="titleBarTitle">My Dinner</h4>
               <div id="collapsedMenuTotalPrice" class="totalPrice showOnMobile">
@@ -71,11 +71,11 @@ <h4 id="titleBarTitle">My Dinner</h4>
     
             </div>
     
-          </div> -->
+          </div>
 
-          <!-- <div id="sectionView"> -->
+          <div id="sectionView">
 
-            <!-- <div id="dishSearchView">
+            <div id="dishSearchView">
           
               <h2 id="dishSearchTitle">Find a dish</h2>
   
@@ -133,7 +133,7 @@ <h2 id="dishSearchTitle">Find a dish</h2>
       
               </div>
   
-            </div> -->
+            </div>
 
             <!-- <div id="dishDetailsView">
               <div id="dishDescription">
@@ -196,20 +196,20 @@ <h3>Preparation</h3>
     
             </div> -->
 
-          <!-- </div> -->
+          </div>
 
-        <!-- </div> -->
+        </div>
 
-        <div id="menuSummaryView">
+        <!-- <div id="menuSummaryView"> -->
               
-          <div id="statusBar" class="">
+          <!-- <div id="statusBar" class="">
             <h2 id="statusTitle">My Dinner: <span id="numberOfGuests">3</span> people</h2>
             <button id="backButton" class="primaryButton" >Go back and edit dinner</button>
-          </div>
+          </div> -->
 
-          <div id="summaryView">
+          <!-- <div id="summaryView"> -->
 
-            <div id="priceSummary">
+            <!-- <div id="priceSummary">
 
               <div id="dishListContainer">
 
@@ -257,13 +257,73 @@ <h2 id="statusTitle">My Dinner: <span id="numberOfGuests">3</span> people</h2>
                 <button id="printButton" class="primaryButton">Print Full Recipe</button>
               </div>
 
-            </div>
+            </div> -->
+
+            <!-- <div id="recipeSummaryView">
+              <div class="recipe">
+                <div class="recipeImage">
+                  <img src="images/bakedbrie.jpg" alt="">
+                </div>
+                
+                <div class="recipeTextbox">
+                  <h2 class="recipeName">Baked Brie</h2>
+                  <p class="recipeDescriptionText">
+                    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Eget aliquet nibh praesent tristique. Quis hendrerit dolor magna eget. In cursus turpis massa tincidunt dui ut ornare. Sed adipiscing diam donec adipiscing tristique risus nec feugiat in.
+                  </p>
+                </div>
+      
+                <div class="recipeTextbox">
+                  <h3>Preparation</h3>
+                  <p class="recipePreparationText">
+                    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Eget aliquet nibh praesent tristique. Quis hendrerit dolor magna eget. In cursus turpis massa tincidunt dui ut ornare. Sed adipiscing diam donec adipiscing tristique risus nec feugiat in. Dolor sit amet consectetur adipiscing elit. Ac tincidunt vitae semper quis lectus nulla at. Mauris augue neque gravida in fermentum. Egestas diam in arcu cursus euismod quis viverra nibh. Vulputate enim nulla aliquet porttitor lacus luctus accumsan. Quis varius quam quisque id. Non odio euismod lacinia at quis risus sed vulputate. Id cursus metus aliquam eleifend mi in. Tortor pretium viverra suspendisse potenti nullam ac tortor.
+                  </p>
+                </div>
+              </div>
+      
+              <div class="recipe">
+                <div class="recipeImage">
+                  <img src="images/icecream.jpg" alt="">
+                </div>
+                
+                <div class="recipeTextbox">
+                  <h2 class="recipeName">Ice Cream</h2>
+                  <p class="recipeDescriptionText">
+                    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Eget aliquet nibh praesent tristique. Quis hendrerit dolor magna eget. In cursus turpis massa tincidunt dui ut ornare. Sed adipiscing diam donec adipiscing tristique risus nec feugiat in.
+                  </p>
+                </div>
+      
+                <div class="recipeTextbox">
+                  <h3>Preparation</h3>
+                  <p class="recipePreparationText">
+                    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Eget aliquet nibh praesent tristique. Quis hendrerit dolor magna eget. In cursus turpis massa tincidunt dui ut ornare. Sed adipiscing diam donec adipiscing tristique risus nec feugiat in. Dolor sit amet consectetur adipiscing elit. Ac tincidunt vitae semper quis lectus nulla at. Mauris augue neque gravida in fermentum. Egestas diam in arcu cursus euismod quis viverra nibh. Vulputate enim nulla aliquet porttitor lacus luctus accumsan. Quis varius quam quisque id. Non odio euismod lacinia at quis risus sed vulputate. Id cursus metus aliquam eleifend mi in. Tortor pretium viverra suspendisse potenti nullam ac tortor.
+                  </p>
+                </div>
+              </div>
+      
+              <div class="recipe">
+                <div class="recipeImage">
+                  <img src="images/meatballs.jpg" alt="">
+                </div>
+                
+                <div class="recipeTextbox">
+                  <h2 class="recipeName">Meatball</h2>
+                  <p class="recipeDescriptionText">
+                    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Eget aliquet nibh praesent tristique. Quis hendrerit dolor magna eget. In cursus turpis massa tincidunt dui ut ornare. Sed adipiscing diam donec adipiscing tristique risus nec feugiat in.
+                  </p>
+                </div>
+                <div class="recipeTextbox">
+                  <h3 class="recipePreparationTitle">Preparation</h3>
+                  <p class="recipePreparationText">
+                    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Eget aliquet nibh praesent tristique. Quis hendrerit dolor magna eget. In cursus turpis massa tincidunt dui ut ornare. Sed adipiscing diam donec adipiscing tristique risus nec feugiat in. Dolor sit amet consectetur adipiscing elit. Ac tincidunt vitae semper quis lectus nulla at. Mauris augue neque gravida in fermentum. Egestas diam in arcu cursus euismod quis viverra nibh. Vulputate enim nulla aliquet porttitor lacus luctus accumsan. Quis varius quam quisque id. Non odio euismod lacinia at quis risus sed vulputate. Id cursus metus aliquam eleifend mi in. Tortor pretium viverra suspendisse potenti nullam ac tortor.
+                  </p>
+                </div>
+              </div>
 
-            <div id="recipeSummary"></div>
+            </div> -->
 
-          </div>
+          <!-- </div> -->
 
-        </div>
+        <!-- </div> -->
         
       </div>
 
@@ -272,6 +332,7 @@ <h2 id="statusTitle">My Dinner: <span id="numberOfGuests">3</span> people</h2>
     <script src="js/lib/toggleSidebar.js"></script>
     <!-- Here you should include JS code for your other views -->
     <script src="js/view/SidebarView.js"></script>
+    <script src="js/view/DishSearchView.js"></script>
     <script src="js/model/dinnerModel.js"></script>
     <!-- The application JavaScript code -->
     <script src="js/app.js"></script>
diff --git a/js/app.js b/js/app.js
index 27f9f3e05..0eefddeb0 100644
--- a/js/app.js
+++ b/js/app.js
@@ -4,15 +4,40 @@
 
 	// Create the instances of the Views
 	const sidebarView = createSidebarView(
-		document.getElementById('sidebar'),
+		document.getElementById('sidebarView'),
 		model
 	)
 
-	const welcomeView = createWelcomeView(
-		document.getElementById('mainView'),
+	// const welcomeView = createWelcomeView(
+	// 	document.getElementById('mainView'),
+	// 	model
+	// )
+	
+	const dishSearchView = createDishSearchView(
+		document.getElementById('dishSearchView'),
 		model
 	)
 
+	// const dishDetailsView = createDishDetailsView(
+	// 	document.getElementById('dishDetailsView'),
+	// 	model
+	// )
+	
+	// const statusBarView = createStatusBarView(
+	// 	document.getElementById('statusBar'),
+	// 	model
+	// )
+
+	// const priceSummaryView = createPriceSummaryView(
+	// 	document.getElementById('priceSummary'),
+	// 	model
+	// )
+
+	// const recipeSummaryView = createRecipeSummaryView(
+	// 	document.getElementById('recipeSummaryView'),
+	// 	model
+	// )
+
 	/**
 	 * IMPORTANT: app.js is the only place where you are allowed to
 	 * use the $('someSelector') to search for elements in the whole HTML.
diff --git a/js/view/DishSearchView.js b/js/view/DishSearchView.js
new file mode 100644
index 000000000..7d61cf64b
--- /dev/null
+++ b/js/view/DishSearchView.js
@@ -0,0 +1,10 @@
+/*
+  * Dish Search View Object factory function
+
+  * @param {HTML DOM element} container - references the HTML parent element that contains the view.
+  * @param {Object} model - the reference to the Dinner Model
+*/
+
+const createDishSearchView = (container, model) => {
+  
+}
\ No newline at end of file
diff --git a/js/view/SidebarView.js b/js/view/SidebarView.js
index c8413dabc..8149f21a8 100644
--- a/js/view/SidebarView.js
+++ b/js/view/SidebarView.js
@@ -12,6 +12,7 @@ const createSidebarView = (container, model) => {
   guestNumber.onchange = (event) => {
     const newGuestNumber = event.target.value
     model.setNumberOfGuests(newGuestNumber)
+    console.log('Guest number is: ', model.getNumberOfGuests())
   }
 
   const menuTableContent = container.querySelector('#tableContent')
diff --git a/printout.html b/printout.html
deleted file mode 100644
index 0970df4e0..000000000
--- a/printout.html
+++ /dev/null
@@ -1,105 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-  <head>
-    <meta charset="utf-8">
-    <meta http-equiv="X-UA-Compatible" content="IE=edge">
-    <meta name="viewport" content="width=device-width, initial-scale=1">
-    <title>Dinner planner</title>
-
-		<!-- Bootstrap CSS -->
-    <!-- <link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.0/css/bootstrap.min.css"> -->
-		<link rel="stylesheet" href="styles/printout.css">
-
-  </head>
-
-  <body>
-		<div class="container">
-
-      <div id="header" class="verticallyCentered">
-        <h1>Dinner Planner</h1>
-      </div>
-      
-      <div id="statusBar" class="verticallyCentered">
-        <p id="statusTitle">My Dinner: <span id="numberOfGuests">3</span> people</p>
-        <button id="backButton" class="primaryButton" >Go back and edit dinner</button>
-      </div>
-
-      <div id="recipes">
-
-        <div class="recipe">
-          <div class="verticallyCentered recipeImage">
-            <img src="images/bakedbrie.jpg" alt="">
-          </div>
-          
-          <div class="recipeTextbox">
-            <h2 class="recipeName">Baked Brie</h2>
-            <p class="recipeDescriptionText">
-              Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Eget aliquet nibh praesent tristique. Quis hendrerit dolor magna eget. In cursus turpis massa tincidunt dui ut ornare. Sed adipiscing diam donec adipiscing tristique risus nec feugiat in.
-            </p>
-          </div>
-
-          <div class="recipeTextbox">
-            <h3>Preparation</h3>
-            <p class="recipePreparationText">
-              Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Eget aliquet nibh praesent tristique. Quis hendrerit dolor magna eget. In cursus turpis massa tincidunt dui ut ornare. Sed adipiscing diam donec adipiscing tristique risus nec feugiat in. Dolor sit amet consectetur adipiscing elit. Ac tincidunt vitae semper quis lectus nulla at. Mauris augue neque gravida in fermentum. Egestas diam in arcu cursus euismod quis viverra nibh. Vulputate enim nulla aliquet porttitor lacus luctus accumsan. Quis varius quam quisque id. Non odio euismod lacinia at quis risus sed vulputate. Id cursus metus aliquam eleifend mi in. Tortor pretium viverra suspendisse potenti nullam ac tortor.
-            </p>
-          </div>
-        </div>
-
-        <div class="recipe">
-          <div class="verticallyCentered recipeImage">
-            <img src="images/icecream.jpg" alt="">
-          </div>
-          
-          <div class="recipeTextbox">
-            <h2 class="recipeName">Ice Cream</h2>
-            <p class="recipeDescriptionText">
-              Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Eget aliquet nibh praesent tristique. Quis hendrerit dolor magna eget. In cursus turpis massa tincidunt dui ut ornare. Sed adipiscing diam donec adipiscing tristique risus nec feugiat in.
-            </p>
-          </div>
-
-          <div class="recipeTextbox">
-            <h3>Preparation</h3>
-            <p class="recipePreparationText">
-              Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Eget aliquet nibh praesent tristique. Quis hendrerit dolor magna eget. In cursus turpis massa tincidunt dui ut ornare. Sed adipiscing diam donec adipiscing tristique risus nec feugiat in. Dolor sit amet consectetur adipiscing elit. Ac tincidunt vitae semper quis lectus nulla at. Mauris augue neque gravida in fermentum. Egestas diam in arcu cursus euismod quis viverra nibh. Vulputate enim nulla aliquet porttitor lacus luctus accumsan. Quis varius quam quisque id. Non odio euismod lacinia at quis risus sed vulputate. Id cursus metus aliquam eleifend mi in. Tortor pretium viverra suspendisse potenti nullam ac tortor.
-            </p>
-          </div>
-        </div>
-
-        <div class="recipe">
-            <div class="verticallyCentered recipeImage">
-              <img src="images/meatballs.jpg" alt="">
-            </div>
-            
-            <div class="recipeTextbox">
-              <h2 class="recipeName">Meatball</h2>
-              <p class="recipeDescriptionText">
-                Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Eget aliquet nibh praesent tristique. Quis hendrerit dolor magna eget. In cursus turpis massa tincidunt dui ut ornare. Sed adipiscing diam donec adipiscing tristique risus nec feugiat in.
-              </p>
-            </div>
-            <div class="recipeTextbox">
-              <h3 class="recipePreparationTitle">Preparation</h3>
-              <p class="recipePreparationText">
-                Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Eget aliquet nibh praesent tristique. Quis hendrerit dolor magna eget. In cursus turpis massa tincidunt dui ut ornare. Sed adipiscing diam donec adipiscing tristique risus nec feugiat in. Dolor sit amet consectetur adipiscing elit. Ac tincidunt vitae semper quis lectus nulla at. Mauris augue neque gravida in fermentum. Egestas diam in arcu cursus euismod quis viverra nibh. Vulputate enim nulla aliquet porttitor lacus luctus accumsan. Quis varius quam quisque id. Non odio euismod lacinia at quis risus sed vulputate. Id cursus metus aliquam eleifend mi in. Tortor pretium viverra suspendisse potenti nullam ac tortor.
-              </p>
-            </div>
-          </div>
-
-      </div>
-
-    </div>
-
-    <!-- jQuery -->
-    <!-- <script src="https://code.jquery.com/jquery.js"></script> -->
-    <!-- Bootstrap JavaScript, needed if you want for instance tabs, models, popovers etc. -->
-    <!-- <script src="http://netdna.bootstrapcdn.com/bootstrap/3.1.0/js/bootstrap.min.js"></script> -->
-
-    <!-- The application JavaScript code -->
-    <script src="js/toggleMenu.js"></script>
-    <script src="js/app.js"></script>
-    <script src="js/model/dinnerModel.js"></script>
-    <script src="js/view/exampleView.js"></script>
-    <!-- TODO: Here you should include JS code for your other views -->
-
-  </body>
-</html>
\ No newline at end of file
diff --git a/select.html b/select.html
deleted file mode 100644
index 8436a4424..000000000
--- a/select.html
+++ /dev/null
@@ -1,154 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-  <head>
-    <meta charset="utf-8">
-    <meta http-equiv="X-UA-Compatible" content="IE=edge">
-    <meta name="viewport" content="width=device-width, initial-scale=1">
-    <title>Dinner planner</title>
-
-		<!-- Bootstrap CSS -->
-    <!-- <link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.0/css/bootstrap.min.css"> -->
-		<link rel="stylesheet" href="styles/select2.css">
-
-  </head>
-
-  <body>
-		<div class="container">
-
-      <div id="header" class="verticallyCentered">
-        <h1>Dinner Planner</h1>
-      </div>
-      
-      <div id="sidebar">
-        
-        <div id="titleBar">
-          <h4 id="titleBarTitle">My Dinner</h4>
-          <div id="collapsedMenuTotalPrice" class="totalPrice showOnMobile">
-            <span class="totalPriceCurrency">SEK</span> <span class="totalPriceValue">77.20</span>
-          </div>
-          <button id="expandButton" class="secondaryButton showOnMobile" onclick="toggleSidebar()">
-            Expand
-          </button>
-        </div>
-
-        <div id="sideBarContent" class="collapseContent hideOnMobile">
-          <div id="guestSelector" class="show">
-            <label for="guestNumber">Guests:</label>
-            <input id="guestNumber" type="number" value="1">
-          </div>
-      
-          <div id="dishTable" class="show">
-            <div id="tableHeader">
-              <div id="tableName">Dish name</div>
-              <div id="tableCost">Cost</div>
-            </div>
-  
-            <div id="tableContent">
-  
-              <div class="tableRow">
-                <div class="rowName">Lasagne</div>
-                <div class="rowCost">77.20</div>
-              </div>
-  
-              <div class="tableRow">
-                <div class="rowName">Lasagne</div>
-                <div class="rowCost">77.20</div>
-              </div>
-  
-            </div>
-  
-            <div id="tableFooter">
-              <div id="tableTotalPrice" class="totalPrice">
-                <span class="totalPriceCurrency">SEK</span> <span id="totalPriceValue">77.20</span>
-              </div>
-            </div>
-          </div>
-
-          <div id="confirmButtonContainer" class="show">
-            <button class="primaryButton" id="confirmMenuButton">Confirm Dinner</button>
-          </div>
-
-        </div>
-
-      </div>
-
-    <div id="content">
-      <div id="dishSearch">
-        
-        <h2 id="dishSearchTitle">Find a dish</h2>
-
-        <div id="dishSearchForm">
-
-          <input type="search" id="dishSearchField" name="dishSearchField" placeholder="Enter keywords">
-
-          <select id="dishTypeSelectField" name="dishTypeSelectField">
-            <option value="all" selected>All</option>
-            <option value="starter">Starter</option>
-            <option value="main dish">Main Dish</option>
-            <option value="dessert">Dessert</option>
-          </select>
-          
-          <button id="dishSearchButton" class="secondaryButton">Search</button>
-
-        </div>
-
-        <div id="dishSearchResults">
-
-          <div class="dishResult">
-            <div class="dishResultImageContainer">
-              <img class="dishResultImage" src="images/bakedbrie.jpg" alt="">
-            </div>
-            <div class="dishResultName">Baked Brie</div>
-          </div>
-
-          <div class="dishResult">
-            <div class="dishResultImageContainer">
-              <img class="dishResultImage" src="images/bakedbrie.jpg" alt="">
-            </div>
-            <div class="dishResultName">Baked Brie</div>
-          </div>
-          
-          <div class="dishResult">
-            <div class="dishResultImageContainer">
-              <img class="dishResultImage" src="images/bakedbrie.jpg" alt="">
-            </div>
-            <div class="dishResultName">Baked Brie</div>
-          </div>
-
-          <div class="dishResult">
-            <div class="dishResultImageContainer">
-              <img class="dishResultImage" src="images/bakedbrie.jpg" alt="">
-            </div>
-            <div class="dishResultName">Baked Brie</div>
-          </div>
-
-          <div class="dishResult">
-            <div class="dishResultImageContainer">
-              <img class="dishResultImage" src="images/bakedbrie.jpg" alt="">
-            </div>
-            <div class="dishResultName">Baked Brie</div>
-          </div>
-
-
-
-        </div>
-
-      </div>
-    </div>
-
-    </div>
-
-    <!-- jQuery -->
-    <!-- <script src="https://code.jquery.com/jquery.js"></script> -->
-    <!-- Bootstrap JavaScript, needed if you want for instance tabs, models, popovers etc. -->
-    <!-- <script src="http://netdna.bootstrapcdn.com/bootstrap/3.1.0/js/bootstrap.min.js"></script> -->
-
-    <!-- The application JavaScript code -->
-    <script src="js/lib/toggleSidebar.js"></script>
-    <script src="js/app.js"></script>
-    <script src="js/model/dinnerModel.js"></script>
-    <script src="js/view/exampleView.js"></script>
-    <!-- TODO: Here you should include JS code for your other views -->
-
-  </body>
-</html>
\ No newline at end of file
diff --git a/styles/confirm.css b/styles/confirm.css
deleted file mode 100644
index f82dcb794..000000000
--- a/styles/confirm.css
+++ /dev/null
@@ -1,125 +0,0 @@
-body {
-  margin: 0;
-}
-
-p {
-  margin: 0;
-}
-
-.primaryButton {
-  color: rgba(0, 0, 0, 1);
-  background-color: orange;
-  border: 0.1em solid black;
-  box-shadow: 0.1em 0.1em 0.1em black;
-  font-size: 1em;
-  padding: 0.5em;
-}
-
-.container {
-  text-align: center;
-  height: 100vh;
-  display: grid;
-  grid-template-rows: 6rem 2rem auto;
-  grid-template-areas:
-    "header"
-    "statusBar"
-    "menuSummary"
-    "printButtonContainer";
-}
-
-.verticallyCentered {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-}
-
-#header {
-  grid-area: header;
-  background-color: rgba(173, 173, 173, 1);
-}
-
-#statusBar {
-  grid-area: statusBar;
-  padding: 1.5rem 0rem;
-  border-bottom: 0.2rem solid black;
-}
-
-#statusTitle {
-  margin-right: auto;
-}
-
-#backButton {
-  margin-left: auto;
-}
-
-#menuSummary {
-  grid-area: menuSummary;
-  display: grid;
-  grid-gap: 3rem;
-  grid-template-areas: 
-    "starter mainCourse dessert totalPrice"
-}
-
-#starter {
-  grid-area: starter;
-}
-
-#mainCourse {
-  grid-area: mainCourse;
-}
-
-#dessert {
-  grid-area: dessert;
-}
-
-#totalPrice {
-  grid-area: totalPrice;
-  border-left: 0.2rem solid black;
-  padding: 0rem 1rem;
-}
-
-.dishItemContainer {
-  display: grid;
-  grid-template-rows: 140px repeat(2, auto);
-  grid-template-areas:
-    "dishImage"
-    "dishName"
-    "dishPrice";
-}
-
-.dishImage {
-  grid-area: dishImage;
-}
-
-.dishName {
-  grid-area: dishName;
-}
-
-.dishPrice {
-  grid-area: dishPrice;
-  margin-left: auto;
-}
-
-#printButtonContainer {
-  grid-area: printButtonContainer;
-  border-top: 0.2rem solid black;
-  padding: 2rem 0rem;
-  margin-bottom: 2rem;
-}
-
-@media (max-width: 700px) {
-  #menuSummary {
-    grid-template-areas:
-      "starter"
-      "mainCourse"
-      "dessert"
-      "totalPrice"
-  }
-
-  #totalPrice {
-    display: inline;
-    border-left: none;
-    border-top: 0.2rem solid black;
-    padding: 1rem 0rem;
-  }
-}
\ No newline at end of file
diff --git a/styles/dish.css b/styles/dish.css
deleted file mode 100644
index 62ec73bee..000000000
--- a/styles/dish.css
+++ /dev/null
@@ -1,303 +0,0 @@
-body {
-  margin: 0;
-}
-
-h4 {
-  margin: 0;
-}
-
-p {
-  margin: 0;
-}
-
-.showOnMobile {
-  display: none;
-}
-
-.hideOnMobile {
-  display: inline;
-}
-
-.left {
-  text-align: left;
-}
-
-.right {
-  text-align: right;
-}
-
-.primaryButton {
-  color: rgba(0, 0, 0, 1);
-  background-color: orange;
-  border: 0.1em solid black;
-  box-shadow: 0.1em 0.1em 0.1em black;
-  font-size: 1em;
-  padding: 0.5em;
-}
-
-.secondaryButton {
-  color: rgba(0, 0, 0, 1);
-  background-color: orange;
-  border: 0.1em solid black;
-  box-shadow: 0.1em 0.1em 0.1em black;
-  font-size: 0.7em;
-  padding: 0.5em;
-}
-
-.verticallyCentered {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-}
-
-.container {
-  text-align: center;
-  height: 100vh;
-  display: grid;
-  grid-template-columns: 12rem auto;
-  grid-template-rows: 6rem auto;
-  grid-template-areas:
-    "header     header"
-    "sidebar  content";
-}
-
-#header {
-  grid-area: header;
-  background-color: rgba(173, 173, 173, 1);
-}
-
-#sidebar {
-  grid-area: sidebar;
-  display: grid;
-  grid-template-rows: 2rem 1fr;
-  grid-template-areas: 
-    "titleBar"
-    "collapseContent";
-  
-  background-color: aqua;
-  text-align: left;
-}
-
-.collapseContent {
-  grid-area: collapseContent;
-  display: grid;
-  grid-template-rows: 2rem fit-content(100%) 3rem;
-  grid-template-areas: 
-    "guestSelector"
-    "dishTable"
-    "confirmButtonContainer";
-}
-
-#titleBar {
-  grid-area: titleBar;
-  display: flex;
-  justify-content: flex-end;
-}
-
-#titleBarTitle {
-  align-self: center;
-  margin-right: auto;
-}
-
-#collapsedMenuTotalPrice {
-  align-self: center;
-  justify-self: center;
-  margin-right: 1rem;
-}
-
-#guestSelector {
-  grid-area: guestSelector;
-}
-
-#dishTable {
-  grid-area: dishTable;
-  display: grid;
-  grid-template-areas:
-    "tableHeader"
-    "tableContent"
-    "tableFooter"
-}
-
-#tableHeader {
-  grid-area: tableHeader;
-  display: grid;
-  grid-template-areas:
-    "tableName tableCost";
-
-  background-color: gainsboro;
-  font-weight: bold;
-}
-
-#tableName {
-  grid-area: tableName;
-  text-align: left;
-}
-
-#tableCost {
-  grid-area: tableCost;
-  text-align: right;
-}
-
-#tableContent {
-  grid-area: tableContent;
-  display: grid;
-  grid-template-rows: auto;
-}
-
-.tableRow {
-  display: grid;
-  grid-template-areas:
-    "rowName rowCost";
-}
-
-.rowName {
-  grid-area: rowName;
-  text-align: left;
-}
-
-.rowCost {
-  grid-area: rowCost;
-  text-align: right;
-}
-
-#tableFooter {
-  grid-area: tableFooter;
-  display: flex;
-  align-items: baseline;
-  justify-content: flex-end;
-}
-
-#confirmButtonContainer {
-  grid-area: confirmButtonContainer;
-  text-align: center;
-}
-
-#content {
-  background-color: blanchedalmond;
-  grid-area: content;
-}
-
-#dishDetails {
-  display: grid;
-  grid-template-areas:
-    "dishDescription ingredientsList"
-    "dishPreparation dishPreparation";
-
-  text-align: left;
-}
-
-#dishDescription {
-  grid-area: dishDescription;
-}
-
-#ingredientsList {
-  grid-area: ingredientsList;
-  display: grid;
-  grid-template-rows: 4rem fit-content(100%) 4rem;
-  grid-template-areas: 
-    "ingredientsTitle"
-    "ingredientsTable"
-    "ingredientsFooter";
-
-  background-color: burlywood;
-  text-align: left;
-}
-
-#ingredientsTitle {
-  grid-area: ingredientsTitle;
-}
-
-#ingredientsTable {
-  grid-area: ingredientsTable;
-  display: grid;
-  grid-template-rows: auto;
-}
-
-.ingredientsTableRow {
-  display: grid;
-  grid-template-columns: repeat(4, 1fr);
-  grid-template-areas: 
-    "ingredientQuantity ingredientName ingredientCurrency ingredientPrice";
-  padding: 0.5rem 0;
-}
-
-.ingredientQuantity {
-  grid-area: ingredientQuantity;
-}
-
-.ingredientName {
-  grid-area: ingredientName;
-}
-
-.ingredientCurrency {
-  grid-area: ingredientCurrency;
-  text-align: right;
-}
-
-.ingredientPrice {
-  grid-area: ingredientPrice;
-  text-align: right;
-}
-
-#ingredientsFooter {
-  grid-area: ingredientsFooter;
-  display: grid;
-  grid-template-columns: repeat(4, 1fr);
-  grid-template-areas: 
-    "addToMenu addToMenu ingredientsTotalPriceCurrency ingredientsTotalPrice"
-}
-
-#addToMenu {
-  grid-area: addToMenu;
-  grid-column: span 2;
-}
-
-#ingredientsTotalPriceCurrency {
-  grid-area: ingredientsTotalPriceCurrency;
-  display: flex;
-  align-items: center;
-  justify-content: flex-end;
-}
-
-#ingredientsTotalPrice {
-  grid-area: ingredientsTotalPrice;
-  display: flex;
-  align-items: center;
-  justify-content: flex-end;
-}
-
-#dishPreparation {
-  grid-area: dishPreparation;
-}
-
-
-@media (min-width: 701px) {
-  #collapsedMenuTotalPrice {
-    display: none;
-  }
-}
-
-@media (max-width: 700px) {
-
-  .showOnMobile {
-    display: inline;
-  }
-
-  .hideOnMobile {
-    display: none;
-  }
-
-  .container {
-    grid-template-areas:
-      "header header"
-      "sidebar sidebar"
-      "content content"
-  }
-
-  #dishDetails {
-    grid-template-areas:
-      "dishDescription"
-      "ingredientsList"
-      "dishPreparation";
-  }
-}
\ No newline at end of file
diff --git a/styles/main.css b/styles/main.css
index 7fd5a1657..96481e266 100644
--- a/styles/main.css
+++ b/styles/main.css
@@ -435,6 +435,30 @@ p {
 }
 
 /* Recipe Summary View */
+#recipeSummaryView {
+  margin-top: 3rem;
+  grid-area: recipes;
+  display: grid;
+  grid-template-rows: auto;
+  text-align: left;
+}
+
+.recipe {
+  display: grid;
+  grid-gap: 2rem;
+  grid-template-columns: 140px 1fr 1fr;
+}
+
+.recipeImage {
+  align-self: baseline;
+  justify-self: center;
+  margin: 1.5rem 0;
+}
+
+.recipeTextbox {
+  display: grid;
+  grid-template-rows: 4rem auto;
+}
 
 @media (min-width: 701px) {
   #collapsedMenuTotalPrice {
@@ -482,6 +506,16 @@ p {
     border-top: 0.2rem solid black;
     padding: 1rem 0rem;
   }
+
+  #recipeSummaryView {
+    grid-gap: 2rem;
+  }
+
+  .recipe {
+    grid-gap: 0;
+    grid-template-columns: none;
+    grid-template-rows: repeat(3, auto);
+  }
 }
 
 @media (max-width: 520px) {
diff --git a/styles/printout.css b/styles/printout.css
deleted file mode 100644
index d26bfb626..000000000
--- a/styles/printout.css
+++ /dev/null
@@ -1,84 +0,0 @@
-body {
-  margin: 0;
-}
-
-p {
-  margin: 0;
-}
-
-.primaryButton {
-  color: rgba(0, 0, 0, 1);
-  background-color: orange;
-  border: 0.1em solid black;
-  box-shadow: 0.1em 0.1em 0.1em black;
-  font-size: 1em;
-  padding: 0.5em;
-}
-
-.container {
-  text-align: center;
-  height: 100vh;
-  display: grid;
-  grid-template-rows: 6rem 2rem auto;
-  grid-template-areas:
-    "header"
-    "statusBar"
-    "recipes"
-}
-
-.verticallyCentered {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-}
-
-#header {
-  grid-area: header;
-  background-color: rgba(173, 173, 173, 1);
-}
-
-#statusBar {
-  grid-area: statusBar;
-  padding: 1.5rem 0rem;
-  border-bottom: 0.2rem solid black;
-}
-
-#statusTitle {
-  margin-right: auto;
-}
-
-#backButton {
-  margin-left: auto;
-}
-
-#recipes {
-  margin-top: 3rem;
-  grid-area: recipes;
-  display: grid;
-  grid-template-rows: auto;
-  text-align: left;
-}
-
-.recipe {
-  display: grid;
-  grid-gap: 2rem;
-  grid-template-columns: 140px 1fr 1fr;
-}
-
-.recipeTextbox {
-  display: grid;
-  grid-template-rows: 4rem auto;
-}
-
-@media (max-width: 700px) {
-
-  #recipes {
-    grid-gap: 2rem;
-  }
-
-  .recipe {
-    grid-gap: 0;
-    grid-template-columns: none;
-    grid-template-rows: repeat(3, auto);
-  }
-}
\ No newline at end of file
diff --git a/styles/select.css b/styles/select.css
deleted file mode 100644
index 65ad53483..000000000
--- a/styles/select.css
+++ /dev/null
@@ -1,259 +0,0 @@
-body {
-  margin: 0;
-}
-
-h4 {
-  margin: 0;
-}
-
-p {
-  margin: 0;
-}
-
-.showOnMobile {
-  display: none;
-}
-
-.hideOnMobile {
-  display: inline;
-}
-
-.left {
-  text-align: left;
-}
-
-.right {
-  text-align: right;
-}
-
-.primaryButton {
-  color: rgba(0, 0, 0, 1);
-  background-color: orange;
-  border: 0.1em solid black;
-  box-shadow: 0.1em 0.1em 0.1em black;
-  font-size: 1em;
-  padding: 0.5em;
-}
-
-.secondaryButton {
-  color: rgba(0, 0, 0, 1);
-  background-color: orange;
-  border: 0.1em solid black;
-  box-shadow: 0.1em 0.1em 0.1em black;
-  font-size: 0.7em;
-  padding: 0.5em;
-}
-
-.verticallyCentered {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-}
-
-.container {
-  text-align: center;
-  height: 100vh;
-  display: grid;
-  grid-template-columns: 12rem auto;
-  grid-template-rows: 6rem auto;
-  grid-template-areas:
-    "header     header"
-    "sidebar  content";
-}
-
-#header {
-  grid-area: header;
-  background-color: rgba(173, 173, 173, 1);
-}
-
-#sidebar {
-  grid-area: sidebar;
-  display: grid;
-  grid-template-rows: 2rem 1fr;
-  grid-template-areas: 
-    "titleBar"
-    "collapseContent";
-  
-  background-color: aqua;
-  text-align: left;
-}
-
-.collapseContent {
-  grid-area: collapseContent;
-  display: grid;
-  grid-template-rows: 2rem fit-content(100%) 3rem;
-  grid-template-areas: 
-    "guestSelector"
-    "dishTable"
-    "confirmButtonContainer";
-}
-
-#titleBar {
-  grid-area: titleBar;
-  display: flex;
-  justify-content: flex-end;
-}
-
-#titleBarTitle {
-  align-self: center;
-  margin-right: auto;
-}
-
-#collapsedMenuTotalPrice {
-  align-self: center;
-  justify-self: center;
-  margin-right: 1rem;
-}
-
-#guestSelector {
-  grid-area: guestSelector;
-}
-
-#dishTable {
-  grid-area: dishTable;
-  display: grid;
-  grid-template-areas:
-    "tableHeader"
-    "tableContent"
-    "tableFooter"
-}
-
-#tableHeader {
-  grid-area: tableHeader;
-  display: grid;
-  grid-template-areas:
-    "tableName tableCost";
-
-  background-color: gainsboro;
-  font-weight: bold;
-}
-
-#tableName {
-  grid-area: tableName;
-  text-align: left;
-}
-
-#tableCost {
-  grid-area: tableCost;
-  text-align: right;
-}
-
-#tableContent {
-  grid-area: tableContent;
-  display: grid;
-  grid-template-rows: auto;
-}
-
-.tableRow {
-  display: grid;
-  grid-template-areas:
-    "rowName rowCost";
-}
-
-.rowName {
-  grid-area: rowName;
-  text-align: left;
-}
-
-.rowCost {
-  grid-area: rowCost;
-  text-align: right;
-}
-
-#tableFooter {
-  grid-area: tableFooter;
-  display: flex;
-  align-items: baseline;
-  justify-content: flex-end;
-}
-
-#confirmButtonContainer {
-  grid-area: confirmButtonContainer;
-  text-align: center;
-}
-
-#content {
-  background-color: blanchedalmond;
-  grid-area: content;
-}
-
-#dishSearch {
-  display: grid;
-  grid-template-areas:
-    "dishSearchTitle"
-    "dishSearchForm"
-    "dishSearchResults";
-  margin: 0rem 2rem;
-}
-
-#dishSearchTitle {
-  grid-area: dishSearchTitle;
-  align-self: center;
-  justify-self: flex-start;
-}
-
-#dishSearchForm {
-  grid-area: dishSearchForm;
-  align-self: center;
-  justify-self: center;
-  display: grid;
-  grid-template-columns: 1fr 1fr 1fr;
-  grid-template-areas:
-    "dishSearchField dishTypeSelectField dishSearchButton";
-}
-
-#dishSearchField {
-  grid-area: dishSearchField;
-}
-
-#dishTypeSelectField {
-  grid-area: dishTypeSelectField;
-}
-
-#dishSearchButton {
-  grid-area: dishSearchButton;
-}
-
-#dishSearchResults {
-  grid-area: dishSearchResults;
-  display: grid;
-  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
-  margin: 2rem 0rem;
-}
-
-
-@media (min-width: 701px) {
-  #collapsedMenuTotalPrice {
-    display: none;
-  }
-}
-
-@media (max-width: 700px) {
-
-  .showOnMobile {
-    display: inline;
-  }
-
-  .hideOnMobile {
-    display: none;
-  }
-
-  .container {
-    grid-template-areas:
-      "header header"
-      "sidebar sidebar"
-      "content content"
-  }
-}
-
-@media (max-width: 320px) {
-
-  #dishSearchForm {
-    grid-template-rows: 1fr 1fr 1fr;
-    grid-template-columns: none;
-    grid-template-areas:
-      "dishSearchField"
-      "dishTypeSelectField"
-      "dishSearchButton";
-  }
-}
\ No newline at end of file

From 8e2811ce6c9a88c4a5148baef570cdafb5bfbdd4 Mon Sep 17 00:00:00 2001
From: Andrew Szucs <andrew0szucs@gmail.com>
Date: Tue, 23 Jan 2018 15:23:16 +0100
Subject: [PATCH 15/45] Add methods to display/hide view elements, connect them
 to buttons

---
 js/app.js         |  5 +++++
 js/lib/routing.js | 38 ++++++++++++++++++++++++++++++++++++++
 2 files changed, 43 insertions(+)
 create mode 100644 js/lib/routing.js

diff --git a/js/app.js b/js/app.js
index 0eefddeb0..3cb6b7530 100644
--- a/js/app.js
+++ b/js/app.js
@@ -38,6 +38,11 @@
 	// 	model
 	// )
 
+	document.getElementById('startButton').onclick = transitionFromMainViewToDishSearchView
+  document.getElementById('confirmMenuButton').onclick = transitionFromDishSearchViewToPriceSummaryView
+  document.getElementById('backToDishSearchButton').onclick = transitionFromPriceSummaryViewToDishSearchView
+  document.getElementById('printButton').onclick = transitionFromPriceSummaryViewToRecipeSummaryView
+
 	/**
 	 * IMPORTANT: app.js is the only place where you are allowed to
 	 * use the $('someSelector') to search for elements in the whole HTML.
diff --git a/js/lib/routing.js b/js/lib/routing.js
new file mode 100644
index 000000000..1ff0d528e
--- /dev/null
+++ b/js/lib/routing.js
@@ -0,0 +1,38 @@
+const mainViewElement = document.getElementById('mainView')
+const appViewElement = document.getElementById('appView')
+const dishSearchElement = document.getElementById('dishSearchView')
+const dishDetailsElement = document.getElementById('dishDetailsView')
+const menuSummaryElement = document.getElementById('menuSummaryView')
+const priceSummaryElement = document.getElementById('priceSummary')
+const recipeSummaryElement = document.getElementById('recipeSummaryView')
+
+appViewElement.style.display = 'none'
+dishSearchElement.style.display = 'none'
+dishDetailsElement.style.display = 'none'
+menuSummaryElement.style.display = 'none'
+priceSummaryElement.style.display = 'none'
+recipeSummaryElement.style.display = 'none'
+
+const transitionFromMainViewToDishSearchView = () => {
+  mainViewElement.style.display = 'none'
+  appViewElement.style = ''
+  dishSearchElement.style = ''
+}
+
+const transitionFromDishSearchViewToPriceSummaryView = () => {
+  appViewElement.style.display = 'none'
+  dishSearchElement.style.display = 'none'
+  menuSummaryElement.style = ''
+  priceSummaryElement.style = ''
+}
+
+const transitionFromPriceSummaryViewToDishSearchView = () => {
+  menuSummaryElement.style.display = 'none'
+  appViewElement.style = ''
+  dishSearchElement.style = ''
+}
+
+const transitionFromPriceSummaryViewToRecipeSummaryView = () => {
+  priceSummaryElement.style.display = 'none'
+  recipeSummaryElement.style = ''
+}
\ No newline at end of file

From 8b0e61efe20e82fda6c9f635ef6748bdd12f4372 Mon Sep 17 00:00:00 2001
From: Andrew Szucs <andrew0szucs@gmail.com>
Date: Tue, 23 Jan 2018 15:24:28 +0100
Subject: [PATCH 16/45] Connect the initial dish search results to the model

---
 index.html                | 66 ++++++++++-----------------------------
 js/view/DishSearchView.js | 28 +++++++++++++++++
 2 files changed, 44 insertions(+), 50 deletions(-)

diff --git a/index.html b/index.html
index 283e9a6a7..41fb1c6ee 100644
--- a/index.html
+++ b/index.html
@@ -19,12 +19,12 @@ <h1>Dinner Planner</h1>
       
       <div id="content">
         
-        <!-- <div id="mainView">
+        <div id="mainView">
           <div id="welcomeText">
             Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
           </div>
           <button id="startButton" class="primaryButton">Create new dinner</button>
-        </div> -->
+        </div>
 
         <div id="appView">
           
@@ -96,46 +96,11 @@ <h2 id="dishSearchTitle">Find a dish</h2>
       
               <div id="dishSearchResults">
       
-                <div class="dishResult">
-                  <div class="dishResultImageContainer">
-                    <img class="dishResultImage" src="images/bakedbrie.jpg" alt="">
-                  </div>
-                  <div class="dishResultName">Baked Brie</div>
-                </div>
-      
-                <div class="dishResult">
-                  <div class="dishResultImageContainer">
-                    <img class="dishResultImage" src="images/bakedbrie.jpg" alt="">
-                  </div>
-                  <div class="dishResultName">Baked Brie</div>
-                </div>
-                
-                <div class="dishResult">
-                  <div class="dishResultImageContainer">
-                    <img class="dishResultImage" src="images/bakedbrie.jpg" alt="">
-                  </div>
-                  <div class="dishResultName">Baked Brie</div>
-                </div>
-      
-                <div class="dishResult">
-                  <div class="dishResultImageContainer">
-                    <img class="dishResultImage" src="images/bakedbrie.jpg" alt="">
-                  </div>
-                  <div class="dishResultName">Baked Brie</div>
-                </div>
-      
-                <div class="dishResult">
-                  <div class="dishResultImageContainer">
-                    <img class="dishResultImage" src="images/bakedbrie.jpg" alt="">
-                  </div>
-                  <div class="dishResultName">Baked Brie</div>
-                </div>  
-      
               </div>
   
             </div>
 
-            <!-- <div id="dishDetailsView">
+            <div id="dishDetailsView">
               <div id="dishDescription">
                 <div id="dishTitle">
                   <h2>Baked Brie</h2>
@@ -194,22 +159,22 @@ <h3>Preparation</h3>
                 </div>
               </div>
     
-            </div> -->
+            </div>
 
           </div>
 
         </div>
 
-        <!-- <div id="menuSummaryView"> -->
+        <div id="menuSummaryView">
               
-          <!-- <div id="statusBar" class="">
+          <div id="statusBar" class="">
             <h2 id="statusTitle">My Dinner: <span id="numberOfGuests">3</span> people</h2>
-            <button id="backButton" class="primaryButton" >Go back and edit dinner</button>
-          </div> -->
+            <button id="backToDishSearchButton" class="primaryButton" >Go back and edit dinner</button>
+          </div>
 
-          <!-- <div id="summaryView"> -->
+          <div id="summaryView">
 
-            <!-- <div id="priceSummary">
+            <div id="priceSummary">
 
               <div id="dishListContainer">
 
@@ -257,9 +222,9 @@ <h2 id="statusTitle">My Dinner: <span id="numberOfGuests">3</span> people</h2>
                 <button id="printButton" class="primaryButton">Print Full Recipe</button>
               </div>
 
-            </div> -->
+            </div>
 
-            <!-- <div id="recipeSummaryView">
+            <div id="recipeSummaryView">
               <div class="recipe">
                 <div class="recipeImage">
                   <img src="images/bakedbrie.jpg" alt="">
@@ -319,11 +284,11 @@ <h3 class="recipePreparationTitle">Preparation</h3>
                 </div>
               </div>
 
-            </div> -->
+            </div>
 
-          <!-- </div> -->
+          </div>
 
-        <!-- </div> -->
+        </div>
         
       </div>
 
@@ -331,6 +296,7 @@ <h3 class="recipePreparationTitle">Preparation</h3>
 
     <script src="js/lib/toggleSidebar.js"></script>
     <!-- Here you should include JS code for your other views -->
+    <script src="js/lib/routing.js"></script>
     <script src="js/view/SidebarView.js"></script>
     <script src="js/view/DishSearchView.js"></script>
     <script src="js/model/dinnerModel.js"></script>
diff --git a/js/view/DishSearchView.js b/js/view/DishSearchView.js
index 7d61cf64b..6763d8cbf 100644
--- a/js/view/DishSearchView.js
+++ b/js/view/DishSearchView.js
@@ -7,4 +7,32 @@
 
 const createDishSearchView = (container, model) => {
   
+  const dishSearchResultsElement = container.querySelector('#dishSearchResults')
+
+  const createDishResultElement = (imageUrl, name) => {
+    const dishResultElement = document.createElement('div')
+    dishResultElement.classList.add('dishResult')
+
+    const dishResultImageContainerElement = document.createElement('div')
+    dishResultImageContainerElement.classList.add('dishResultImageContainer')
+
+    const dishResultImageElement = document.createElement('img')
+    dishResultImageElement.classList.add('dishResultImage')
+    dishResultImageElement.src = imageUrl
+
+    const dishResultNameElement = document.createElement('div')
+    dishResultNameElement.innerHTML = name
+
+    dishResultImageContainerElement.appendChild(dishResultImageElement)
+    dishResultElement.appendChild(dishResultImageContainerElement)
+    dishResultElement.appendChild(dishResultNameElement)
+
+    return dishResultElement;
+  }
+
+  model.getAllDishes('all').map(({image, name}) => {
+    dishSearchResultsElement.appendChild(createDishResultElement(`images/${image}`, name))
+  })
+
+
 }
\ No newline at end of file

From 03e9b81fea6de0c44c39df3fd47cce0429c68d90 Mon Sep 17 00:00:00 2001
From: Andrew Szucs <andrew0szucs@gmail.com>
Date: Tue, 23 Jan 2018 15:32:07 +0100
Subject: [PATCH 17/45] Added a demo link to README.md

---
 README.md | 11 ++---------
 1 file changed, 2 insertions(+), 9 deletions(-)

diff --git a/README.md b/README.md
index 9cab5647f..955b3bb4e 100644
--- a/README.md
+++ b/README.md
@@ -1,13 +1,6 @@
 Interaction Programing - Lab assignment - HTML
 =================================================
 
-This project contains the startup code for HTML version of the Interaction Programing course lab assignment. For more details on how to complete the assignment follow the instructions on the [course website](https://www.kth.se/social/course/DH2642).
+This project contains the solution for the Interaction Programing course lab assignment. For more details on the assignment check the [course website](https://www.kth.se/social/course/DH2642).
 
-What's in the project
------
-
-* [index.html](https://github.com/kth-csc-iprog/dinnerplanner-html/blob/master/index.html) - the only HTML page you will have in this project (though while testing you can create more to make it easier). You will need to implement the skeleton of the layout there and then through code (JavaScript) create the rest
-* [js/model/dinnerModel.js](https://github.com/kth-csc-iprog/dinnerplanner-html/blob/master/js/model/dinnerModel.js) - is JavaScript file that contains the model code. The file contains the model (dish, ingredient and general dinner model) as well as methods and comments that you need to fully implement to support the dinner functionalities (guests, selected dishes, etc.)
-* [js/view/](https://github.com/kth-csc-iprog/dinnerplanner-html/tree/master/js/view) - here you can find a JavaScript code of an example view. The view sets up some initial components and their values.
-* [js/app.js](https://github.com/kth-csc-iprog/dinnerplanner-html/blob/master/js/app.js) - this is the overall code of the application. It is responsible for initial setup of the app (when the page loads for the first time). 
-* [images/](https://github.com/kth-csc-iprog/dinnerplanner-html/tree/master/images) - folder contains some pictures you can use for your dishes
+You can see the demo [here](https://andrewszucs.github.io/dinnerplanner-html/).

From 0c1da5060d2402c3517aacb24964977899ea36b3 Mon Sep 17 00:00:00 2001
From: Andrew Szucs <andrew0szucs@gmail.com>
Date: Tue, 23 Jan 2018 20:05:05 +0100
Subject: [PATCH 18/45] Add methods to display/hide the Dish Details View and
 connect them to the dish results

---
 index.html        |  4 ++--
 js/app.js         |  9 +++++++--
 js/lib/routing.js | 13 ++++++++++++-
 3 files changed, 21 insertions(+), 5 deletions(-)

diff --git a/index.html b/index.html
index 41fb1c6ee..18e84a471 100644
--- a/index.html
+++ b/index.html
@@ -111,7 +111,7 @@ <h2>Baked Brie</h2>
                 <div id="dishDescription">
                   <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Eget aliquet nibh praesent tristique. Quis hendrerit dolor magna eget. In cursus turpis massa tincidunt dui ut ornare.</p>
                 </div>
-                <button id="backButton" class="primaryButton">Back to Search</button>
+                <button id="backFromDishDetailsButton" class="backButton primaryButton">Back to Search</button>
               </div>
               
               <div id="ingredientsList">
@@ -169,7 +169,7 @@ <h3>Preparation</h3>
               
           <div id="statusBar" class="">
             <h2 id="statusTitle">My Dinner: <span id="numberOfGuests">3</span> people</h2>
-            <button id="backToDishSearchButton" class="primaryButton" >Go back and edit dinner</button>
+            <button id="backFromMenuSummaryButton" class="backButton primaryButton" >Go back and edit dinner</button>
           </div>
 
           <div id="summaryView">
diff --git a/js/app.js b/js/app.js
index 3cb6b7530..2a04d3e8b 100644
--- a/js/app.js
+++ b/js/app.js
@@ -40,8 +40,13 @@
 
 	document.getElementById('startButton').onclick = transitionFromMainViewToDishSearchView
   document.getElementById('confirmMenuButton').onclick = transitionFromDishSearchViewToPriceSummaryView
-  document.getElementById('backToDishSearchButton').onclick = transitionFromPriceSummaryViewToDishSearchView
-  document.getElementById('printButton').onclick = transitionFromPriceSummaryViewToRecipeSummaryView
+  document.getElementById('backFromMenuSummaryButton').onclick = transitionFromPriceSummaryViewToDishSearchView
+  document.getElementById('backFromDishDetailsButton').onclick = transitionFromDishDetailsViewToDishSearchView
+	document.getElementById('printButton').onclick = transitionFromPriceSummaryViewToRecipeSummaryView
+	const dishResults = document.getElementsByClassName('dishResult')
+	for (const dishResult of dishResults) {
+		dishResult.onclick = transitionFromDishSearchViewToDishDetailsView
+	}
 
 	/**
 	 * IMPORTANT: app.js is the only place where you are allowed to
diff --git a/js/lib/routing.js b/js/lib/routing.js
index 1ff0d528e..a38997a15 100644
--- a/js/lib/routing.js
+++ b/js/lib/routing.js
@@ -19,9 +19,20 @@ const transitionFromMainViewToDishSearchView = () => {
   dishSearchElement.style = ''
 }
 
+const transitionFromDishSearchViewToDishDetailsView = () => {
+  dishSearchElement.style.display = 'none'
+  dishDetailsElement.style = ''
+}
+
+const transitionFromDishDetailsViewToDishSearchView = () => {
+  dishDetailsElement.style.display = 'none'
+  dishSearchElement.style = ''
+}
+
 const transitionFromDishSearchViewToPriceSummaryView = () => {
   appViewElement.style.display = 'none'
   dishSearchElement.style.display = 'none'
+  dishDetailsElement.style.display = 'none'
   menuSummaryElement.style = ''
   priceSummaryElement.style = ''
 }
@@ -35,4 +46,4 @@ const transitionFromPriceSummaryViewToDishSearchView = () => {
 const transitionFromPriceSummaryViewToRecipeSummaryView = () => {
   priceSummaryElement.style.display = 'none'
   recipeSummaryElement.style = ''
-}
\ No newline at end of file
+}

From 4766b8ce337643dcf94438df3a97be484ec4cd0a Mon Sep 17 00:00:00 2001
From: Andrew Szucs <andrew0szucs@gmail.com>
Date: Thu, 25 Jan 2018 14:29:44 +0100
Subject: [PATCH 19/45] Create PriceSummaryView, StatusBarView. Fix bug when
 going back from recipe summary (not hiding it).

---
 index.html                  |  2 ++
 js/app.js                   | 16 ++++++++--------
 js/lib/routing.js           |  2 ++
 js/model/dinnerModel.js     |  5 ++---
 js/view/PriceSummaryView.js | 10 ++++++++++
 js/view/StatusBarView.js    | 10 ++++++++++
 styles/main.css             |  4 +++-
 7 files changed, 37 insertions(+), 12 deletions(-)
 create mode 100644 js/view/PriceSummaryView.js
 create mode 100644 js/view/StatusBarView.js

diff --git a/index.html b/index.html
index 18e84a471..6d31cdda8 100644
--- a/index.html
+++ b/index.html
@@ -298,6 +298,8 @@ <h3 class="recipePreparationTitle">Preparation</h3>
     <!-- Here you should include JS code for your other views -->
     <script src="js/lib/routing.js"></script>
     <script src="js/view/SidebarView.js"></script>
+    <script src="js/view/StatusBarView.js"></script>
+    <script src="js/view/PriceSummaryView.js"></script>
     <script src="js/view/DishSearchView.js"></script>
     <script src="js/model/dinnerModel.js"></script>
     <!-- The application JavaScript code -->
diff --git a/js/app.js b/js/app.js
index 2a04d3e8b..16b0a459f 100644
--- a/js/app.js
+++ b/js/app.js
@@ -23,15 +23,15 @@
 	// 	model
 	// )
 	
-	// const statusBarView = createStatusBarView(
-	// 	document.getElementById('statusBar'),
-	// 	model
-	// )
+	const statusBarView = createStatusBarView(
+		document.getElementById('statusBar'),
+		model
+	)
 
-	// const priceSummaryView = createPriceSummaryView(
-	// 	document.getElementById('priceSummary'),
-	// 	model
-	// )
+	const priceSummaryView = createPriceSummaryView(
+		document.getElementById('priceSummary'),
+		model
+	)
 
 	// const recipeSummaryView = createRecipeSummaryView(
 	// 	document.getElementById('recipeSummaryView'),
diff --git a/js/lib/routing.js b/js/lib/routing.js
index a38997a15..d1ab317f8 100644
--- a/js/lib/routing.js
+++ b/js/lib/routing.js
@@ -35,10 +35,12 @@ const transitionFromDishSearchViewToPriceSummaryView = () => {
   dishDetailsElement.style.display = 'none'
   menuSummaryElement.style = ''
   priceSummaryElement.style = ''
+  recipeSummaryElement.style.display = 'none'
 }
 
 const transitionFromPriceSummaryViewToDishSearchView = () => {
   menuSummaryElement.style.display = 'none'
+  recipeSummaryElement.style.display = 'none'
   appViewElement.style = ''
   dishSearchElement.style = ''
 }
diff --git a/js/model/dinnerModel.js b/js/model/dinnerModel.js
index 8d6e3cbc1..6f9174e8e 100644
--- a/js/model/dinnerModel.js
+++ b/js/model/dinnerModel.js
@@ -1,4 +1,4 @@
-//DinnerModel Object constructor
+//DinnerModel Object factory function
 const createDinnerModel = () => {
 	
 	// the data structure that will hold number of guest
@@ -40,9 +40,8 @@ const createDinnerModel = () => {
 
 	// Removes dish from menu
 	const removeDishFromMenu = id => {
-		const newMenu = menu.filter(dish => dish.id !== id)
+		const newMenu = state.menu.filter(dish => dish.id !== id)
 		state.menu = newMenu
-		return newMenu
 	}
 
 	// function that returns all dishes of specific type (i.e. "starter", "main dish" or "dessert")
diff --git a/js/view/PriceSummaryView.js b/js/view/PriceSummaryView.js
new file mode 100644
index 000000000..9e1e01df4
--- /dev/null
+++ b/js/view/PriceSummaryView.js
@@ -0,0 +1,10 @@
+/*
+  * Price Summary View Object factory function
+
+  * @param {HTML DOM element} container - references the HTML parent element that contains the view.
+  * @param {Object} model - the reference to the Dinner Model
+*/
+
+const createPriceSummaryView = (container, model) => {
+
+}
\ No newline at end of file
diff --git a/js/view/StatusBarView.js b/js/view/StatusBarView.js
new file mode 100644
index 000000000..87ebfaebf
--- /dev/null
+++ b/js/view/StatusBarView.js
@@ -0,0 +1,10 @@
+/*
+  * Status Bar View Object factory function
+
+  * @param {HTML DOM element} container - references the HTML parent element that contains the view.
+  * @param {Object} model - the reference to the Dinner Model
+*/
+
+const createStatusBarView = (container, model) => {
+  container.querySelector('#numberOfGuests').innerHTML = model.getNumberOfGuests()
+}
\ No newline at end of file
diff --git a/styles/main.css b/styles/main.css
index 96481e266..cad78458a 100644
--- a/styles/main.css
+++ b/styles/main.css
@@ -480,7 +480,9 @@ p {
   }
 
   #appView {
-    grid-template-areas: "sidebarView" "sectionView";
+    grid-template-areas: 
+      "sidebarView" 
+      "sectionView";
     grid-template-columns: none;
   }
 

From 21526ae67839ecc7020098964c41ef09a97d5f92 Mon Sep 17 00:00:00 2001
From: Andrew Szucs <andrew0szucs@gmail.com>
Date: Thu, 8 Feb 2018 00:04:19 +0100
Subject: [PATCH 20/45] Add individual Views and Controllers. Complete Sidebar
 and Dish Search features.

---
 index.html                                |  43 +++++----
 js/app.js                                 | 104 ++++++++++++++++------
 js/controllers/DishDetailsController.js   |   3 +
 js/controllers/DishSearchController.js    |   3 +
 js/controllers/PriceSummaryController.js  |   3 +
 js/controllers/RecipeSummaryController.js |   3 +
 js/controllers/SidebarController.js       |   9 ++
 js/controllers/StatusBarController.js     |   3 +
 js/lib/routing.js                         |  51 -----------
 js/model/dinnerModel.js                   |  52 ++++++++---
 js/view/DishDetailsView.js                |  35 ++++++++
 js/view/DishResultView.js                 |  58 ++++++++++++
 js/view/DishSearchView.js                 |  76 ++++++++++++----
 js/view/MainView.js                       |  35 ++++++++
 js/view/PriceSummaryView.js               |  34 +++++++
 js/view/RecipeSummaryView.js              |  32 +++++++
 js/view/SidebarView.js                    |  92 ++++++++++++++-----
 js/view/StatusBarView.js                  |  38 +++++++-
 js/view/exampleView.js                    |  58 ------------
 19 files changed, 532 insertions(+), 200 deletions(-)
 create mode 100644 js/controllers/DishDetailsController.js
 create mode 100644 js/controllers/DishSearchController.js
 create mode 100644 js/controllers/PriceSummaryController.js
 create mode 100644 js/controllers/RecipeSummaryController.js
 create mode 100644 js/controllers/SidebarController.js
 create mode 100644 js/controllers/StatusBarController.js
 delete mode 100644 js/lib/routing.js
 create mode 100644 js/view/DishDetailsView.js
 create mode 100644 js/view/DishResultView.js
 create mode 100644 js/view/MainView.js
 create mode 100644 js/view/RecipeSummaryView.js
 delete mode 100644 js/view/exampleView.js

diff --git a/index.html b/index.html
index 6d31cdda8..6fedc8867 100644
--- a/index.html
+++ b/index.html
@@ -52,10 +52,7 @@ <h4 id="titleBarTitle">My Dinner</h4>
                 </div>
       
                 <div id="tableContent">
-                  <div class="tableRow">
-                    <div class="rowName">Lasagne</div>
-                    <div class="rowCost">77.20</div>
-                  </div>
+                  
                 </div>
       
                 <div id="tableFooter">
@@ -95,7 +92,7 @@ <h2 id="dishSearchTitle">Find a dish</h2>
               </div>
       
               <div id="dishSearchResults">
-      
+                
               </div>
   
             </div>
@@ -167,7 +164,7 @@ <h3>Preparation</h3>
 
         <div id="menuSummaryView">
               
-          <div id="statusBar" class="">
+          <div id="statusBar">
             <h2 id="statusTitle">My Dinner: <span id="numberOfGuests">3</span> people</h2>
             <button id="backFromMenuSummaryButton" class="backButton primaryButton" >Go back and edit dinner</button>
           </div>
@@ -179,40 +176,41 @@ <h2 id="statusTitle">My Dinner: <span id="numberOfGuests">3</span> people</h2>
               <div id="dishListContainer">
 
                 <div id="starter" class="dishItemContainer">
-                  <div class="verticallyCentered dishImage">
+                  <!-- <div class="verticallyCentered dishImage">
                     <img src="images/bakedbrie.jpg" alt="">
                   </div>
                   <p class="dishName">Baked Brie</p>
                   <p class="dishPrice">
                     <span class="value">77.20</span> <span class="currency">SEK</span>
-                  </p>
+                  </p> -->
                 </div>
         
                 <div id="mainCourse" class="dishItemContainer">
-                  <div class="verticallyCentered dishImage">
+                  <!-- <div class="verticallyCentered dishImage">
                     <img src="images/icecream.jpg" alt="">
                   </div>
                   <p class="dishName">Ice Cream</p>
                   <p class="dishPrice">
                     <span class="value">77.20</span> <span class="currency">SEK</span>
-                  </p>
+                  </p> -->
                 </div>
         
                 <div id="dessert" class="dishItemContainer">
-                  <div class="verticallyCentered dishImage">
+                  <!-- <div class="verticallyCentered dishImage">
                     <img src="images/meatballs.jpg" alt="">
                   </div>
                   <p class="dishName">Meatballs</p>
                   <p class="dishPrice">
                     <span class="value">77.20</span> <span class="currency">SEK</span>
-                  </p>
+                  </p> -->
                 </div>
         
                 <div id="totalPrice" class="dishItemContainer">
                   <div class="verticallyCentered dishImage"></div>
                   <p class="dishName">Total:</p>
                   <p class="dishPrice">
-                    <span class="value">77.20</span> <span class="currency">SEK</span>
+                    <span class="value" id="dishPriceValue">0.00</span> 
+                    <span class="currency">SEK</span>
                   </p>
                 </div>
 
@@ -296,11 +294,26 @@ <h3 class="recipePreparationTitle">Preparation</h3>
 
     <script src="js/lib/toggleSidebar.js"></script>
     <!-- Here you should include JS code for your other views -->
-    <script src="js/lib/routing.js"></script>
+    <script src="js/view/MainView.js"></script>
+
     <script src="js/view/SidebarView.js"></script>
+    <script src="js/controllers/SidebarController.js"></script>
+
+    <script src="js/view/DishSearchView.js"></script>
+    <script src="js/controllers/DishSearchController.js"></script>
+
+    <script src="js/view/DishDetailsView.js"></script>
+    <script src="js/controllers/DishDetailsController.js"></script>
+    
     <script src="js/view/StatusBarView.js"></script>
+    <script src="js/controllers/StatusBarController.js"></script>
+
     <script src="js/view/PriceSummaryView.js"></script>
-    <script src="js/view/DishSearchView.js"></script>
+    <script src="js/controllers/PriceSummaryController.js"></script>
+    
+    <script src="js/view/RecipeSummaryView.js"></script>
+    <script src="js/controllers/RecipeSummaryController.js"></script>
+
     <script src="js/model/dinnerModel.js"></script>
     <!-- The application JavaScript code -->
     <script src="js/app.js"></script>
diff --git a/js/app.js b/js/app.js
index 16b0a459f..8f865dfe4 100644
--- a/js/app.js
+++ b/js/app.js
@@ -1,58 +1,110 @@
 (function () {
-	//We instantiate our model
+	
+	// Model
 	const model = createDinnerModel()
+	model.addDishToMenu(1)
+
+	// Views + Controllers
+	const mainView = createMainView(
+		document.getElementById('mainView'),
+		model
+	)
 
-	// Create the instances of the Views
 	const sidebarView = createSidebarView(
 		document.getElementById('sidebarView'),
 		model
 	)
-
-	// const welcomeView = createWelcomeView(
-	// 	document.getElementById('mainView'),
-	// 	model
-	// )
+	const sidebarController = createSidebarController(sidebarView, model)
 	
 	const dishSearchView = createDishSearchView(
 		document.getElementById('dishSearchView'),
 		model
 	)
+	const dishSearchController = createDishSearchController(dishSearchView, model)
 
-	// const dishDetailsView = createDishDetailsView(
-	// 	document.getElementById('dishDetailsView'),
-	// 	model
-	// )
+	const dishDetailsView = createDishDetailsView(
+		document.getElementById('dishDetailsView'),
+		model
+	)
+	const dishDetailsController = createDishDetailsController(dishDetailsView, model)
 	
 	const statusBarView = createStatusBarView(
 		document.getElementById('statusBar'),
 		model
 	)
+	const statusBarController = createStatusBarController(statusBarView, model)
 
 	const priceSummaryView = createPriceSummaryView(
 		document.getElementById('priceSummary'),
 		model
 	)
+	const priceSummaryController = createPriceSummaryController(priceSummaryView, model)
+
+	const recipeSummaryView = createRecipeSummaryView(
+		document.getElementById('recipeSummaryView'),
+		model
+	)
+	const recipeSummaryController = createRecipeSummaryController(recipeSummaryView, model)
+
+	// General State Controller
+	const transitionFromMainViewToDishSearchView = () => {
+		mainView.hide()
+		sidebarView.show()
+		dishSearchView.show()
+	}
+
+	const transitionFromDishSearchViewToDishDetailsView = () => {
+		dishSearchView.hide()
+		dishDetailsView.show()
+	}
+
+	const transitionFromDishDetailsViewToDishSearchView = () => {
+		dishDetailsView.hide()
+		dishSearchView.show()
+	}
+
+	const transitionFromDishSearchViewToPriceSummaryView = () => {
+		sidebarView.hide()
+		dishSearchView.hide()
+		dishDetailsView.hide()
+
+		statusBarView.show()
+		priceSummaryView.show()
+		recipeSummaryView.hide()
+	}
+
+	const transitionFromPriceSummaryViewToDishSearchView = () => {
+		statusBarView.hide()
+		priceSummaryView.hide()
+		recipeSummaryView.hide()
+
+		sidebarView.show()
+		dishSearchView.show()
+		dishDetailsView.hide()
+	}
+
+	const transitionFromPriceSummaryViewToRecipeSummaryView = () => {
+		priceSummaryView.hide()
+		recipeSummaryView.show()
+	}
 
-	// const recipeSummaryView = createRecipeSummaryView(
-	// 	document.getElementById('recipeSummaryView'),
-	// 	model
-	// )
+	mainView.startButton.onclick = transitionFromMainViewToDishSearchView
+	sidebarView.confirmMenuButton.onclick = transitionFromDishSearchViewToPriceSummaryView
+	statusBarView.backFromMenuSummaryButton.onclick = transitionFromPriceSummaryViewToDishSearchView
+	dishDetailsView.backFromDishDetailsButton.onclick = transitionFromDishDetailsViewToDishSearchView
+	priceSummaryView.printButton.onclick = transitionFromPriceSummaryViewToRecipeSummaryView
 
-	document.getElementById('startButton').onclick = transitionFromMainViewToDishSearchView
-  document.getElementById('confirmMenuButton').onclick = transitionFromDishSearchViewToPriceSummaryView
-  document.getElementById('backFromMenuSummaryButton').onclick = transitionFromPriceSummaryViewToDishSearchView
-  document.getElementById('backFromDishDetailsButton').onclick = transitionFromDishDetailsViewToDishSearchView
-	document.getElementById('printButton').onclick = transitionFromPriceSummaryViewToRecipeSummaryView
 	const dishResults = document.getElementsByClassName('dishResult')
 	for (const dishResult of dishResults) {
 		dishResult.onclick = transitionFromDishSearchViewToDishDetailsView
 	}
 
-	/**
-	 * IMPORTANT: app.js is the only place where you are allowed to
-	 * use the $('someSelector') to search for elements in the whole HTML.
-	 * In other places you should limit the search only to the children 
-	 * of the specific view you're working with (see exampleView.js).
-	 */
+	mainView.show()
+	sidebarView.hide()
+	dishSearchView.hide()
+	dishDetailsView.hide()
+	statusBarView.hide()
+	priceSummaryView.hide()
+	recipeSummaryView.hide()
 
 })()
\ No newline at end of file
diff --git a/js/controllers/DishDetailsController.js b/js/controllers/DishDetailsController.js
new file mode 100644
index 000000000..af1bcce0a
--- /dev/null
+++ b/js/controllers/DishDetailsController.js
@@ -0,0 +1,3 @@
+const createDishDetailsController = (view, model) => {
+  
+}
\ No newline at end of file
diff --git a/js/controllers/DishSearchController.js b/js/controllers/DishSearchController.js
new file mode 100644
index 000000000..557f8bfdd
--- /dev/null
+++ b/js/controllers/DishSearchController.js
@@ -0,0 +1,3 @@
+const createDishSearchController = (view, model) => {
+  view.dishSearchButton.onclick = view.render
+}
\ No newline at end of file
diff --git a/js/controllers/PriceSummaryController.js b/js/controllers/PriceSummaryController.js
new file mode 100644
index 000000000..20bcab4d4
--- /dev/null
+++ b/js/controllers/PriceSummaryController.js
@@ -0,0 +1,3 @@
+const createPriceSummaryController = (view, model) => {
+  
+}
\ No newline at end of file
diff --git a/js/controllers/RecipeSummaryController.js b/js/controllers/RecipeSummaryController.js
new file mode 100644
index 000000000..ab2dd6aa2
--- /dev/null
+++ b/js/controllers/RecipeSummaryController.js
@@ -0,0 +1,3 @@
+const createRecipeSummaryController = (view, model) => {
+  
+}
\ No newline at end of file
diff --git a/js/controllers/SidebarController.js b/js/controllers/SidebarController.js
new file mode 100644
index 000000000..662a5703b
--- /dev/null
+++ b/js/controllers/SidebarController.js
@@ -0,0 +1,9 @@
+const createSidebarController = (view, model) => {
+
+  view.guestNumber.oninput = (event) => {
+    const newGuestNumber = event.target.value
+    model.setNumberOfGuests(newGuestNumber)
+    console.log('Guest number is: ', model.getNumberOfGuests())
+  }
+  
+}
\ No newline at end of file
diff --git a/js/controllers/StatusBarController.js b/js/controllers/StatusBarController.js
new file mode 100644
index 000000000..cb9120674
--- /dev/null
+++ b/js/controllers/StatusBarController.js
@@ -0,0 +1,3 @@
+const createStatusBarController = (view, model) => {
+  
+}
\ No newline at end of file
diff --git a/js/lib/routing.js b/js/lib/routing.js
deleted file mode 100644
index d1ab317f8..000000000
--- a/js/lib/routing.js
+++ /dev/null
@@ -1,51 +0,0 @@
-const mainViewElement = document.getElementById('mainView')
-const appViewElement = document.getElementById('appView')
-const dishSearchElement = document.getElementById('dishSearchView')
-const dishDetailsElement = document.getElementById('dishDetailsView')
-const menuSummaryElement = document.getElementById('menuSummaryView')
-const priceSummaryElement = document.getElementById('priceSummary')
-const recipeSummaryElement = document.getElementById('recipeSummaryView')
-
-appViewElement.style.display = 'none'
-dishSearchElement.style.display = 'none'
-dishDetailsElement.style.display = 'none'
-menuSummaryElement.style.display = 'none'
-priceSummaryElement.style.display = 'none'
-recipeSummaryElement.style.display = 'none'
-
-const transitionFromMainViewToDishSearchView = () => {
-  mainViewElement.style.display = 'none'
-  appViewElement.style = ''
-  dishSearchElement.style = ''
-}
-
-const transitionFromDishSearchViewToDishDetailsView = () => {
-  dishSearchElement.style.display = 'none'
-  dishDetailsElement.style = ''
-}
-
-const transitionFromDishDetailsViewToDishSearchView = () => {
-  dishDetailsElement.style.display = 'none'
-  dishSearchElement.style = ''
-}
-
-const transitionFromDishSearchViewToPriceSummaryView = () => {
-  appViewElement.style.display = 'none'
-  dishSearchElement.style.display = 'none'
-  dishDetailsElement.style.display = 'none'
-  menuSummaryElement.style = ''
-  priceSummaryElement.style = ''
-  recipeSummaryElement.style.display = 'none'
-}
-
-const transitionFromPriceSummaryViewToDishSearchView = () => {
-  menuSummaryElement.style.display = 'none'
-  recipeSummaryElement.style.display = 'none'
-  appViewElement.style = ''
-  dishSearchElement.style = ''
-}
-
-const transitionFromPriceSummaryViewToRecipeSummaryView = () => {
-  priceSummaryElement.style.display = 'none'
-  recipeSummaryElement.style = ''
-}
diff --git a/js/model/dinnerModel.js b/js/model/dinnerModel.js
index 6f9174e8e..7cedabf58 100644
--- a/js/model/dinnerModel.js
+++ b/js/model/dinnerModel.js
@@ -5,11 +5,25 @@ const createDinnerModel = () => {
 	// and selected dishes for the dinner menu
 	const state = {
 		numberOfGuests: 1,
-		menu: []
+		menu: [],
+		observers: []
+	}
+	
+	const addObserver = (observer) => {
+		state.observers.push(observer)
+	}
+
+	const removeObserver = (observer) => {
+		state.observers = observers.filter(subscribedObserver => subscribedObserver !== observer)
+	}
+
+	const _notifyObservers = (details) => {
+		state.observers.map(observer => observer(details))
 	}
 
 	const setNumberOfGuests = num => {
 		state.numberOfGuests = num
+		_notifyObservers({ numberOfGuests: state.numberOfGuests })
 	}
 
 	const getNumberOfGuests = () => state.numberOfGuests
@@ -19,15 +33,21 @@ const createDinnerModel = () => {
 
 	// Returns all the dishes on the menu.
 	const getFullMenu = () => state.menu
-
+	
 	// Returns all ingredients for all the dishes on the menu.
-	const getAllIngredients = () => state.menu.map(dish => dish.ingredients)
+	const getAllIngredients = () => state.menu.reduce((acc, curr) => acc.concat(curr.ingredients), [])
 
 	// Return the full price of a given dish (represented by id)
-	const getPriceForDish = (id) => getDish(id).ingredients.reduce((acc, curr) => acc = acc + curr.price, 0)
+	const getPriceForDish = (id) => getDish(id).ingredients.reduce((acc, curr) => {
+		acc += state.numberOfGuests * curr.price
+		return acc
+	}, 0)
 
 	// Returns the total price of the menu (all the ingredients multiplied by number of guests).
-	const getTotalMenuPrice = () => getAllIngredients().reduce((acc, curr) => acc = acc + state.numberOfGuests * curr.price, 0)
+	const getTotalMenuPrice = () => getAllIngredients().reduce((acc, curr) => {
+		acc += state.numberOfGuests * curr.price
+		return acc
+	}, 0)
 	
 	// Adds the passed dish to the menu. If the dish of that type already exists on the menu
 	// it is removed from the menu and the new one added.
@@ -36,12 +56,14 @@ const createDinnerModel = () => {
 		const restOfTheMenu = state.menu.filter(dish => dish.type !== selectedDish.type)
 		restOfTheMenu.push(selectedDish)
 		state.menu = restOfTheMenu
+		_notifyObservers({ menu: state.menu })
 	}
 
 	// Removes dish from menu
 	const removeDishFromMenu = id => {
 		const newMenu = state.menu.filter(dish => dish.id !== id)
 		state.menu = newMenu
+		_notifyObservers({ menu: state.menu })
 	}
 
 	// function that returns all dishes of specific type (i.e. "starter", "main dish" or "dessert")
@@ -51,15 +73,18 @@ const createDinnerModel = () => {
 		
 		return dishes.filter(dish => {
 			
-			let typeMatch =  dish.type === type
+			let typeMatch = dish.type === type
 			if(type === 'all') {
 				typeMatch = true
 			}
 			
 			let filterMatch = true
 			if(filter !== undefined) {
-				const nameMatch = dish.name.includes(filter)
-				const ingredientMatch = dish.ingredients.some(ingredient => ingredient.name.includes(filter))
+				const filterString = filter.toLowerCase()
+				const nameMatch = dish.name.toLowerCase().includes(filterString)
+				const ingredientMatch = dish.ingredients.some(ingredient => 
+					ingredient.name.toLowerCase().includes(filterString)
+				)
 				filterMatch = nameMatch || ingredientMatch
 			}
 			
@@ -71,6 +96,8 @@ const createDinnerModel = () => {
 	const getDish = id => dishes.find(dish => dish.id === id)
 
 	return ({
+		addObserver,
+		removeObserver,
 		setNumberOfGuests,
 		getNumberOfGuests,
 		getSelectedDish,
@@ -94,7 +121,9 @@ const createDinnerModel = () => {
 // defining the unit i.e. "g", "slices", "ml". Unit
 // can sometimes be empty like in the example of eggs where
 // you just say "5 eggs" and not "5 pieces of eggs" or anything else.
-const dishes = [{
+const dishes = [
+	
+	{
 	'id':1,
 	'name':'French toast',
 	'type':'starter',
@@ -126,7 +155,10 @@ const dishes = [{
 		'unit':'slices',
 		'price':2
 		}]
-	},{
+	}
+	
+	
+	,{
 	'id':2,
 	'name':'Sourdough Starter',
 	'type':'starter',
diff --git a/js/view/DishDetailsView.js b/js/view/DishDetailsView.js
new file mode 100644
index 000000000..09d20566f
--- /dev/null
+++ b/js/view/DishDetailsView.js
@@ -0,0 +1,35 @@
+/*
+  * Dish Details View Object factory function
+
+  * @param {HTML DOM element} container - references the HTML parent element that contains the view.
+  * @param {Object} model - the reference to the Dinner Model
+*/
+
+const createDishDetailsView = (container, model) => {
+
+  const state = {
+    display: false,
+  }
+
+  const backFromDishDetailsButton = container.querySelector('#backFromDishDetailsButton')
+
+  const show = () => {
+    if(state.display !== true) {
+      state.display = true
+    }
+    container.style = ''
+  }
+
+  const hide = () => {
+    if(state.display !== false) {
+      state.display = false
+    }
+    container.style.display = 'none'
+  }
+
+  return ({
+    backFromDishDetailsButton,
+    show,
+    hide
+  })
+}
\ No newline at end of file
diff --git a/js/view/DishResultView.js b/js/view/DishResultView.js
new file mode 100644
index 000000000..a0af9be01
--- /dev/null
+++ b/js/view/DishResultView.js
@@ -0,0 +1,58 @@
+/*
+  * Dish Result View Object factory function
+
+  * @param {HTML DOM element} container - references the HTML parent element that contains the view.
+  * @param {Object} model - the reference to the Dinner Model
+*/
+
+const createDishResultView = (container, model) => {
+  
+  const dishSearchButton = container.querySelector('#dishSearchButton')
+  
+  const _dishSearchResultsElement = container.querySelector('#dishSearchResults')
+
+  const render = () => {
+
+    _remove()
+
+    const filter = container.querySelector('#dishSearchField').value
+    const type = container.querySelector('#dishTypeSelectField').value
+
+    const createDishResultElement = (imageUrl, name) => {
+      const dishResultElement = document.createElement('div')
+      dishResultElement.classList.add('dishResult')
+  
+      const dishResultImageContainerElement = document.createElement('div')
+      dishResultImageContainerElement.classList.add('dishResultImageContainer')
+  
+      const dishResultImageElement = document.createElement('img')
+      dishResultImageElement.classList.add('dishResultImage')
+      dishResultImageElement.src = imageUrl
+  
+      const dishResultNameElement = document.createElement('div')
+      dishResultNameElement.innerHTML = name
+  
+      dishResultImageContainerElement.appendChild(dishResultImageElement)
+      dishResultElement.appendChild(dishResultImageContainerElement)
+      dishResultElement.appendChild(dishResultNameElement)
+  
+      return dishResultElement;
+    }
+
+    model.getAllDishes(type, filter).map(({image, name}) => {
+      _dishSearchResultsElement.append(createDishResultElement(`images/${image}`, name))
+    })
+  }
+
+  const _remove = () => {
+    Array.from(_dishSearchResultsElement.childNodes).map(child => child.remove())
+  }
+
+  return ({
+    dishSearchButton,
+    render,
+    show,
+    hide
+  })
+
+}
\ No newline at end of file
diff --git a/js/view/DishSearchView.js b/js/view/DishSearchView.js
index 6763d8cbf..c03c828b6 100644
--- a/js/view/DishSearchView.js
+++ b/js/view/DishSearchView.js
@@ -6,33 +6,73 @@
 */
 
 const createDishSearchView = (container, model) => {
+
+  const state = {
+    display: false,
+  }
   
-  const dishSearchResultsElement = container.querySelector('#dishSearchResults')
+  const dishSearchButton = container.querySelector('#dishSearchButton')
+  
+  const _dishSearchResultsElement = container.querySelector('#dishSearchResults')
 
-  const createDishResultElement = (imageUrl, name) => {
-    const dishResultElement = document.createElement('div')
-    dishResultElement.classList.add('dishResult')
+  const render = () => {
 
-    const dishResultImageContainerElement = document.createElement('div')
-    dishResultImageContainerElement.classList.add('dishResultImageContainer')
+    _remove()
 
-    const dishResultImageElement = document.createElement('img')
-    dishResultImageElement.classList.add('dishResultImage')
-    dishResultImageElement.src = imageUrl
+    const filter = container.querySelector('#dishSearchField').value
+    const type = container.querySelector('#dishTypeSelectField').value
 
-    const dishResultNameElement = document.createElement('div')
-    dishResultNameElement.innerHTML = name
+    const createDishResultElement = (imageUrl, name) => {
+      const dishResultElement = document.createElement('div')
+      dishResultElement.classList.add('dishResult')
+  
+      const dishResultImageContainerElement = document.createElement('div')
+      dishResultImageContainerElement.classList.add('dishResultImageContainer')
+  
+      const dishResultImageElement = document.createElement('img')
+      dishResultImageElement.classList.add('dishResultImage')
+      dishResultImageElement.src = imageUrl
+  
+      const dishResultNameElement = document.createElement('div')
+      dishResultNameElement.innerHTML = name
+  
+      dishResultImageContainerElement.appendChild(dishResultImageElement)
+      dishResultElement.appendChild(dishResultImageContainerElement)
+      dishResultElement.appendChild(dishResultNameElement)
+  
+      return dishResultElement;
+    }
 
-    dishResultImageContainerElement.appendChild(dishResultImageElement)
-    dishResultElement.appendChild(dishResultImageContainerElement)
-    dishResultElement.appendChild(dishResultNameElement)
+    model.getAllDishes(type, filter).map(({image, name}) => {
+      _dishSearchResultsElement.append(createDishResultElement(`images/${image}`, name))
+    })
+  }
 
-    return dishResultElement;
+  const _remove = () => {
+    Array.from(_dishSearchResultsElement.childNodes).map(child => child.remove())
   }
 
-  model.getAllDishes('all').map(({image, name}) => {
-    dishSearchResultsElement.appendChild(createDishResultElement(`images/${image}`, name))
-  })
+  const show = () => {
+    if(state.display !== true) {
+      state.display = true
+    }
+    container.style = ''
+  }
 
+  const hide = () => {
+    if(state.display !== false) {
+      state.display = false
+    }
+    container.style.display = 'none'
+  }
+
+  render()
+
+  return ({
+    dishSearchButton,
+    render,
+    show,
+    hide
+  })
 
 }
\ No newline at end of file
diff --git a/js/view/MainView.js b/js/view/MainView.js
new file mode 100644
index 000000000..20fae41fd
--- /dev/null
+++ b/js/view/MainView.js
@@ -0,0 +1,35 @@
+/*
+  * Main View Object factory function
+
+  * @param {HTML DOM element} container - references the HTML parent element that contains the view.
+  * @param {Object} model - the reference to the Dinner Model
+*/
+
+const createMainView = (container, model) => {
+
+  const state = {
+    display: false,
+  }
+
+  const startButton = container.querySelector('#startButton')
+
+  const show = () => {
+    if(state.display !== true) {
+      state.display = true
+    }
+    container.style = ''
+  }
+
+  const hide = () => {
+    if(state.display !== false) {
+      state.display = false
+    }
+    container.style.display = 'none'
+  }
+
+  return ({
+    startButton,
+    show,
+    hide
+  })
+}
\ No newline at end of file
diff --git a/js/view/PriceSummaryView.js b/js/view/PriceSummaryView.js
index 9e1e01df4..053feeeaf 100644
--- a/js/view/PriceSummaryView.js
+++ b/js/view/PriceSummaryView.js
@@ -6,5 +6,39 @@
 */
 
 const createPriceSummaryView = (container, model) => {
+  
+  const state = {
+    display: false
+  }
 
+  const printButton = container.querySelector('#printButton')
+
+  const _starterContainer = container.querySelector('#starter')
+  const _mainCourseContainer = container.querySelector('#mainCourse')
+  const _dessertContainer = container.querySelector('#dessert')
+  const _dishPriceValue = container.querySelector('#dishPriceValue')
+
+  const _createUpdate = (model) => (changeDetails) => {
+    
+  }
+
+  const show = () => {
+    if(state.display !== true) {
+      state.display = true
+    }
+    container.style = ''
+  }
+
+  const hide = () => {
+    if(state.display !== false) {
+      state.display = false
+    }
+    container.style.display = 'none'
+  }
+
+  return ({
+    printButton,
+    show,
+    hide
+  })
 }
\ No newline at end of file
diff --git a/js/view/RecipeSummaryView.js b/js/view/RecipeSummaryView.js
new file mode 100644
index 000000000..b4e56b55e
--- /dev/null
+++ b/js/view/RecipeSummaryView.js
@@ -0,0 +1,32 @@
+/*
+  * Recipe Summary View Object factory function
+
+  * @param {HTML DOM element} container - references the HTML parent element that contains the view.
+  * @param {Object} model - the reference to the Dinner Model
+*/
+
+const createRecipeSummaryView = (container, model) => {
+  
+  const state = {
+    display: false
+  }
+
+  const show = () => {
+    if(state.display !== true) {
+      state.display = true
+    }
+    container.style = ''
+  }
+
+  const hide = () => {
+    if(state.display !== false) {
+      state.display = false
+    }
+    container.style.display = 'none'
+  }
+
+  return ({
+    show,
+    hide
+  })
+}
\ No newline at end of file
diff --git a/js/view/SidebarView.js b/js/view/SidebarView.js
index 8149f21a8..d6844f65d 100644
--- a/js/view/SidebarView.js
+++ b/js/view/SidebarView.js
@@ -7,37 +7,87 @@
 
 const createSidebarView = (container, model) => {
 
+  const state = {
+    display: false,
+    numberOfGuests: undefined,
+    menu: undefined,
+    totalMenuPrice: undefined
+  }
+
   const guestNumber = container.querySelector('#guestNumber')
-  guestNumber.value = model.getNumberOfGuests()
-  guestNumber.onchange = (event) => {
-    const newGuestNumber = event.target.value
-    model.setNumberOfGuests(newGuestNumber)
-    console.log('Guest number is: ', model.getNumberOfGuests())
+  const confirmMenuButton = container.querySelector('#confirmMenuButton')
+  const _menuTableContent = container.querySelector('#tableContent')
+  const _totalPrice = container.querySelector('#totalPriceValue') 
+
+  const _createUpdate = (model) => (changeDetails) => {
+    state.numberOfGuests = model.getNumberOfGuests()
+    state.menu = model.getFullMenu().map(item => {
+      item.price = model.getPriceForDish(item.id)
+      return item
+    })
+    state.totalMenuPrice = model.getTotalMenuPrice()
+
+    _remove()
+    _render()
   }
+  const update = _createUpdate(model)
 
-  const menuTableContent = container.querySelector('#tableContent')
+  const _render = () => {
+    guestNumber.value = state.numberOfGuests
 
-  const createNewRow = (name, cost) => {
+    const createNewRow = (name, cost) => {
 
-    const tableRow = document.createElement('div')
-    tableRow.classList.add('tableRow')
+      const tableRow = document.createElement('div')
+      tableRow.classList.add('tableRow')
+  
+      const rowName = document.createElement('div')
+      rowName.classList.add('rowName')
+      rowName.innerHTML = `${name}`
+      
+      const rowCost = document.createElement('div')
+      rowCost.classList.add('rowCost')
+      rowCost.innerHTML = `${cost}:-`
+  
+      tableRow.appendChild(rowName)
+      tableRow.appendChild(rowCost)
+  
+      return tableRow
+    }
+    
+    state.menu.map(item => 
+      _menuTableContent.appendChild(createNewRow(item.name, item.price))
+    )
 
-    const rowName = document.createElement('div')
-    rowName.classList.add('rowName')
-    rowName.innerHTML = `${name}`
+    _totalPrice.innerHTML = `${state.totalMenuPrice}.00`
     
-    const rowCost = document.createElement('div')
-    rowCost.classList.add('rowCost')
-    rowCost.innerHTML = `${cost}:-`
+  }
 
-    tableRow.appendChild(rowName)
-    tableRow.appendChild(rowCost)
+  const _remove = () => {
+    Array.from(_menuTableContent.childNodes).map(child => child.remove())
+  }
 
-    return tableRow
+  const show = () => {
+    if(state.display !== true) {
+      state.display = true
+    }
+    container.style = ''
   }
 
-  model.addDishToMenu(1)
-  model.getFullMenu().map(item => {
-    menuTableContent.appendChild(createNewRow(item.name, model.getPriceForDish(item.id)))
+  const hide = () => {
+    if(state.display !== false) {
+      state.display = false
+    }
+    container.style.display = 'none'
+  }
+
+  model.addObserver(update)
+  update()
+
+  return ({
+    guestNumber,
+    confirmMenuButton,
+    update,
+    show,
+    hide
   })
 }
\ No newline at end of file
diff --git a/js/view/StatusBarView.js b/js/view/StatusBarView.js
index 87ebfaebf..4d20c8270 100644
--- a/js/view/StatusBarView.js
+++ b/js/view/StatusBarView.js
@@ -6,5 +6,41 @@
 */
 
 const createStatusBarView = (container, model) => {
-  container.querySelector('#numberOfGuests').innerHTML = model.getNumberOfGuests()
+
+  const state = {
+    display: false
+  }
+
+  const backFromMenuSummaryButton = container.querySelector('#backFromMenuSummaryButton')
+  
+  const numberOfGuests = container.querySelector('#numberOfGuests')
+
+  const _createUpdate = (model) => (changeDetails) => {
+    numberOfGuests.innerHTML = model.getNumberOfGuests()
+  }
+  const update = _createUpdate(model)
+
+  const show = () => {
+    if(state.display !== true) {
+      state.display = true
+    }
+    container.style = ''
+  }
+
+  const hide = () => {
+    if(state.display !== false) {
+      state.display = false
+    }
+    container.style.display = 'none'
+  }
+
+  model.addObserver(update)
+  update()
+
+  return ({
+    backFromMenuSummaryButton,
+    update,
+    show,
+    hide
+  })
 }
\ No newline at end of file
diff --git a/js/view/exampleView.js b/js/view/exampleView.js
deleted file mode 100644
index 508225ff7..000000000
--- a/js/view/exampleView.js
+++ /dev/null
@@ -1,58 +0,0 @@
-/** ExampleView Object constructor
- * 
- * This object represents the code for one specific view (in this case the Example view). 
- * 
- * It is responsible for:
- * - constructing the view (e.g. if you need to create some HTML elements procedurally) 
- * - populating the view with the data
- * - updating the view when the data changes
- * 
- * You should create a view Object like this for every view in your UI.
- * 
- * @param {jQuery object} container - references the HTML parent element that contains the view.
- * @param {Object} model - the reference to the Dinner Model
- */ 
-var ExampleView = function (container, model) {
-	
-	/**
-	 * We use the @method find() on @var {jQuery object} container to look for various elements 
-	 * inside the view in orther to use them later on. For instance:
-	 * 
-	 * @var {jQuery object} numberOfGuests is a reference to the <span> element that 
-	 * represents the placeholder for where we want to show the number of guests. It's
-	 * a reference to HTML element (wrapped in jQuery object for added benefit of jQuery methods)
-	 * and we can use it to modify <span>, for example to populate it with dynamic data (for now 
-	 * only 'Hello world', but you should change this by end of Lab 1).
-	 * 
-	 * We use variables when we want to make the reference private (only available within) the
-	 * ExampleView.
-	 * 
-	 * IMPORTANT: Never use $('someSelector') directly in the views. Always use container.find
-	 * or some other way of searching only among the containers child elements. In this way you
-	 * make your view code modular and ensure it dosn't break if by mistake somebody else
-	 * in some other view gives the same ID to another element.
-	 * 
-	 */
-	var numberOfGuests = container.find("#numberOfGuests");
-
-	/**
-	 * When we want references to some view elements to be available from outside of view, we 
-	 * define them as this.someName. We don't need this in Lab 1 yet, but in Lab 2 it 
-	 * will be important for assigning listeners to these buttons, because the listeners
-	 * should not be assigned in the view, but rather in controller.
-	 * 
-	 * We can then, in some other code, use exampleView.plusButton to reference the 
-	 * this button and do something with it (see Lab 2).
-	 * 
-	 */
-	this.plusButton = container.find("#plusGuest");
-	this.minusButton = container.find("#minusGuest");
-	
-	/**
-	 * Here we use @var {jQuery object} numberOfGuests that is a reference to <span>
-	 * in our view to dynamically set it's value to "Hello World".
-	 */
-	numberOfGuests.html("Hello World");
-	
-}
- 

From 62010347ff5d038808ae99920450d5f356607366 Mon Sep 17 00:00:00 2001
From: Andrew Szucs <andrew0szucs@gmail.com>
Date: Fri, 9 Feb 2018 10:56:31 +0100
Subject: [PATCH 21/45] Connect PriceSummary and RecipeSummary views to model.

---
 index.html                   | 76 +++++------------------------------
 js/app.js                    | 15 +++++++
 js/view/PriceSummaryView.js  | 77 +++++++++++++++++++++++++++++++++++-
 js/view/RecipeSummaryView.js | 70 ++++++++++++++++++++++++++++++++
 4 files changed, 170 insertions(+), 68 deletions(-)

diff --git a/index.html b/index.html
index 6fedc8867..0d5c1072c 100644
--- a/index.html
+++ b/index.html
@@ -175,41 +175,23 @@ <h2 id="statusTitle">My Dinner: <span id="numberOfGuests">3</span> people</h2>
 
               <div id="dishListContainer">
 
-                <div id="starter" class="dishItemContainer">
-                  <!-- <div class="verticallyCentered dishImage">
-                    <img src="images/bakedbrie.jpg" alt="">
-                  </div>
-                  <p class="dishName">Baked Brie</p>
-                  <p class="dishPrice">
-                    <span class="value">77.20</span> <span class="currency">SEK</span>
-                  </p> -->
+                <div id="starter">
+                  
                 </div>
         
-                <div id="mainCourse" class="dishItemContainer">
-                  <!-- <div class="verticallyCentered dishImage">
-                    <img src="images/icecream.jpg" alt="">
-                  </div>
-                  <p class="dishName">Ice Cream</p>
-                  <p class="dishPrice">
-                    <span class="value">77.20</span> <span class="currency">SEK</span>
-                  </p> -->
+                <div id="mainCourse">
+                  
                 </div>
         
-                <div id="dessert" class="dishItemContainer">
-                  <!-- <div class="verticallyCentered dishImage">
-                    <img src="images/meatballs.jpg" alt="">
-                  </div>
-                  <p class="dishName">Meatballs</p>
-                  <p class="dishPrice">
-                    <span class="value">77.20</span> <span class="currency">SEK</span>
-                  </p> -->
+                <div id="dessert">
+
                 </div>
         
                 <div id="totalPrice" class="dishItemContainer">
                   <div class="verticallyCentered dishImage"></div>
                   <p class="dishName">Total:</p>
                   <p class="dishPrice">
-                    <span class="value" id="dishPriceValue">0.00</span> 
+                    <span class="value" id="totalPriceValue">0.00</span> 
                     <span class="currency">SEK</span>
                   </p>
                 </div>
@@ -223,7 +205,8 @@ <h2 id="statusTitle">My Dinner: <span id="numberOfGuests">3</span> people</h2>
             </div>
 
             <div id="recipeSummaryView">
-              <div class="recipe">
+
+              <!-- <div class="recipe">
                 <div class="recipeImage">
                   <img src="images/bakedbrie.jpg" alt="">
                 </div>
@@ -241,46 +224,7 @@ <h3>Preparation</h3>
                     Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Eget aliquet nibh praesent tristique. Quis hendrerit dolor magna eget. In cursus turpis massa tincidunt dui ut ornare. Sed adipiscing diam donec adipiscing tristique risus nec feugiat in. Dolor sit amet consectetur adipiscing elit. Ac tincidunt vitae semper quis lectus nulla at. Mauris augue neque gravida in fermentum. Egestas diam in arcu cursus euismod quis viverra nibh. Vulputate enim nulla aliquet porttitor lacus luctus accumsan. Quis varius quam quisque id. Non odio euismod lacinia at quis risus sed vulputate. Id cursus metus aliquam eleifend mi in. Tortor pretium viverra suspendisse potenti nullam ac tortor.
                   </p>
                 </div>
-              </div>
-      
-              <div class="recipe">
-                <div class="recipeImage">
-                  <img src="images/icecream.jpg" alt="">
-                </div>
-                
-                <div class="recipeTextbox">
-                  <h2 class="recipeName">Ice Cream</h2>
-                  <p class="recipeDescriptionText">
-                    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Eget aliquet nibh praesent tristique. Quis hendrerit dolor magna eget. In cursus turpis massa tincidunt dui ut ornare. Sed adipiscing diam donec adipiscing tristique risus nec feugiat in.
-                  </p>
-                </div>
-      
-                <div class="recipeTextbox">
-                  <h3>Preparation</h3>
-                  <p class="recipePreparationText">
-                    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Eget aliquet nibh praesent tristique. Quis hendrerit dolor magna eget. In cursus turpis massa tincidunt dui ut ornare. Sed adipiscing diam donec adipiscing tristique risus nec feugiat in. Dolor sit amet consectetur adipiscing elit. Ac tincidunt vitae semper quis lectus nulla at. Mauris augue neque gravida in fermentum. Egestas diam in arcu cursus euismod quis viverra nibh. Vulputate enim nulla aliquet porttitor lacus luctus accumsan. Quis varius quam quisque id. Non odio euismod lacinia at quis risus sed vulputate. Id cursus metus aliquam eleifend mi in. Tortor pretium viverra suspendisse potenti nullam ac tortor.
-                  </p>
-                </div>
-              </div>
-      
-              <div class="recipe">
-                <div class="recipeImage">
-                  <img src="images/meatballs.jpg" alt="">
-                </div>
-                
-                <div class="recipeTextbox">
-                  <h2 class="recipeName">Meatball</h2>
-                  <p class="recipeDescriptionText">
-                    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Eget aliquet nibh praesent tristique. Quis hendrerit dolor magna eget. In cursus turpis massa tincidunt dui ut ornare. Sed adipiscing diam donec adipiscing tristique risus nec feugiat in.
-                  </p>
-                </div>
-                <div class="recipeTextbox">
-                  <h3 class="recipePreparationTitle">Preparation</h3>
-                  <p class="recipePreparationText">
-                    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Eget aliquet nibh praesent tristique. Quis hendrerit dolor magna eget. In cursus turpis massa tincidunt dui ut ornare. Sed adipiscing diam donec adipiscing tristique risus nec feugiat in. Dolor sit amet consectetur adipiscing elit. Ac tincidunt vitae semper quis lectus nulla at. Mauris augue neque gravida in fermentum. Egestas diam in arcu cursus euismod quis viverra nibh. Vulputate enim nulla aliquet porttitor lacus luctus accumsan. Quis varius quam quisque id. Non odio euismod lacinia at quis risus sed vulputate. Id cursus metus aliquam eleifend mi in. Tortor pretium viverra suspendisse potenti nullam ac tortor.
-                  </p>
-                </div>
-              </div>
+              </div> -->
 
             </div>
 
diff --git a/js/app.js b/js/app.js
index 8f865dfe4..13f274275 100644
--- a/js/app.js
+++ b/js/app.js
@@ -1,8 +1,23 @@
 (function () {
+
+	// Curry Functions Tutorial
+	// const func2 = (one,two) => {
+  //   return one + two
+  // }
+  // const func = (one, two) => (one + two)
+
+  // const curryFunc = (zero) => (one, two) => (zero + one + two)
+  // const curryFunc2 = (zero) => {
+  //   return (one, two) => {
+  //     return zero + one + two
+  //   }
+  // }
 	
 	// Model
 	const model = createDinnerModel()
 	model.addDishToMenu(1)
+	model.addDishToMenu(100)
+	model.addDishToMenu(200)
 
 	// Views + Controllers
 	const mainView = createMainView(
diff --git a/js/view/PriceSummaryView.js b/js/view/PriceSummaryView.js
index 053feeeaf..e3299d90b 100644
--- a/js/view/PriceSummaryView.js
+++ b/js/view/PriceSummaryView.js
@@ -16,10 +16,79 @@ const createPriceSummaryView = (container, model) => {
   const _starterContainer = container.querySelector('#starter')
   const _mainCourseContainer = container.querySelector('#mainCourse')
   const _dessertContainer = container.querySelector('#dessert')
-  const _dishPriceValue = container.querySelector('#dishPriceValue')
+  const _totalPrice = container.querySelector('#totalPriceValue')
 
   const _createUpdate = (model) => (changeDetails) => {
-    
+    _remove()
+
+    const menu = {
+      'starter': model.getSelectedDish('starter'),
+      'mainCourse': model.getSelectedDish('main dish'),
+      'dessert': model.getSelectedDish('dessert')
+    }
+
+    Object.keys(menu).map(type => {
+      const dish = menu[type]
+      if(dish !== undefined) {
+        dish.price = model.getPriceForDish(dish.id)
+      }
+    })
+
+    const totalPriceValue = model.getTotalMenuPrice()
+
+    const createDishElement = ({image, name, price}) => {
+      const dishElement = document.createElement('div')
+      dishElement.classList.add('dishItemContainer')
+  
+      const dishImageContainerElement = document.createElement('div')
+      dishImageContainerElement.classList.add('verticallyCentered')
+      dishImageContainerElement.classList.add('dishImage')
+      const dishImageElement = document.createElement('img')
+      dishImageElement.src = `images/${image}`
+      dishImageContainerElement.appendChild(dishImageElement)
+  
+      const dishNameElement = document.createElement('p')
+      dishNameElement.classList.add('dishName')
+      dishNameElement.innerHTML = name
+
+      const dishPriceElement = document.createElement('p')
+      dishPriceElement.classList.add('dishPrice')
+      dishPriceElement.innerHTML = `${price} SEK`
+      
+      dishElement.appendChild(dishImageContainerElement)
+      dishElement.appendChild(dishNameElement)
+      dishElement.appendChild(dishPriceElement)
+  
+      return dishElement
+    }
+
+    Object.keys(menu).map(type => {
+      const dish = menu[type]
+      if(dish !== undefined) {
+        switch (type) {
+          case 'starter':
+            _starterContainer.append(createDishElement(dish))
+            break;
+          case 'mainCourse':
+            _mainCourseContainer.append(createDishElement(dish))
+            break;
+          case 'dessert':
+            _dessertContainer.append(createDishElement(dish))
+            break;
+        }
+      }
+    })
+
+    _totalPrice.innerHTML = `${totalPriceValue}.00`
+  }
+  const update = _createUpdate(model)
+
+  const _remove = () => {
+    const childNodesToRemove = Array.from(_starterContainer.childNodes)
+                                .concat(Array.from(_mainCourseContainer.childNodes))
+                                .concat(Array.from(_dessertContainer.childNodes))
+    childNodesToRemove.map(child => child.remove())                       
+    _totalPrice.innerHTML = "0.00"
   }
 
   const show = () => {
@@ -36,8 +105,12 @@ const createPriceSummaryView = (container, model) => {
     container.style.display = 'none'
   }
 
+  model.addObserver(update)
+  update()
+
   return ({
     printButton,
+    update,
     show,
     hide
   })
diff --git a/js/view/RecipeSummaryView.js b/js/view/RecipeSummaryView.js
index b4e56b55e..d91b6d447 100644
--- a/js/view/RecipeSummaryView.js
+++ b/js/view/RecipeSummaryView.js
@@ -11,6 +11,72 @@ const createRecipeSummaryView = (container, model) => {
     display: false
   }
 
+  const _createUpdate = (model) => (changeDetails) => {
+    _remove()
+
+    const menu = {
+      'starter': model.getSelectedDish('starter'),
+      'mainCourse': model.getSelectedDish('main dish'),
+      'dessert': model.getSelectedDish('dessert')
+    }
+
+    const createRecipeElement = ({name, image, description}) => {
+
+      const recipeElement = document.createElement('div')
+      recipeElement.classList.add('recipe')
+
+      const recipeImageContainerElement = document.createElement('div')
+      recipeImageContainerElement.classList.add('recipeImage')
+
+      const recipeImageElement = document.createElement('img')
+      recipeImageElement.src = `images/${image}`
+      recipeImageContainerElement.appendChild(recipeImageElement)
+
+      const recipeTextboxElement = document.createElement('div')
+      recipeTextboxElement.classList.add('recipeTextbox')
+      
+      const recipeNameElement = document.createElement('h2')
+      recipeNameElement.classList.add('recipeName')
+      recipeNameElement.innerHTML = `${name}`
+      
+      const recipeDescriptionElement = document.createElement('p')
+      recipeDescriptionElement.classList.add('recipeDescriptionText')
+      recipeDescriptionElement.innerHTML = `${description}`
+
+      recipeTextboxElement.appendChild(recipeNameElement)
+      recipeTextboxElement.appendChild(recipeDescriptionElement)
+
+      const preparationTextboxElement = document.createElement('div')
+      preparationTextboxElement.classList.add('recipeTextbox')
+      
+      const preparationTitleElement = document.createElement('h3')
+      preparationTitleElement.innerHTML = 'Preparation'
+      
+      const preparationDescriptionElement = document.createElement('p')
+      preparationDescriptionElement.classList.add('recipePreparationText')
+      preparationDescriptionElement.innerHTML = `Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Eget aliquet nibh praesent tristique. Quis hendrerit dolor magna eget. In cursus turpis massa tincidunt dui ut ornare. Sed adipiscing diam donec adipiscing tristique risus nec feugiat in. Dolor sit amet consectetur adipiscing elit. Ac tincidunt vitae semper quis lectus nulla at. Mauris augue neque gravida in fermentum. Egestas diam in arcu cursus euismod quis viverra nibh. Vulputate enim nulla aliquet porttitor lacus luctus accumsan. Quis varius quam quisque id. Non odio euismod lacinia at quis risus sed vulputate. Id cursus metus aliquam eleifend mi in. Tortor pretium viverra suspendisse potenti nullam ac tortor.`
+
+      preparationTextboxElement.appendChild(preparationTitleElement)
+      preparationTextboxElement.appendChild(preparationDescriptionElement)
+      
+      recipeElement.appendChild(recipeImageContainerElement)
+      recipeElement.appendChild(recipeTextboxElement)
+      recipeElement.appendChild(preparationTextboxElement)
+
+      return recipeElement
+    }
+
+    Object.keys(menu).map(type => {
+      const dish = menu[type]
+      container.append(createRecipeElement(dish))
+    })
+  }
+  const update = _createUpdate(model)
+
+  const _remove = () => {
+    Array.from(container.childNodes).map(child => child.remove())
+  }
+
   const show = () => {
     if(state.display !== true) {
       state.display = true
@@ -25,7 +91,11 @@ const createRecipeSummaryView = (container, model) => {
     container.style.display = 'none'
   }
 
+  model.addObserver(update)
+  update()
+
   return ({
+    update,
     show,
     hide
   })

From 2b3aced3423981c88b5d94945e69bf5f9df14ace Mon Sep 17 00:00:00 2001
From: Andrew Szucs <andrew0szucs@gmail.com>
Date: Sat, 10 Feb 2018 23:02:23 +0100
Subject: [PATCH 22/45] Connected the Dish Search and Dish Details views to the
 model. Finished the interaction in them.

---
 index.html                                |  82 +---------
 js/app.js                                 |  19 ++-
 js/controllers/DishDetailsController.js   |   5 +-
 js/controllers/PriceSummaryController.js  |   3 -
 js/controllers/RecipeSummaryController.js |   3 -
 js/controllers/SidebarController.js       |   1 -
 js/controllers/StatusBarController.js     |   3 -
 js/model/dinnerModel.js                   |  11 ++
 js/view/DishDetailsView.js                | 182 +++++++++++++++++++++-
 js/view/DishResultView.js                 |  58 -------
 js/view/DishSearchView.js                 |  33 ++--
 11 files changed, 227 insertions(+), 173 deletions(-)
 delete mode 100644 js/controllers/PriceSummaryController.js
 delete mode 100644 js/controllers/RecipeSummaryController.js
 delete mode 100644 js/controllers/StatusBarController.js
 delete mode 100644 js/view/DishResultView.js

diff --git a/index.html b/index.html
index 0d5c1072c..15cf98e91 100644
--- a/index.html
+++ b/index.html
@@ -98,64 +98,7 @@ <h2 id="dishSearchTitle">Find a dish</h2>
             </div>
 
             <div id="dishDetailsView">
-              <div id="dishDescription">
-                <div id="dishTitle">
-                  <h2>Baked Brie</h2>
-                </div>
-                <div id="dishImage">
-                  <img src="images/bakedbrie.jpg" alt="">
-                </div>
-                <div id="dishDescription">
-                  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Eget aliquet nibh praesent tristique. Quis hendrerit dolor magna eget. In cursus turpis massa tincidunt dui ut ornare.</p>
-                </div>
-                <button id="backFromDishDetailsButton" class="backButton primaryButton">Back to Search</button>
-              </div>
-              
-              <div id="ingredientsList">
-                
-                <div id="ingredientsTitle">
-                  <h3>Ingredients for <span id="numberOfGuests">3</span> people</h3>
-                </div>
-    
-                <div id="ingredientsTable">
-    
-                  <div class="ingredientsTableRow">
-                    <div class="ingredientQuantity">
-                      <span id="quantity">2</span> <span id="unit">tbsp</span>
-                    </div>
-                    <div class="ingredientName">olive oil</div>
-                    <div class="ingredientCurrency">SEK</div>
-                    <div class="ingredientPrice">0.20</div>
-                  </div>
-      
-                  <div class="ingredientsTableRow">
-                    <div class="ingredientQuantity">
-                      <span id="quantity">750</span> <span id="unit">g</span>
-                    </div>
-                    <div class="ingredientName">lean beef mince</div>
-                    <div class="ingredientCurrency">SEK</div>
-                    <div class="ingredientPrice">10.00</div>
-                  </div>
-      
-                </div>
-    
-                <div id="ingredientsFooter">
-                  <div id="addToMenu" class="verticallyCentered">
-                    <button id="addToMenuButton" class="primaryButton">Add to menu</button>
-                  </div>
-                  <div id="ingredientsTotalPriceCurrency">SEK</div>
-                  <div id="ingredientsTotalPrice">10.00</div>
-                </div>
-    
-              </div>
-              
-              <div id="dishPreparation">
-                <h3>Preparation</h3>
-                <div id="dishPreparationText">
-                  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Eget aliquet nibh praesent tristique. Quis hendrerit dolor magna eget. In cursus turpis massa tincidunt dui ut ornare. Sed adipiscing diam donec adipiscing tristique risus nec feugiat in. Dolor sit amet consectetur adipiscing elit. Ac tincidunt vitae semper quis lectus nulla at. Mauris augue neque gravida in fermentum. Egestas diam in arcu cursus euismod quis viverra nibh. Vulputate enim nulla aliquet porttitor lacus luctus accumsan. Quis varius quam quisque id. Non odio euismod lacinia at quis risus sed vulputate. Id cursus metus aliquam eleifend mi in. Tortor pretium viverra suspendisse potenti nullam ac tortor.</p>
-                </div>
-              </div>
-    
+                 
             </div>
 
           </div>
@@ -206,26 +149,6 @@ <h2 id="statusTitle">My Dinner: <span id="numberOfGuests">3</span> people</h2>
 
             <div id="recipeSummaryView">
 
-              <!-- <div class="recipe">
-                <div class="recipeImage">
-                  <img src="images/bakedbrie.jpg" alt="">
-                </div>
-                
-                <div class="recipeTextbox">
-                  <h2 class="recipeName">Baked Brie</h2>
-                  <p class="recipeDescriptionText">
-                    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Eget aliquet nibh praesent tristique. Quis hendrerit dolor magna eget. In cursus turpis massa tincidunt dui ut ornare. Sed adipiscing diam donec adipiscing tristique risus nec feugiat in.
-                  </p>
-                </div>
-      
-                <div class="recipeTextbox">
-                  <h3>Preparation</h3>
-                  <p class="recipePreparationText">
-                    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Eget aliquet nibh praesent tristique. Quis hendrerit dolor magna eget. In cursus turpis massa tincidunt dui ut ornare. Sed adipiscing diam donec adipiscing tristique risus nec feugiat in. Dolor sit amet consectetur adipiscing elit. Ac tincidunt vitae semper quis lectus nulla at. Mauris augue neque gravida in fermentum. Egestas diam in arcu cursus euismod quis viverra nibh. Vulputate enim nulla aliquet porttitor lacus luctus accumsan. Quis varius quam quisque id. Non odio euismod lacinia at quis risus sed vulputate. Id cursus metus aliquam eleifend mi in. Tortor pretium viverra suspendisse potenti nullam ac tortor.
-                  </p>
-                </div>
-              </div> -->
-
             </div>
 
           </div>
@@ -250,13 +173,10 @@ <h3>Preparation</h3>
     <script src="js/controllers/DishDetailsController.js"></script>
     
     <script src="js/view/StatusBarView.js"></script>
-    <script src="js/controllers/StatusBarController.js"></script>
 
     <script src="js/view/PriceSummaryView.js"></script>
-    <script src="js/controllers/PriceSummaryController.js"></script>
     
     <script src="js/view/RecipeSummaryView.js"></script>
-    <script src="js/controllers/RecipeSummaryController.js"></script>
 
     <script src="js/model/dinnerModel.js"></script>
     <!-- The application JavaScript code -->
diff --git a/js/app.js b/js/app.js
index 13f274275..a84b15cfe 100644
--- a/js/app.js
+++ b/js/app.js
@@ -68,9 +68,16 @@
 		dishSearchView.show()
 	}
 
-	const transitionFromDishSearchViewToDishDetailsView = () => {
-		dishSearchView.hide()
-		dishDetailsView.show()
+	const transitionFromDishSearchViewToDishDetailsView = (event) => {
+		
+		const clickedElement = event.target
+		const clickedDishId = clickedElement.getAttribute('key')
+		if(clickedDishId !== null && clickedDishId !== undefined) {
+			dishSearchView.hide()
+			dishDetailsView.render(Number(clickedDishId))
+			dishDetailsView.show()
+		}
+		
 	}
 
 	const transitionFromDishDetailsViewToDishSearchView = () => {
@@ -108,11 +115,7 @@
 	statusBarView.backFromMenuSummaryButton.onclick = transitionFromPriceSummaryViewToDishSearchView
 	dishDetailsView.backFromDishDetailsButton.onclick = transitionFromDishDetailsViewToDishSearchView
 	priceSummaryView.printButton.onclick = transitionFromPriceSummaryViewToRecipeSummaryView
-
-	const dishResults = document.getElementsByClassName('dishResult')
-	for (const dishResult of dishResults) {
-		dishResult.onclick = transitionFromDishSearchViewToDishDetailsView
-	}
+	dishSearchView.dishSearchResultsElement.onclick = transitionFromDishSearchViewToDishDetailsView
 
 	mainView.show()
 	sidebarView.hide()
diff --git a/js/controllers/DishDetailsController.js b/js/controllers/DishDetailsController.js
index af1bcce0a..24f4afa2d 100644
--- a/js/controllers/DishDetailsController.js
+++ b/js/controllers/DishDetailsController.js
@@ -1,3 +1,6 @@
 const createDishDetailsController = (view, model) => {
-  
+  view.addToMenuButton.onclick = () => {
+    const dishId = view.getDishId()
+    model.addDishToMenu(dishId)
+  }
 }
\ No newline at end of file
diff --git a/js/controllers/PriceSummaryController.js b/js/controllers/PriceSummaryController.js
deleted file mode 100644
index 20bcab4d4..000000000
--- a/js/controllers/PriceSummaryController.js
+++ /dev/null
@@ -1,3 +0,0 @@
-const createPriceSummaryController = (view, model) => {
-  
-}
\ No newline at end of file
diff --git a/js/controllers/RecipeSummaryController.js b/js/controllers/RecipeSummaryController.js
deleted file mode 100644
index ab2dd6aa2..000000000
--- a/js/controllers/RecipeSummaryController.js
+++ /dev/null
@@ -1,3 +0,0 @@
-const createRecipeSummaryController = (view, model) => {
-  
-}
\ No newline at end of file
diff --git a/js/controllers/SidebarController.js b/js/controllers/SidebarController.js
index 662a5703b..047179dde 100644
--- a/js/controllers/SidebarController.js
+++ b/js/controllers/SidebarController.js
@@ -3,7 +3,6 @@ const createSidebarController = (view, model) => {
   view.guestNumber.oninput = (event) => {
     const newGuestNumber = event.target.value
     model.setNumberOfGuests(newGuestNumber)
-    console.log('Guest number is: ', model.getNumberOfGuests())
   }
   
 }
\ No newline at end of file
diff --git a/js/controllers/StatusBarController.js b/js/controllers/StatusBarController.js
deleted file mode 100644
index cb9120674..000000000
--- a/js/controllers/StatusBarController.js
+++ /dev/null
@@ -1,3 +0,0 @@
-const createStatusBarController = (view, model) => {
-  
-}
\ No newline at end of file
diff --git a/js/model/dinnerModel.js b/js/model/dinnerModel.js
index 7cedabf58..322144ba9 100644
--- a/js/model/dinnerModel.js
+++ b/js/model/dinnerModel.js
@@ -37,6 +37,16 @@ const createDinnerModel = () => {
 	// Returns all ingredients for all the dishes on the menu.
 	const getAllIngredients = () => state.menu.reduce((acc, curr) => acc.concat(curr.ingredients), [])
 
+	const getAllIngredientsForDish = (id) => {
+		const dish = getDish(id)
+		return dish.ingredients.map(({ name, quantity, unit, price }) => ({
+			name,
+			unit,
+			quantity: quantity * state.numberOfGuests,
+			price: price * state.numberOfGuests
+		}))
+	}
+
 	// Return the full price of a given dish (represented by id)
 	const getPriceForDish = (id) => getDish(id).ingredients.reduce((acc, curr) => {
 		acc += state.numberOfGuests * curr.price
@@ -103,6 +113,7 @@ const createDinnerModel = () => {
 		getSelectedDish,
 		getFullMenu,
 		getAllIngredients,
+		getAllIngredientsForDish,
 		getPriceForDish,
 		getTotalMenuPrice,
 		addDishToMenu,
diff --git a/js/view/DishDetailsView.js b/js/view/DishDetailsView.js
index 09d20566f..ac7856ad0 100644
--- a/js/view/DishDetailsView.js
+++ b/js/view/DishDetailsView.js
@@ -9,9 +9,183 @@ const createDishDetailsView = (container, model) => {
 
   const state = {
     display: false,
+    id: undefined
   }
 
-  const backFromDishDetailsButton = container.querySelector('#backFromDishDetailsButton')
+  const getDishId = () => {
+    return state.id
+  }
+
+  const _createBackButton = (id) => {
+    const backButton = document.createElement('button')
+    backButton.setAttribute('id', id)
+    backButton.classList.add('backButton')
+    backButton.classList.add('primaryButton')
+    backButton.innerHTML = 'Back to Search'
+    return backButton
+  }
+  
+  const _createAddButton = (id) => {
+    const addButton = document.createElement('button')
+    addButton.setAttribute('id', id)
+    addButton.classList.add('primaryButton')
+    addButton.innerHTML = 'Add to menu'
+    return addButton
+  }
+
+  const backFromDishDetailsButton = _createBackButton('backFromDishDetailsButton')
+  const addToMenuButton = _createAddButton('addToMenuButton')
+
+  const _createIngredientsList = (ingredients, totalPrice, numberOfGuests) => {
+    const ingredientsListElement = document.createElement('ingredientsList')
+    ingredientsListElement.setAttribute('id', 'ingredientsList')
+
+    const ingredientsTitleElement = document.createElement('div')
+    ingredientsTitleElement.setAttribute('id', 'ingredientsTitle')
+    const titleH3Element = document.createElement('h3')
+    titleH3Element.innerHTML = `Ingredients for ${numberOfGuests} people`
+    ingredientsTitleElement.appendChild(titleH3Element)
+
+    const ingredientsTableElement = document.createElement('div')
+    ingredientsTableElement.setAttribute('id', 'ingredientsTable')
+    
+    const createIngredientRow = ({ name, quantity, unit, price}) => {
+
+      const ingredientRowElement = document.createElement('div')
+      ingredientRowElement.classList.add('ingredientsTableRow')
+
+      const quantityCell = document.createElement('div')
+      quantityCell.classList.add('ingredientQuantity')
+      quantityCell.innerHTML = `${quantity} ${unit}`
+      ingredientRowElement.appendChild(quantityCell)
+      
+      const nameCell = document.createElement('div')
+      nameCell.classList.add('ingredientName')
+      nameCell.innerHTML = name
+      ingredientRowElement.appendChild(nameCell)
+      
+      const currencyCell = document.createElement('div')
+      currencyCell.classList.add('ingredientCurrency')
+      currencyCell.innerHTML = 'SEK'
+      ingredientRowElement.appendChild(currencyCell)
+
+      const priceCell = document.createElement('div')
+      priceCell.classList.add('ingredientPrice')
+      priceCell.innerHTML = `${price}.00`
+      ingredientRowElement.appendChild(priceCell)
+
+      return ingredientRowElement
+    }
+    ingredients.map(ingredient => {
+      ingredientsTableElement.appendChild(createIngredientRow(ingredient))
+    })
+    
+    const ingredientsFooterElement = document.createElement('div')
+    ingredientsFooterElement.setAttribute('id', 'ingredientsFooter')
+
+    const addToMenuContainer = document.createElement('div')
+    addToMenuContainer.setAttribute('id', 'addToMenu')
+    addToMenuContainer.classList.add('verticallyCentered')
+    addToMenuContainer.appendChild(addToMenuButton)
+    ingredientsFooterElement.appendChild(addToMenuContainer)
+
+    const totalCurrencyElement = document.createElement('div')
+    totalCurrencyElement.setAttribute('id', 'ingredientsTotalPriceCurrency')
+    totalCurrencyElement.innerHTML = 'SEK'
+    ingredientsFooterElement.appendChild(totalCurrencyElement)
+
+    const totalPriceElement = document.createElement('div')
+    totalPriceElement.setAttribute('id', 'ingredientsTotalPrice')
+    totalPriceElement.innerHTML = `${totalPrice}.00`
+    ingredientsFooterElement.appendChild(totalPriceElement)
+    
+
+    ingredientsListElement.appendChild(ingredientsTitleElement)
+    ingredientsListElement.appendChild(ingredientsTableElement)
+    ingredientsListElement.appendChild(ingredientsFooterElement)
+    return ingredientsListElement
+  }
+
+  const render = (id) => {
+
+    _remove()
+
+    state.id = id
+    const dish = model.getDish(id)
+    const ingredientsList = model.getAllIngredientsForDish(id)
+    const numberOfGuests = model.getNumberOfGuests()
+    const totalPriceValue = model.getPriceForDish(id)
+
+    const createDishDescription = ({ name, image, description }) => {
+      const dishDescriptionElement = document.createElement('div')
+      dishDescriptionElement.setAttribute('id', 'dishDescription')
+
+      const dishTitleElement = document.createElement('div')
+      dishTitleElement.setAttribute('id', 'dishTitle')
+      const titleH2Element = document.createElement('h2')
+      titleH2Element.innerHTML = `${name}`
+      dishTitleElement.appendChild(titleH2Element)
+
+      const dishImageElement = document.createElement('div')
+      dishImageElement.setAttribute('id', 'dishImage')
+      const dishImage = document.createElement('img')
+      dishImage.src = `images/${image}`
+      dishImageElement.appendChild(dishImage)
+
+      const dishDescriptionTextElement = document.createElement('div')
+      dishDescriptionTextElement.setAttribute('id', 'dishDescriptionText')
+      const dishDescription = document.createElement('p')
+      dishDescription.innerHTML = description
+      dishDescriptionTextElement.appendChild(dishDescription)
+
+      dishDescriptionElement.appendChild(dishTitleElement)
+      dishDescriptionElement.appendChild(dishImageElement)
+      dishDescriptionElement.appendChild(dishDescriptionTextElement)
+      dishDescriptionElement.appendChild(backFromDishDetailsButton)
+
+      return dishDescriptionElement
+
+    }
+
+    container.appendChild(createDishDescription(dish))
+    container.appendChild(_createIngredientsList(ingredientsList, totalPriceValue, numberOfGuests))
+
+    const dishPreparationElement = document.createElement('div')
+    dishPreparationElement.setAttribute('id', 'dishPreparation')
+    
+    const titleH3Element = document.createElement('h3')
+    titleH3Element.innerHTML = 'Preparation'
+    dishPreparationElement.appendChild(titleH3Element)
+    
+    const dishPreparationTextElement = document.createElement('div')
+    dishPreparationTextElement.setAttribute('id', 'dishPreparationText')
+    const dishPreparationText = document.createElement('p')
+    dishPreparationText.innerHTML = 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Eget aliquet nibh praesent tristique. Quis hendrerit dolor magna eget. In cursus turpis massa tincidunt dui ut ornare. Sed adipiscing diam donec adipiscing tristique risus nec feugiat in. Dolor sit amet consectetur adipiscing elit. Ac tincidunt vitae semper quis lectus nulla at. Mauris augue neque gravida in fermentum. Egestas diam in arcu cursus euismod quis viverra nibh. Vulputate enim nulla aliquet porttitor lacus luctus accumsan. Quis varius quam quisque id. Non odio euismod lacinia at quis risus sed vulputate. Id cursus metus aliquam eleifend mi in. Tortor pretium viverra suspendisse potenti nullam ac tortor.'
+    dishPreparationTextElement.appendChild(dishPreparationText)
+    
+    dishPreparationElement.appendChild(dishPreparationTextElement)
+
+    container.appendChild(dishPreparationElement)
+    
+  }
+
+  const _remove = () => {
+    Array.from(container.childNodes).map(child => child.remove())
+  }
+
+  const _createUpdate = (model) => () => {
+    if(state.display === true) {
+      container.querySelector('#ingredientsList').remove()
+      const ingredientsList = model.getAllIngredientsForDish(state.id)
+      const totalPriceValue = model.getPriceForDish(state.id)
+      const numberOfGuests = model.getNumberOfGuests()
+      container.insertBefore(
+        _createIngredientsList(ingredientsList, totalPriceValue, numberOfGuests),
+        container.children[2]
+      )
+    }
+  }
+  const update = _createUpdate(model)
 
   const show = () => {
     if(state.display !== true) {
@@ -27,8 +201,14 @@ const createDishDetailsView = (container, model) => {
     container.style.display = 'none'
   }
 
+  model.addObserver(update)
+  
   return ({
+    getDishId,
     backFromDishDetailsButton,
+    addToMenuButton,
+    render,
+    update,
     show,
     hide
   })
diff --git a/js/view/DishResultView.js b/js/view/DishResultView.js
deleted file mode 100644
index a0af9be01..000000000
--- a/js/view/DishResultView.js
+++ /dev/null
@@ -1,58 +0,0 @@
-/*
-  * Dish Result View Object factory function
-
-  * @param {HTML DOM element} container - references the HTML parent element that contains the view.
-  * @param {Object} model - the reference to the Dinner Model
-*/
-
-const createDishResultView = (container, model) => {
-  
-  const dishSearchButton = container.querySelector('#dishSearchButton')
-  
-  const _dishSearchResultsElement = container.querySelector('#dishSearchResults')
-
-  const render = () => {
-
-    _remove()
-
-    const filter = container.querySelector('#dishSearchField').value
-    const type = container.querySelector('#dishTypeSelectField').value
-
-    const createDishResultElement = (imageUrl, name) => {
-      const dishResultElement = document.createElement('div')
-      dishResultElement.classList.add('dishResult')
-  
-      const dishResultImageContainerElement = document.createElement('div')
-      dishResultImageContainerElement.classList.add('dishResultImageContainer')
-  
-      const dishResultImageElement = document.createElement('img')
-      dishResultImageElement.classList.add('dishResultImage')
-      dishResultImageElement.src = imageUrl
-  
-      const dishResultNameElement = document.createElement('div')
-      dishResultNameElement.innerHTML = name
-  
-      dishResultImageContainerElement.appendChild(dishResultImageElement)
-      dishResultElement.appendChild(dishResultImageContainerElement)
-      dishResultElement.appendChild(dishResultNameElement)
-  
-      return dishResultElement;
-    }
-
-    model.getAllDishes(type, filter).map(({image, name}) => {
-      _dishSearchResultsElement.append(createDishResultElement(`images/${image}`, name))
-    })
-  }
-
-  const _remove = () => {
-    Array.from(_dishSearchResultsElement.childNodes).map(child => child.remove())
-  }
-
-  return ({
-    dishSearchButton,
-    render,
-    show,
-    hide
-  })
-
-}
\ No newline at end of file
diff --git a/js/view/DishSearchView.js b/js/view/DishSearchView.js
index c03c828b6..39361d332 100644
--- a/js/view/DishSearchView.js
+++ b/js/view/DishSearchView.js
@@ -10,10 +10,9 @@ const createDishSearchView = (container, model) => {
   const state = {
     display: false,
   }
-  
+
   const dishSearchButton = container.querySelector('#dishSearchButton')
-  
-  const _dishSearchResultsElement = container.querySelector('#dishSearchResults')
+  const dishSearchResultsElement = container.querySelector('#dishSearchResults')
 
   const render = () => {
 
@@ -22,34 +21,39 @@ const createDishSearchView = (container, model) => {
     const filter = container.querySelector('#dishSearchField').value
     const type = container.querySelector('#dishTypeSelectField').value
 
-    const createDishResultElement = (imageUrl, name) => {
+    const createDishResultElement = ({ image, name, id}) => {
+
       const dishResultElement = document.createElement('div')
       dishResultElement.classList.add('dishResult')
-  
+      dishResultElement.setAttribute('key', id)
+
       const dishResultImageContainerElement = document.createElement('div')
       dishResultImageContainerElement.classList.add('dishResultImageContainer')
-  
+      dishResultImageContainerElement.setAttribute('key', id)
+
       const dishResultImageElement = document.createElement('img')
       dishResultImageElement.classList.add('dishResultImage')
-      dishResultImageElement.src = imageUrl
-  
+      dishResultImageElement.src = `images/${image}`
+      dishResultImageElement.setAttribute('key', id)
+
       const dishResultNameElement = document.createElement('div')
       dishResultNameElement.innerHTML = name
-  
+      dishResultNameElement.setAttribute('key', id)
+
       dishResultImageContainerElement.appendChild(dishResultImageElement)
       dishResultElement.appendChild(dishResultImageContainerElement)
       dishResultElement.appendChild(dishResultNameElement)
-  
-      return dishResultElement;
+
+      return dishResultElement
     }
 
-    model.getAllDishes(type, filter).map(({image, name}) => {
-      _dishSearchResultsElement.append(createDishResultElement(`images/${image}`, name))
+    model.getAllDishes(type, filter).map(dish => {
+      dishSearchResultsElement.append(createDishResultElement(dish))
     })
   }
 
   const _remove = () => {
-    Array.from(_dishSearchResultsElement.childNodes).map(child => child.remove())
+    Array.from(dishSearchResultsElement.childNodes).map(child => child.remove())
   }
 
   const show = () => {
@@ -70,6 +74,7 @@ const createDishSearchView = (container, model) => {
 
   return ({
     dishSearchButton,
+    dishSearchResultsElement,
     render,
     show,
     hide

From 4e6a21dffc84917441ee2f0da3155c04560fa2a0 Mon Sep 17 00:00:00 2001
From: Andrew Szucs <andrew0szucs@gmail.com>
Date: Sat, 10 Feb 2018 23:04:31 +0100
Subject: [PATCH 23/45] Fix bug for missing controllers.

---
 js/app.js | 3 ---
 1 file changed, 3 deletions(-)

diff --git a/js/app.js b/js/app.js
index a84b15cfe..2295d5349 100644
--- a/js/app.js
+++ b/js/app.js
@@ -47,19 +47,16 @@
 		document.getElementById('statusBar'),
 		model
 	)
-	const statusBarController = createStatusBarController(statusBarView, model)
 
 	const priceSummaryView = createPriceSummaryView(
 		document.getElementById('priceSummary'),
 		model
 	)
-	const priceSummaryController = createPriceSummaryController(priceSummaryView, model)
 
 	const recipeSummaryView = createRecipeSummaryView(
 		document.getElementById('recipeSummaryView'),
 		model
 	)
-	const recipeSummaryController = createRecipeSummaryController(recipeSummaryView, model)
 
 	// General State Controller
 	const transitionFromMainViewToDishSearchView = () => {

From 7ff0178dfa4dcefbc78dfbfb6546d94bf9f61c71 Mon Sep 17 00:00:00 2001
From: Andrew Szucs <andrew0szucs@gmail.com>
Date: Mon, 12 Feb 2018 17:13:58 +0100
Subject: [PATCH 24/45] Move transition functions from general state
 controller, to the respective controllers

---
 index.html                               |  5 +-
 js/app.js                                | 96 +++++-------------------
 js/controllers/DishDetailsController.js  |  7 +-
 js/controllers/DishSearchController.js   | 12 ++-
 js/controllers/MainViewController.js     |  8 ++
 js/controllers/PriceSummaryController.js |  7 ++
 js/controllers/SidebarController.js      | 14 +++-
 js/controllers/StatusBarController.js    | 15 ++++
 js/view/RecipeSummaryView.js             |  4 +-
 9 files changed, 87 insertions(+), 81 deletions(-)
 create mode 100644 js/controllers/MainViewController.js
 create mode 100644 js/controllers/PriceSummaryController.js
 create mode 100644 js/controllers/StatusBarController.js

diff --git a/index.html b/index.html
index 15cf98e91..93c2564d1 100644
--- a/index.html
+++ b/index.html
@@ -162,6 +162,7 @@ <h2 id="statusTitle">My Dinner: <span id="numberOfGuests">3</span> people</h2>
     <script src="js/lib/toggleSidebar.js"></script>
     <!-- Here you should include JS code for your other views -->
     <script src="js/view/MainView.js"></script>
+    <script src="js/controllers/MainViewController.js"></script>
 
     <script src="js/view/SidebarView.js"></script>
     <script src="js/controllers/SidebarController.js"></script>
@@ -173,8 +174,10 @@ <h2 id="statusTitle">My Dinner: <span id="numberOfGuests">3</span> people</h2>
     <script src="js/controllers/DishDetailsController.js"></script>
     
     <script src="js/view/StatusBarView.js"></script>
-
+    <script src="js/controllers/StatusBarController.js"></script>
+    
     <script src="js/view/PriceSummaryView.js"></script>
+    <script src="js/controllers/PriceSummaryController.js"></script>
     
     <script src="js/view/RecipeSummaryView.js"></script>
 
diff --git a/js/app.js b/js/app.js
index 2295d5349..96d362e16 100644
--- a/js/app.js
+++ b/js/app.js
@@ -1,119 +1,63 @@
 (function () {
-
-	// Curry Functions Tutorial
-	// const func2 = (one,two) => {
-  //   return one + two
-  // }
-  // const func = (one, two) => (one + two)
-
-  // const curryFunc = (zero) => (one, two) => (zero + one + two)
-  // const curryFunc2 = (zero) => {
-  //   return (one, two) => {
-  //     return zero + one + two
-  //   }
-  // }
 	
 	// Model
 	const model = createDinnerModel()
-	model.addDishToMenu(1)
-	model.addDishToMenu(100)
-	model.addDishToMenu(200)
 
 	// Views + Controllers
 	const mainView = createMainView(
 		document.getElementById('mainView'),
 		model
 	)
-
+	
 	const sidebarView = createSidebarView(
 		document.getElementById('sidebarView'),
 		model
 	)
-	const sidebarController = createSidebarController(sidebarView, model)
 	
 	const dishSearchView = createDishSearchView(
 		document.getElementById('dishSearchView'),
 		model
 	)
-	const dishSearchController = createDishSearchController(dishSearchView, model)
-
+	
 	const dishDetailsView = createDishDetailsView(
 		document.getElementById('dishDetailsView'),
 		model
 	)
-	const dishDetailsController = createDishDetailsController(dishDetailsView, model)
 	
 	const statusBarView = createStatusBarView(
 		document.getElementById('statusBar'),
 		model
 	)
-
+	
 	const priceSummaryView = createPriceSummaryView(
 		document.getElementById('priceSummary'),
 		model
 	)
-
+	
 	const recipeSummaryView = createRecipeSummaryView(
 		document.getElementById('recipeSummaryView'),
 		model
 	)
-
+	
 	// General State Controller
-	const transitionFromMainViewToDishSearchView = () => {
-		mainView.hide()
-		sidebarView.show()
-		dishSearchView.show()
-	}
-
-	const transitionFromDishSearchViewToDishDetailsView = (event) => {
-		
-		const clickedElement = event.target
-		const clickedDishId = clickedElement.getAttribute('key')
-		if(clickedDishId !== null && clickedDishId !== undefined) {
-			dishSearchView.hide()
-			dishDetailsView.render(Number(clickedDishId))
-			dishDetailsView.show()
-		}
-		
-	}
-
-	const transitionFromDishDetailsViewToDishSearchView = () => {
-		dishDetailsView.hide()
-		dishSearchView.show()
-	}
-
-	const transitionFromDishSearchViewToPriceSummaryView = () => {
-		sidebarView.hide()
-		dishSearchView.hide()
-		dishDetailsView.hide()
-
-		statusBarView.show()
-		priceSummaryView.show()
-		recipeSummaryView.hide()
-	}
-
-	const transitionFromPriceSummaryViewToDishSearchView = () => {
-		statusBarView.hide()
-		priceSummaryView.hide()
-		recipeSummaryView.hide()
-
-		sidebarView.show()
-		dishSearchView.show()
-		dishDetailsView.hide()
-	}
-
-	const transitionFromPriceSummaryViewToRecipeSummaryView = () => {
-		priceSummaryView.hide()
-		recipeSummaryView.show()
+	const generalStateController = {
+		mainView,
+		sidebarView,
+		statusBarView,
+		priceSummaryView,
+		dishDetailsView,
+		dishSearchView,
+		recipeSummaryView,
 	}
 
-	mainView.startButton.onclick = transitionFromMainViewToDishSearchView
-	sidebarView.confirmMenuButton.onclick = transitionFromDishSearchViewToPriceSummaryView
-	statusBarView.backFromMenuSummaryButton.onclick = transitionFromPriceSummaryViewToDishSearchView
-	dishDetailsView.backFromDishDetailsButton.onclick = transitionFromDishDetailsViewToDishSearchView
-	priceSummaryView.printButton.onclick = transitionFromPriceSummaryViewToRecipeSummaryView
-	dishSearchView.dishSearchResultsElement.onclick = transitionFromDishSearchViewToDishDetailsView
+	const mainViewController = createMainViewController(mainView, model, generalStateController)
+	const sidebarController = createSidebarController(sidebarView, model, generalStateController)
+	const statusBarController = createStatusBarController(statusBarView, model, generalStateController)
+	const priceSummaryController = createPriceSummaryController(priceSummaryView, model, generalStateController)
+	const dishDetailsController = createDishDetailsController(dishDetailsView, model, generalStateController)
+	const dishSearchController = createDishSearchController(dishSearchView, model, generalStateController)
 
+	// Initial state
 	mainView.show()
 	sidebarView.hide()
 	dishSearchView.hide()
diff --git a/js/controllers/DishDetailsController.js b/js/controllers/DishDetailsController.js
index 24f4afa2d..20a45c660 100644
--- a/js/controllers/DishDetailsController.js
+++ b/js/controllers/DishDetailsController.js
@@ -1,6 +1,11 @@
-const createDishDetailsController = (view, model) => {
+const createDishDetailsController = (view, model, { dishDetailsView, dishSearchView }) => {
   view.addToMenuButton.onclick = () => {
     const dishId = view.getDishId()
     model.addDishToMenu(dishId)
   }
+
+  view.backFromDishDetailsButton.onclick = () => {
+		dishDetailsView.hide()
+		dishSearchView.show()
+	}
 }
\ No newline at end of file
diff --git a/js/controllers/DishSearchController.js b/js/controllers/DishSearchController.js
index 557f8bfdd..8049e6001 100644
--- a/js/controllers/DishSearchController.js
+++ b/js/controllers/DishSearchController.js
@@ -1,3 +1,13 @@
-const createDishSearchController = (view, model) => {
+const createDishSearchController = (view, model, { dishSearchView, dishDetailsView }) => {
   view.dishSearchButton.onclick = view.render
+
+  view.dishSearchResultsElement.onclick = (event) => {
+		const clickedElement = event.target
+		const clickedDishId = clickedElement.getAttribute('key')
+		if(clickedDishId !== null && clickedDishId !== undefined) {
+			dishSearchView.hide()
+			dishDetailsView.render(Number(clickedDishId))
+			dishDetailsView.show()
+		}
+	}
 }
\ No newline at end of file
diff --git a/js/controllers/MainViewController.js b/js/controllers/MainViewController.js
new file mode 100644
index 000000000..a15447b3e
--- /dev/null
+++ b/js/controllers/MainViewController.js
@@ -0,0 +1,8 @@
+const createMainViewController = (view, model, { sidebarView, dishSearchView }) => {
+
+  view.startButton.onclick = () => {
+    view.hide()
+    sidebarView.show()
+    dishSearchView.show()
+  }
+}
\ No newline at end of file
diff --git a/js/controllers/PriceSummaryController.js b/js/controllers/PriceSummaryController.js
new file mode 100644
index 000000000..273bbce2e
--- /dev/null
+++ b/js/controllers/PriceSummaryController.js
@@ -0,0 +1,7 @@
+const createPriceSummaryController = (view, model, { priceSummaryView, recipeSummaryView }) => {
+
+  view.printButton.onclick = () => {
+		priceSummaryView.hide()
+		recipeSummaryView.show()
+	}
+}
\ No newline at end of file
diff --git a/js/controllers/SidebarController.js b/js/controllers/SidebarController.js
index 047179dde..b75cabb2b 100644
--- a/js/controllers/SidebarController.js
+++ b/js/controllers/SidebarController.js
@@ -1,8 +1,20 @@
-const createSidebarController = (view, model) => {
+const createSidebarController = (view, model, { 
+  sidebarView, dishSearchView, dishDetailsView, statusBarView, priceSummaryView, recipeSummaryView
+}) => {
 
   view.guestNumber.oninput = (event) => {
     const newGuestNumber = event.target.value
     model.setNumberOfGuests(newGuestNumber)
   }
+
+  view.confirmMenuButton.onclick = () => {
+		sidebarView.hide()
+		dishSearchView.hide()
+		dishDetailsView.hide()
+
+		statusBarView.show()
+		priceSummaryView.show()
+		recipeSummaryView.hide()
+	}
   
 }
\ No newline at end of file
diff --git a/js/controllers/StatusBarController.js b/js/controllers/StatusBarController.js
new file mode 100644
index 000000000..a51e3983c
--- /dev/null
+++ b/js/controllers/StatusBarController.js
@@ -0,0 +1,15 @@
+const createStatusBarController = (view, model, { 
+  statusBarView, priceSummaryView, recipeSummaryView, sidebarView, dishSearchView, dishDetailsView
+}) => {
+
+  view.backFromMenuSummaryButton.onclick = () => {
+		statusBarView.hide()
+		priceSummaryView.hide()
+		recipeSummaryView.hide()
+
+		sidebarView.show()
+		dishSearchView.show()
+		dishDetailsView.hide()
+	}
+
+}
\ No newline at end of file
diff --git a/js/view/RecipeSummaryView.js b/js/view/RecipeSummaryView.js
index d91b6d447..d75778ff4 100644
--- a/js/view/RecipeSummaryView.js
+++ b/js/view/RecipeSummaryView.js
@@ -68,7 +68,9 @@ const createRecipeSummaryView = (container, model) => {
 
     Object.keys(menu).map(type => {
       const dish = menu[type]
-      container.append(createRecipeElement(dish))
+      if(dish !== undefined) {
+        container.append(createRecipeElement(dish))
+      }
     })
   }
   const update = _createUpdate(model)

From c5702066cba9a3781cd173501a20cfc634cabdd5 Mon Sep 17 00:00:00 2001
From: Nina Laribi <ninalaribi@Bilawals-MacBook-Pro.local>
Date: Thu, 22 Feb 2018 22:46:34 +0100
Subject: [PATCH 25/45] Added apiConfig

---
 index.html          | 67 +++++++++++++++++++++++----------------------
 js/lib/apiConfig.js |  3 ++
 2 files changed, 37 insertions(+), 33 deletions(-)
 create mode 100644 js/lib/apiConfig.js

diff --git a/index.html b/index.html
index 93c2564d1..36f4f7f2f 100644
--- a/index.html
+++ b/index.html
@@ -16,9 +16,9 @@
       <div id="header" class="verticallyCentered">
         <h1>Dinner Planner</h1>
       </div>
-      
+
       <div id="content">
-        
+
         <div id="mainView">
           <div id="welcomeText">
             Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
@@ -27,7 +27,7 @@ <h1>Dinner Planner</h1>
         </div>
 
         <div id="appView">
-          
+
           <div id="sidebarView">
             <div id="titleBar">
               <h4 id="titleBarTitle">My Dinner</h4>
@@ -38,67 +38,67 @@ <h4 id="titleBarTitle">My Dinner</h4>
                 Expand
               </button>
             </div>
-    
+
             <div id="sideBarContent" class="collapseContent hideOnMobile">
               <div id="guestSelector" class="show">
                 <label for="guestNumber">Guests:</label>
                 <input id="guestNumber" type="number" value="1">
               </div>
-          
+
               <div id="dishTable" class="show">
                 <div id="tableHeader">
                   <div id="tableName">Dish name</div>
                   <div id="tableCost">Cost</div>
                 </div>
-      
+
                 <div id="tableContent">
-                  
+
                 </div>
-      
+
                 <div id="tableFooter">
                   <div id="tableTotalPrice" class="totalPrice">
                     <span class="totalPriceCurrency">SEK</span> <span id="totalPriceValue">77.20</span>
                   </div>
                 </div>
               </div>
-    
+
               <div id="confirmButtonContainer" class="show">
                 <button class="primaryButton" id="confirmMenuButton">Confirm Dinner</button>
               </div>
-    
+
             </div>
-    
+
           </div>
 
           <div id="sectionView">
 
             <div id="dishSearchView">
-          
+
               <h2 id="dishSearchTitle">Find a dish</h2>
-  
+
               <div id="dishSearchForm">
-      
+
                 <input type="search" id="dishSearchField" name="dishSearchField" placeholder="Enter keywords">
-      
+
                 <select id="dishTypeSelectField" name="dishTypeSelectField">
                   <option value="all" selected>All</option>
                   <option value="starter">Starter</option>
                   <option value="main dish">Main Dish</option>
                   <option value="dessert">Dessert</option>
                 </select>
-                
+
                 <button id="dishSearchButton" class="secondaryButton">Search</button>
-      
+
               </div>
-      
+
               <div id="dishSearchResults">
-                
+
               </div>
-  
+
             </div>
 
             <div id="dishDetailsView">
-                 
+
             </div>
 
           </div>
@@ -106,7 +106,7 @@ <h2 id="dishSearchTitle">Find a dish</h2>
         </div>
 
         <div id="menuSummaryView">
-              
+
           <div id="statusBar">
             <h2 id="statusTitle">My Dinner: <span id="numberOfGuests">3</span> people</h2>
             <button id="backFromMenuSummaryButton" class="backButton primaryButton" >Go back and edit dinner</button>
@@ -119,22 +119,22 @@ <h2 id="statusTitle">My Dinner: <span id="numberOfGuests">3</span> people</h2>
               <div id="dishListContainer">
 
                 <div id="starter">
-                  
+
                 </div>
-        
+
                 <div id="mainCourse">
-                  
+
                 </div>
-        
+
                 <div id="dessert">
 
                 </div>
-        
+
                 <div id="totalPrice" class="dishItemContainer">
                   <div class="verticallyCentered dishImage"></div>
                   <p class="dishName">Total:</p>
                   <p class="dishPrice">
-                    <span class="value" id="totalPriceValue">0.00</span> 
+                    <span class="value" id="totalPriceValue">0.00</span>
                     <span class="currency">SEK</span>
                   </p>
                 </div>
@@ -154,11 +154,12 @@ <h2 id="statusTitle">My Dinner: <span id="numberOfGuests">3</span> people</h2>
           </div>
 
         </div>
-        
+
       </div>
 
     </div>
 
+    <script src="js/lib/apiConfig.js"></script>
     <script src="js/lib/toggleSidebar.js"></script>
     <!-- Here you should include JS code for your other views -->
     <script src="js/view/MainView.js"></script>
@@ -172,13 +173,13 @@ <h2 id="statusTitle">My Dinner: <span id="numberOfGuests">3</span> people</h2>
 
     <script src="js/view/DishDetailsView.js"></script>
     <script src="js/controllers/DishDetailsController.js"></script>
-    
+
     <script src="js/view/StatusBarView.js"></script>
     <script src="js/controllers/StatusBarController.js"></script>
-    
+
     <script src="js/view/PriceSummaryView.js"></script>
     <script src="js/controllers/PriceSummaryController.js"></script>
-    
+
     <script src="js/view/RecipeSummaryView.js"></script>
 
     <script src="js/model/dinnerModel.js"></script>
@@ -186,4 +187,4 @@ <h2 id="statusTitle">My Dinner: <span id="numberOfGuests">3</span> people</h2>
     <script src="js/app.js"></script>
 
   </body>
-</html>
\ No newline at end of file
+</html>
diff --git a/js/lib/apiConfig.js b/js/lib/apiConfig.js
new file mode 100644
index 000000000..a974c9bef
--- /dev/null
+++ b/js/lib/apiConfig.js
@@ -0,0 +1,3 @@
+const apiConfig = {
+  apiKey: 'Qu9grxVNWpmshA4Kl9pTwyiJxVGUp1lKzrZjsnghQMkFkfA4LB'
+}

From b84e9b9328d7f92eadc5d4bce39920929a0122d0 Mon Sep 17 00:00:00 2001
From: Nina Laribi <ninalaribi@Bilawals-MacBook-Pro.local>
Date: Thu, 22 Feb 2018 23:25:02 +0100
Subject: [PATCH 26/45] Converted getAllDishes/getDishes into Promise-based

---
 js/controllers/StatusBarController.js |   4 +-
 js/model/dinnerModel.js               | 112 ++++++++++++++---------
 js/view/DishDetailsView.js            | 123 +++++++++++++-------------
 js/view/DishSearchView.js             |  10 ++-
 4 files changed, 140 insertions(+), 109 deletions(-)

diff --git a/js/controllers/StatusBarController.js b/js/controllers/StatusBarController.js
index a51e3983c..96aeb8d42 100644
--- a/js/controllers/StatusBarController.js
+++ b/js/controllers/StatusBarController.js
@@ -1,4 +1,4 @@
-const createStatusBarController = (view, model, { 
+const createStatusBarController = (view, model, {
   statusBarView, priceSummaryView, recipeSummaryView, sidebarView, dishSearchView, dishDetailsView
 }) => {
 
@@ -12,4 +12,4 @@ const createStatusBarController = (view, model, {
 		dishDetailsView.hide()
 	}
 
-}
\ No newline at end of file
+}
diff --git a/js/model/dinnerModel.js b/js/model/dinnerModel.js
index 322144ba9..cbb460508 100644
--- a/js/model/dinnerModel.js
+++ b/js/model/dinnerModel.js
@@ -1,6 +1,6 @@
 //DinnerModel Object factory function
 const createDinnerModel = () => {
-	
+
 	// the data structure that will hold number of guest
 	// and selected dishes for the dinner menu
 	const state = {
@@ -8,7 +8,7 @@ const createDinnerModel = () => {
 		menu: [],
 		observers: []
 	}
-	
+
 	const addObserver = (observer) => {
 		state.observers.push(observer)
 	}
@@ -27,13 +27,13 @@ const createDinnerModel = () => {
 	}
 
 	const getNumberOfGuests = () => state.numberOfGuests
-	
-	// Returns the dish that is on the menu for the selected type 
+
+	// Returns the dish that is on the menu for the selected type
 	const getSelectedDish = type => state.menu.find(dish => dish.type === type)
 
 	// Returns all the dishes on the menu.
 	const getFullMenu = () => state.menu
-	
+
 	// Returns all ingredients for all the dishes on the menu.
 	const getAllIngredients = () => state.menu.reduce((acc, curr) => acc.concat(curr.ingredients), [])
 
@@ -58,7 +58,7 @@ const createDinnerModel = () => {
 		acc += state.numberOfGuests * curr.price
 		return acc
 	}, 0)
-	
+
 	// Adds the passed dish to the menu. If the dish of that type already exists on the menu
 	// it is removed from the menu and the new one added.
 	const addDishToMenu = id => {
@@ -80,30 +80,58 @@ const createDinnerModel = () => {
 	// you can use the filter argument to filter out the dish by name or ingredient (use for search)
 	// if you don't pass any filter all the dishes will be returned
 	const getAllDishes = (type, filter) => {
-		
-		return dishes.filter(dish => {
-			
-			let typeMatch = dish.type === type
-			if(type === 'all') {
-				typeMatch = true
+		return new Promise((resolve, reject) => {
+			let options = {
+				headers: {
+					'X-Mashape-Key': apiConfig.apiKey
+				}
+			};
+
+			let queryParams = [`instructionsRequired=true`];
+
+			if (type !== 'all') {
+				queryParams.push(`type=${encodeURIComponent(type)}`);
 			}
-			
-			let filterMatch = true
-			if(filter !== undefined) {
-				const filterString = filter.toLowerCase()
-				const nameMatch = dish.name.toLowerCase().includes(filterString)
-				const ingredientMatch = dish.ingredients.some(ingredient => 
-					ingredient.name.toLowerCase().includes(filterString)
-				)
-				filterMatch = nameMatch || ingredientMatch
+
+			if (filter) {
+				queryParams.push(`filter=${encodeURIComponent(filter)}`);
 			}
-			
-			return typeMatch && filterMatch
-		})
+
+			fetch(`https://spoonacular-recipe-food-nutrition-v1.p.mashape.com/recipes/search?${queryParams.join('&')}`, options)
+				.then(res => res.json())
+				.then(({ results }) => {
+					resolve(results);
+				})
+				.catch(err => {
+					reject(err);
+				});
+		});
 	}
 
 	//function that returns a dish of specific ID
-	const getDish = id => dishes.find(dish => dish.id === id)
+	const getDish = id => {
+		return new Promise((resolve, reject) => {
+			let options = {
+				headers: {
+					'X-Mashape-Key': apiConfig.apiKey
+				}
+			};
+
+			let queryParams = [
+				`includeNutrition=true`,
+				`id=${id}`
+			];
+
+			fetch(`https://spoonacular-recipe-food-nutrition-v1.p.mashape.com/recipes/{id}/information?${queryParams.join('&')}`, options)
+				.then(res => res.json())
+				.then(({ results }) => {
+					resolve(results);
+				})
+				.catch(err => {
+					reject(err);
+				});
+		});
+	};
 
 	return ({
 		addObserver,
@@ -124,23 +152,23 @@ const createDinnerModel = () => {
 
 }
 
-// the dishes variable contains an array of all the 
+// the dishes variable contains an array of all the
 // dishes in the database. each dish has id, name, type,
 // image (name of the image file), description and
-// array of ingredients. Each ingredient has name, 
-// quantity (a number), price (a number) and unit (string 
+// array of ingredients. Each ingredient has name,
+// quantity (a number), price (a number) and unit (string
 // defining the unit i.e. "g", "slices", "ml". Unit
 // can sometimes be empty like in the example of eggs where
 // you just say "5 eggs" and not "5 pieces of eggs" or anything else.
 const dishes = [
-	
+
 	{
 	'id':1,
 	'name':'French toast',
 	'type':'starter',
 	'image':'toast.jpg',
 	'description':"In a large mixing bowl, beat the eggs. Add the milk, brown sugar and nutmeg; stir well to combine. Soak bread slices in the egg mixture until saturated. Heat a lightly oiled griddle or frying pan over medium high heat. Brown slices on both sides, sprinkle with cinnamon and serve hot.",
-	'ingredients':[{ 
+	'ingredients':[{
 		'name':'eggs',
 		'quantity':0.5,
 		'unit':'',
@@ -167,15 +195,15 @@ const dishes = [
 		'price':2
 		}]
 	}
-	
-	
+
+
 	,{
 	'id':2,
 	'name':'Sourdough Starter',
 	'type':'starter',
 	'image':'sourdough.jpg',
 	'description':"Here is how you make it... Lore ipsum...",
-	'ingredients':[{ 
+	'ingredients':[{
 		'name':'active dry yeast',
 		'quantity':0.5,
 		'unit':'g',
@@ -197,7 +225,7 @@ const dishes = [
 	'type':'starter',
 	'image':'bakedbrie.jpg',
 	'description':"Here is how you make it... Lore ipsum...",
-	'ingredients':[{ 
+	'ingredients':[{
 		'name':'round Brie cheese',
 		'quantity':10,
 		'unit':'g',
@@ -219,7 +247,7 @@ const dishes = [
 	'type':'main dish',
 	'image':'meatballs.jpg',
 	'description':"Preheat an oven to 400 degrees F (200 degrees C). Place the beef into a mixing bowl, and season with salt, onion, garlic salt, Italian seasoning, oregano, red pepper flakes, hot pepper sauce, and Worcestershire sauce; mix well. Add the milk, Parmesan cheese, and bread crumbs. Mix until evenly blended, then form into 1 1/2-inch meatballs, and place onto a baking sheet. Bake in the preheated oven until no longer pink in the center, 20 to 25 minutes.",
-	'ingredients':[{ 
+	'ingredients':[{
 		'name':'extra lean ground beef',
 		'quantity':115,
 		'unit':'g',
@@ -281,7 +309,7 @@ const dishes = [
 	'type':'main dish',
 	'image':'bakedbrie.jpg',
 	'description':"Here is how you make it... Lore ipsum...",
-	'ingredients':[{ 
+	'ingredients':[{
 		'name':'ingredient 1',
 		'quantity':1,
 		'unit':'pieces',
@@ -303,7 +331,7 @@ const dishes = [
 	'type':'main dish',
 	'image':'meatballs.jpg',
 	'description':"Here is how you make it... Lore ipsum...",
-	'ingredients':[{ 
+	'ingredients':[{
 		'name':'ingredient 1',
 		'quantity':2,
 		'unit':'pieces',
@@ -325,7 +353,7 @@ const dishes = [
 	'type':'main dish',
 	'image':'meatballs.jpg',
 	'description':"Here is how you make it... Lore ipsum...",
-	'ingredients':[{ 
+	'ingredients':[{
 		'name':'ingredient 1',
 		'quantity':1,
 		'unit':'pieces',
@@ -347,7 +375,7 @@ const dishes = [
 	'type':'dessert',
 	'image':'icecream.jpg',
 	'description':"Here is how you make it... Lore ipsum...",
-	'ingredients':[{ 
+	'ingredients':[{
 		'name':'ice cream',
 		'quantity':100,
 		'unit':'ml',
@@ -359,7 +387,7 @@ const dishes = [
 	'type':'dessert',
 	'image':'icecream.jpg',
 	'description':"Here is how you make it... Lore ipsum...",
-	'ingredients':[{ 
+	'ingredients':[{
 		'name':'ice cream',
 		'quantity':100,
 		'unit':'ml',
@@ -371,11 +399,11 @@ const dishes = [
 	'type':'dessert',
 	'image':'icecream.jpg',
 	'description':"Here is how you make it... Lore ipsum...",
-	'ingredients':[{ 
+	'ingredients':[{
 		'name':'ice cream',
 		'quantity':100,
 		'unit':'ml',
 		'price':6
 		}]
 	}
-]
\ No newline at end of file
+]
diff --git a/js/view/DishDetailsView.js b/js/view/DishDetailsView.js
index ac7856ad0..85efde23d 100644
--- a/js/view/DishDetailsView.js
+++ b/js/view/DishDetailsView.js
@@ -24,7 +24,7 @@ const createDishDetailsView = (container, model) => {
     backButton.innerHTML = 'Back to Search'
     return backButton
   }
-  
+
   const _createAddButton = (id) => {
     const addButton = document.createElement('button')
     addButton.setAttribute('id', id)
@@ -48,7 +48,7 @@ const createDishDetailsView = (container, model) => {
 
     const ingredientsTableElement = document.createElement('div')
     ingredientsTableElement.setAttribute('id', 'ingredientsTable')
-    
+
     const createIngredientRow = ({ name, quantity, unit, price}) => {
 
       const ingredientRowElement = document.createElement('div')
@@ -58,12 +58,12 @@ const createDishDetailsView = (container, model) => {
       quantityCell.classList.add('ingredientQuantity')
       quantityCell.innerHTML = `${quantity} ${unit}`
       ingredientRowElement.appendChild(quantityCell)
-      
+
       const nameCell = document.createElement('div')
       nameCell.classList.add('ingredientName')
       nameCell.innerHTML = name
       ingredientRowElement.appendChild(nameCell)
-      
+
       const currencyCell = document.createElement('div')
       currencyCell.classList.add('ingredientCurrency')
       currencyCell.innerHTML = 'SEK'
@@ -79,7 +79,7 @@ const createDishDetailsView = (container, model) => {
     ingredients.map(ingredient => {
       ingredientsTableElement.appendChild(createIngredientRow(ingredient))
     })
-    
+
     const ingredientsFooterElement = document.createElement('div')
     ingredientsFooterElement.setAttribute('id', 'ingredientsFooter')
 
@@ -98,7 +98,7 @@ const createDishDetailsView = (container, model) => {
     totalPriceElement.setAttribute('id', 'ingredientsTotalPrice')
     totalPriceElement.innerHTML = `${totalPrice}.00`
     ingredientsFooterElement.appendChild(totalPriceElement)
-    
+
 
     ingredientsListElement.appendChild(ingredientsTitleElement)
     ingredientsListElement.appendChild(ingredientsTableElement)
@@ -111,62 +111,63 @@ const createDishDetailsView = (container, model) => {
     _remove()
 
     state.id = id
-    const dish = model.getDish(id)
-    const ingredientsList = model.getAllIngredientsForDish(id)
-    const numberOfGuests = model.getNumberOfGuests()
-    const totalPriceValue = model.getPriceForDish(id)
-
-    const createDishDescription = ({ name, image, description }) => {
-      const dishDescriptionElement = document.createElement('div')
-      dishDescriptionElement.setAttribute('id', 'dishDescription')
-
-      const dishTitleElement = document.createElement('div')
-      dishTitleElement.setAttribute('id', 'dishTitle')
-      const titleH2Element = document.createElement('h2')
-      titleH2Element.innerHTML = `${name}`
-      dishTitleElement.appendChild(titleH2Element)
-
-      const dishImageElement = document.createElement('div')
-      dishImageElement.setAttribute('id', 'dishImage')
-      const dishImage = document.createElement('img')
-      dishImage.src = `images/${image}`
-      dishImageElement.appendChild(dishImage)
-
-      const dishDescriptionTextElement = document.createElement('div')
-      dishDescriptionTextElement.setAttribute('id', 'dishDescriptionText')
-      const dishDescription = document.createElement('p')
-      dishDescription.innerHTML = description
-      dishDescriptionTextElement.appendChild(dishDescription)
-
-      dishDescriptionElement.appendChild(dishTitleElement)
-      dishDescriptionElement.appendChild(dishImageElement)
-      dishDescriptionElement.appendChild(dishDescriptionTextElement)
-      dishDescriptionElement.appendChild(backFromDishDetailsButton)
-
-      return dishDescriptionElement
 
-    }
+    model.getDish(id).then(dish => {
+      const ingredientsList = model.getAllIngredientsForDish(id)
+      const numberOfGuests = model.getNumberOfGuests()
+      const totalPriceValue = model.getPriceForDish(id)
 
-    container.appendChild(createDishDescription(dish))
-    container.appendChild(_createIngredientsList(ingredientsList, totalPriceValue, numberOfGuests))
+      const createDishDescription = ({ name, image, description }) => {
+        const dishDescriptionElement = document.createElement('div')
+        dishDescriptionElement.setAttribute('id', 'dishDescription')
 
-    const dishPreparationElement = document.createElement('div')
-    dishPreparationElement.setAttribute('id', 'dishPreparation')
-    
-    const titleH3Element = document.createElement('h3')
-    titleH3Element.innerHTML = 'Preparation'
-    dishPreparationElement.appendChild(titleH3Element)
-    
-    const dishPreparationTextElement = document.createElement('div')
-    dishPreparationTextElement.setAttribute('id', 'dishPreparationText')
-    const dishPreparationText = document.createElement('p')
-    dishPreparationText.innerHTML = 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Eget aliquet nibh praesent tristique. Quis hendrerit dolor magna eget. In cursus turpis massa tincidunt dui ut ornare. Sed adipiscing diam donec adipiscing tristique risus nec feugiat in. Dolor sit amet consectetur adipiscing elit. Ac tincidunt vitae semper quis lectus nulla at. Mauris augue neque gravida in fermentum. Egestas diam in arcu cursus euismod quis viverra nibh. Vulputate enim nulla aliquet porttitor lacus luctus accumsan. Quis varius quam quisque id. Non odio euismod lacinia at quis risus sed vulputate. Id cursus metus aliquam eleifend mi in. Tortor pretium viverra suspendisse potenti nullam ac tortor.'
-    dishPreparationTextElement.appendChild(dishPreparationText)
-    
-    dishPreparationElement.appendChild(dishPreparationTextElement)
-
-    container.appendChild(dishPreparationElement)
-    
+        const dishTitleElement = document.createElement('div')
+        dishTitleElement.setAttribute('id', 'dishTitle')
+        const titleH2Element = document.createElement('h2')
+        titleH2Element.innerHTML = `${name}`
+        dishTitleElement.appendChild(titleH2Element)
+
+        const dishImageElement = document.createElement('div')
+        dishImageElement.setAttribute('id', 'dishImage')
+        const dishImage = document.createElement('img')
+        dishImage.src = `images/${image}`
+        dishImageElement.appendChild(dishImage)
+
+        const dishDescriptionTextElement = document.createElement('div')
+        dishDescriptionTextElement.setAttribute('id', 'dishDescriptionText')
+        const dishDescription = document.createElement('p')
+        dishDescription.innerHTML = description
+        dishDescriptionTextElement.appendChild(dishDescription)
+
+        dishDescriptionElement.appendChild(dishTitleElement)
+        dishDescriptionElement.appendChild(dishImageElement)
+        dishDescriptionElement.appendChild(dishDescriptionTextElement)
+        dishDescriptionElement.appendChild(backFromDishDetailsButton)
+
+        return dishDescriptionElement
+
+      }
+
+      container.appendChild(createDishDescription(dish))
+      container.appendChild(_createIngredientsList(ingredientsList, totalPriceValue, numberOfGuests))
+
+      const dishPreparationElement = document.createElement('div')
+      dishPreparationElement.setAttribute('id', 'dishPreparation')
+
+      const titleH3Element = document.createElement('h3')
+      titleH3Element.innerHTML = 'Preparation'
+      dishPreparationElement.appendChild(titleH3Element)
+
+      const dishPreparationTextElement = document.createElement('div')
+      dishPreparationTextElement.setAttribute('id', 'dishPreparationText')
+      const dishPreparationText = document.createElement('p')
+      dishPreparationText.innerHTML = 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Eget aliquet nibh praesent tristique. Quis hendrerit dolor magna eget. In cursus turpis massa tincidunt dui ut ornare. Sed adipiscing diam donec adipiscing tristique risus nec feugiat in. Dolor sit amet consectetur adipiscing elit. Ac tincidunt vitae semper quis lectus nulla at. Mauris augue neque gravida in fermentum. Egestas diam in arcu cursus euismod quis viverra nibh. Vulputate enim nulla aliquet porttitor lacus luctus accumsan. Quis varius quam quisque id. Non odio euismod lacinia at quis risus sed vulputate. Id cursus metus aliquam eleifend mi in. Tortor pretium viverra suspendisse potenti nullam ac tortor.'
+      dishPreparationTextElement.appendChild(dishPreparationText)
+
+      dishPreparationElement.appendChild(dishPreparationTextElement)
+
+      container.appendChild(dishPreparationElement)
+    });
   }
 
   const _remove = () => {
@@ -202,7 +203,7 @@ const createDishDetailsView = (container, model) => {
   }
 
   model.addObserver(update)
-  
+
   return ({
     getDishId,
     backFromDishDetailsButton,
@@ -212,4 +213,4 @@ const createDishDetailsView = (container, model) => {
     show,
     hide
   })
-}
\ No newline at end of file
+}
diff --git a/js/view/DishSearchView.js b/js/view/DishSearchView.js
index 39361d332..10f29e950 100644
--- a/js/view/DishSearchView.js
+++ b/js/view/DishSearchView.js
@@ -47,9 +47,11 @@ const createDishSearchView = (container, model) => {
       return dishResultElement
     }
 
-    model.getAllDishes(type, filter).map(dish => {
-      dishSearchResultsElement.append(createDishResultElement(dish))
-    })
+    model.getAllDishes(type, filter).then(dishes => {
+      dishes.map(dish => {
+        dishSearchResultsElement.append(createDishResultElement(dish))
+      })
+    });
   }
 
   const _remove = () => {
@@ -80,4 +82,4 @@ const createDishSearchView = (container, model) => {
     hide
   })
 
-}
\ No newline at end of file
+}

From 562087e1841a68a7053fcae54123d807b7d7f159 Mon Sep 17 00:00:00 2001
From: Nina Laribi <ninalaribi@Bilawals-MacBook-Pro.local>
Date: Thu, 22 Feb 2018 23:34:20 +0100
Subject: [PATCH 27/45] Adjusted search view to work with getAllDishes() and
 the API

---
 js/view/DishSearchView.js |  5 ++---
 styles/main.css           | 32 ++++++++++++++++++--------------
 2 files changed, 20 insertions(+), 17 deletions(-)

diff --git a/js/view/DishSearchView.js b/js/view/DishSearchView.js
index 10f29e950..827a89c40 100644
--- a/js/view/DishSearchView.js
+++ b/js/view/DishSearchView.js
@@ -21,8 +21,7 @@ const createDishSearchView = (container, model) => {
     const filter = container.querySelector('#dishSearchField').value
     const type = container.querySelector('#dishTypeSelectField').value
 
-    const createDishResultElement = ({ image, name, id}) => {
-
+    const createDishResultElement = ({ image, title: name, id }) => {
       const dishResultElement = document.createElement('div')
       dishResultElement.classList.add('dishResult')
       dishResultElement.setAttribute('key', id)
@@ -33,7 +32,7 @@ const createDishSearchView = (container, model) => {
 
       const dishResultImageElement = document.createElement('img')
       dishResultImageElement.classList.add('dishResultImage')
-      dishResultImageElement.src = `images/${image}`
+      dishResultImageElement.src = `https://spoonacular.com/recipeImages/${image}`
       dishResultImageElement.setAttribute('key', id)
 
       const dishResultNameElement = document.createElement('div')
diff --git a/styles/main.css b/styles/main.css
index cad78458a..7d172587d 100644
--- a/styles/main.css
+++ b/styles/main.css
@@ -55,7 +55,7 @@ p {
 .container {
   height: 100vh;
   display: grid;
-  grid-template-areas: 
+  grid-template-areas:
     "header"
     "content";
   grid-template-rows: 6rem auto;
@@ -96,10 +96,10 @@ p {
 
   display: grid;
   grid-template-rows: 2rem 1fr;
-  grid-template-areas: 
+  grid-template-areas:
     "titleBar"
     "collapseContent";
-  
+
   background-color: aqua;
   text-align: left;
 }
@@ -114,7 +114,7 @@ p {
   grid-area: collapseContent;
   display: grid;
   grid-template-rows: 2rem fit-content(100%) 3rem;
-  grid-template-areas: 
+  grid-template-areas:
     "guestSelector"
     "dishTable"
     "confirmButtonContainer";
@@ -206,7 +206,7 @@ p {
 
 #dishSearchView {
   display: grid;
-  grid-template-areas: 
+  grid-template-areas:
     "dishSearchTitle"
     "dishSearchForm"
     "dishSearchResults";
@@ -266,7 +266,7 @@ p {
   grid-area: ingredientsList;
   display: grid;
   grid-template-rows: 4rem fit-content(100%) 4rem;
-  grid-template-areas: 
+  grid-template-areas:
     "ingredientsTitle"
     "ingredientsTable"
     "ingredientsFooter";
@@ -288,7 +288,7 @@ p {
 .ingredientsTableRow {
   display: grid;
   grid-template-columns: repeat(4, 1fr);
-  grid-template-areas: 
+  grid-template-areas:
     "ingredientQuantity ingredientName ingredientCurrency ingredientPrice";
   padding: 0.5rem 0;
 }
@@ -315,7 +315,7 @@ p {
   grid-area: ingredientsFooter;
   display: grid;
   grid-template-columns: repeat(4, 1fr);
-  grid-template-areas: 
+  grid-template-areas:
     "addToMenu addToMenu ingredientsTotalPriceCurrency ingredientsTotalPrice"
 }
 
@@ -367,7 +367,7 @@ p {
 /* Price Summary View */
 #priceSummary {
   display: grid;
-  grid-template-areas: 
+  grid-template-areas:
     "dishListContainer"
     "printButtonContainer";
 }
@@ -376,9 +376,9 @@ p {
   grid-area: dishListContainer;
   display: grid;
   grid-gap: 3rem;
-  grid-template-areas: 
+  grid-template-areas:
   "starter mainCourse dessert totalPrice";
-  
+
   align-items: center;
   justify-content: center;
   text-align: center;
@@ -426,6 +426,10 @@ p {
   margin-left: auto;
 }
 
+.dishResultImage {
+  max-width: 50px;
+}
+
 #printButtonContainer {
   grid-area: printButtonContainer;
   border-top: 0.2rem solid black;
@@ -480,8 +484,8 @@ p {
   }
 
   #appView {
-    grid-template-areas: 
-      "sidebarView" 
+    grid-template-areas:
+      "sidebarView"
       "sectionView";
     grid-template-columns: none;
   }
@@ -530,4 +534,4 @@ p {
   #mainView {
     margin: 0 2rem;
   }
-}
\ No newline at end of file
+}

From aac361353689e7187e6e6e5c02869c6b57e6258e Mon Sep 17 00:00:00 2001
From: Nina Laribi <ninalaribi@Bilawals-MacBook-Pro.local>
Date: Thu, 22 Feb 2018 23:35:49 +0100
Subject: [PATCH 28/45] Remove "hard coded" dishes

---
 js/model/dinnerModel.js | 256 ----------------------------------------
 1 file changed, 256 deletions(-)

diff --git a/js/model/dinnerModel.js b/js/model/dinnerModel.js
index cbb460508..22230541a 100644
--- a/js/model/dinnerModel.js
+++ b/js/model/dinnerModel.js
@@ -151,259 +151,3 @@ const createDinnerModel = () => {
 	})
 
 }
-
-// the dishes variable contains an array of all the
-// dishes in the database. each dish has id, name, type,
-// image (name of the image file), description and
-// array of ingredients. Each ingredient has name,
-// quantity (a number), price (a number) and unit (string
-// defining the unit i.e. "g", "slices", "ml". Unit
-// can sometimes be empty like in the example of eggs where
-// you just say "5 eggs" and not "5 pieces of eggs" or anything else.
-const dishes = [
-
-	{
-	'id':1,
-	'name':'French toast',
-	'type':'starter',
-	'image':'toast.jpg',
-	'description':"In a large mixing bowl, beat the eggs. Add the milk, brown sugar and nutmeg; stir well to combine. Soak bread slices in the egg mixture until saturated. Heat a lightly oiled griddle or frying pan over medium high heat. Brown slices on both sides, sprinkle with cinnamon and serve hot.",
-	'ingredients':[{
-		'name':'eggs',
-		'quantity':0.5,
-		'unit':'',
-		'price':10
-		},{
-		'name':'milk',
-		'quantity':30,
-		'unit':'ml',
-		'price':6
-		},{
-		'name':'brown sugar',
-		'quantity':7,
-		'unit':'g',
-		'price':1
-		},{
-		'name':'ground nutmeg',
-		'quantity':0.5,
-		'unit':'g',
-		'price':12
-		},{
-		'name':'white bread',
-		'quantity':2,
-		'unit':'slices',
-		'price':2
-		}]
-	}
-
-
-	,{
-	'id':2,
-	'name':'Sourdough Starter',
-	'type':'starter',
-	'image':'sourdough.jpg',
-	'description':"Here is how you make it... Lore ipsum...",
-	'ingredients':[{
-		'name':'active dry yeast',
-		'quantity':0.5,
-		'unit':'g',
-		'price':4
-		},{
-		'name':'warm water',
-		'quantity':30,
-		'unit':'ml',
-		'price':0
-		},{
-		'name':'all-purpose flour',
-		'quantity':15,
-		'unit':'g',
-		'price':2
-		}]
-	},{
-	'id':3,
-	'name':'Baked Brie with Peaches',
-	'type':'starter',
-	'image':'bakedbrie.jpg',
-	'description':"Here is how you make it... Lore ipsum...",
-	'ingredients':[{
-		'name':'round Brie cheese',
-		'quantity':10,
-		'unit':'g',
-		'price':8
-		},{
-		'name':'raspberry preserves',
-		'quantity':15,
-		'unit':'g',
-		'price':10
-		},{
-		'name':'peaches',
-		'quantity':1,
-		'unit':'',
-		'price':4
-		}]
-	},{
-	'id':100,
-	'name':'Meat balls',
-	'type':'main dish',
-	'image':'meatballs.jpg',
-	'description':"Preheat an oven to 400 degrees F (200 degrees C). Place the beef into a mixing bowl, and season with salt, onion, garlic salt, Italian seasoning, oregano, red pepper flakes, hot pepper sauce, and Worcestershire sauce; mix well. Add the milk, Parmesan cheese, and bread crumbs. Mix until evenly blended, then form into 1 1/2-inch meatballs, and place onto a baking sheet. Bake in the preheated oven until no longer pink in the center, 20 to 25 minutes.",
-	'ingredients':[{
-		'name':'extra lean ground beef',
-		'quantity':115,
-		'unit':'g',
-		'price':20
-		},{
-		'name':'sea salt',
-		'quantity':0.7,
-		'unit':'g',
-		'price':3
-		},{
-		'name':'small onion, diced',
-		'quantity':0.25,
-		'unit':'',
-		'price':2
-		},{
-		'name':'garlic salt',
-		'quantity':0.7,
-		'unit':'g',
-		'price':2
-		},{
-		'name':'Italian seasoning',
-		'quantity':0.6,
-		'unit':'g',
-		'price':3
-		},{
-		'name':'dried oregano',
-		'quantity':0.3,
-		'unit':'g',
-		'price':3
-		},{
-		'name':'crushed red pepper flakes',
-		'quantity':0.6,
-		'unit':'g',
-		'price':3
-		},{
-		'name':'Worcestershire sauce',
-		'quantity':6,
-		'unit':'ml',
-		'price':7
-		},{
-		'name':'milk',
-		'quantity':20,
-		'unit':'ml',
-		'price':4
-		},{
-		'name':'grated Parmesan cheese',
-		'quantity':5,
-		'unit':'g',
-		'price':8
-		},{
-		'name':'seasoned bread crumbs',
-		'quantity':15,
-		'unit':'g',
-		'price':4
-		}]
-	},{
-	'id':101,
-	'name':'MD 2',
-	'type':'main dish',
-	'image':'bakedbrie.jpg',
-	'description':"Here is how you make it... Lore ipsum...",
-	'ingredients':[{
-		'name':'ingredient 1',
-		'quantity':1,
-		'unit':'pieces',
-		'price':8
-		},{
-		'name':'ingredient 2',
-		'quantity':15,
-		'unit':'g',
-		'price':7
-		},{
-		'name':'ingredient 3',
-		'quantity':10,
-		'unit':'ml',
-		'price':4
-		}]
-	},{
-	'id':102,
-	'name':'MD 3',
-	'type':'main dish',
-	'image':'meatballs.jpg',
-	'description':"Here is how you make it... Lore ipsum...",
-	'ingredients':[{
-		'name':'ingredient 1',
-		'quantity':2,
-		'unit':'pieces',
-		'price':8
-		},{
-		'name':'ingredient 2',
-		'quantity':10,
-		'unit':'g',
-		'price':7
-		},{
-		'name':'ingredient 3',
-		'quantity':5,
-		'unit':'ml',
-		'price':4
-		}]
-	},{
-	'id':103,
-	'name':'MD 4',
-	'type':'main dish',
-	'image':'meatballs.jpg',
-	'description':"Here is how you make it... Lore ipsum...",
-	'ingredients':[{
-		'name':'ingredient 1',
-		'quantity':1,
-		'unit':'pieces',
-		'price':4
-		},{
-		'name':'ingredient 2',
-		'quantity':12,
-		'unit':'g',
-		'price':7
-		},{
-		'name':'ingredient 3',
-		'quantity':6,
-		'unit':'ml',
-		'price':4
-		}]
-	},{
-	'id':200,
-	'name':'Chocolat Ice cream',
-	'type':'dessert',
-	'image':'icecream.jpg',
-	'description':"Here is how you make it... Lore ipsum...",
-	'ingredients':[{
-		'name':'ice cream',
-		'quantity':100,
-		'unit':'ml',
-		'price':6
-		}]
-	},{
-	'id':201,
-	'name':'Vanilla Ice cream',
-	'type':'dessert',
-	'image':'icecream.jpg',
-	'description':"Here is how you make it... Lore ipsum...",
-	'ingredients':[{
-		'name':'ice cream',
-		'quantity':100,
-		'unit':'ml',
-		'price':6
-		}]
-	},{
-	'id':202,
-	'name':'Strawberry',
-	'type':'dessert',
-	'image':'icecream.jpg',
-	'description':"Here is how you make it... Lore ipsum...",
-	'ingredients':[{
-		'name':'ice cream',
-		'quantity':100,
-		'unit':'ml',
-		'price':6
-		}]
-	}
-]

From 3a3742ffce97c54c3723c0c9fa44905eb36d460e Mon Sep 17 00:00:00 2001
From: Nina Laribi <ninalaribi@Bilawals-MacBook-Pro.local>
Date: Thu, 22 Feb 2018 23:45:36 +0100
Subject: [PATCH 29/45] Adjusted logic to support Promises

---
 js/model/dinnerModel.js    |  9 ++++-----
 js/view/DishDetailsView.js | 25 ++++++++++++++-----------
 2 files changed, 18 insertions(+), 16 deletions(-)

diff --git a/js/model/dinnerModel.js b/js/model/dinnerModel.js
index 22230541a..44b73a260 100644
--- a/js/model/dinnerModel.js
+++ b/js/model/dinnerModel.js
@@ -34,11 +34,10 @@ const createDinnerModel = () => {
 	// Returns all the dishes on the menu.
 	const getFullMenu = () => state.menu
 
-	// Returns all ingredients for all the dishes on the menu.
+	// Returns all ingredients for all the dishes on the menu (represented by dish)
 	const getAllIngredients = () => state.menu.reduce((acc, curr) => acc.concat(curr.ingredients), [])
 
-	const getAllIngredientsForDish = (id) => {
-		const dish = getDish(id)
+	const getAllIngredientsForDish = dish => {
 		return dish.ingredients.map(({ name, quantity, unit, price }) => ({
 			name,
 			unit,
@@ -47,8 +46,8 @@ const createDinnerModel = () => {
 		}))
 	}
 
-	// Return the full price of a given dish (represented by id)
-	const getPriceForDish = (id) => getDish(id).ingredients.reduce((acc, curr) => {
+	// Return the full price of a given dish (represented by dish)
+	const getPriceForDish = dish => dish.ingredients.reduce((acc, curr) => {
 		acc += state.numberOfGuests * curr.price
 		return acc
 	}, 0)
diff --git a/js/view/DishDetailsView.js b/js/view/DishDetailsView.js
index 85efde23d..a14eec831 100644
--- a/js/view/DishDetailsView.js
+++ b/js/view/DishDetailsView.js
@@ -106,16 +106,16 @@ const createDishDetailsView = (container, model) => {
     return ingredientsListElement
   }
 
-  const render = (id) => {
+  const render = id => {
 
     _remove()
 
     state.id = id
 
     model.getDish(id).then(dish => {
-      const ingredientsList = model.getAllIngredientsForDish(id)
+      const ingredientsList = model.getAllIngredientsForDish(dish)
       const numberOfGuests = model.getNumberOfGuests()
-      const totalPriceValue = model.getPriceForDish(id)
+      const totalPriceValue = model.getPriceForDish(dish)
 
       const createDishDescription = ({ name, image, description }) => {
         const dishDescriptionElement = document.createElement('div')
@@ -176,14 +176,17 @@ const createDishDetailsView = (container, model) => {
 
   const _createUpdate = (model) => () => {
     if(state.display === true) {
-      container.querySelector('#ingredientsList').remove()
-      const ingredientsList = model.getAllIngredientsForDish(state.id)
-      const totalPriceValue = model.getPriceForDish(state.id)
-      const numberOfGuests = model.getNumberOfGuests()
-      container.insertBefore(
-        _createIngredientsList(ingredientsList, totalPriceValue, numberOfGuests),
-        container.children[2]
-      )
+      model.getDish(state.id).then(dish => {
+        container.querySelector('#ingredientsList').remove()
+        const ingredientsList = model.getAllIngredientsForDish(dish)
+        const totalPriceValue = model.getPriceForDish(dish)
+        const numberOfGuests = model.getNumberOfGuests()
+
+        container.insertBefore(
+          _createIngredientsList(ingredientsList, totalPriceValue, numberOfGuests),
+          container.children[2]
+        )
+      });
     }
   }
   const update = _createUpdate(model)

From 486185580b415a748a1f32bf6801328eee0acdb7 Mon Sep 17 00:00:00 2001
From: Nina Laribi <ninalaribi@Bilawals-MacBook-Pro.local>
Date: Thu, 22 Feb 2018 23:46:25 +0100
Subject: [PATCH 30/45] Fixed bug in API call

---
 js/model/dinnerModel.js | 7 ++-----
 1 file changed, 2 insertions(+), 5 deletions(-)

diff --git a/js/model/dinnerModel.js b/js/model/dinnerModel.js
index 44b73a260..34cb274ea 100644
--- a/js/model/dinnerModel.js
+++ b/js/model/dinnerModel.js
@@ -116,12 +116,9 @@ const createDinnerModel = () => {
 				}
 			};
 
-			let queryParams = [
-				`includeNutrition=true`,
-				`id=${id}`
-			];
+			let queryParams = [`includeNutrition=true`];
 
-			fetch(`https://spoonacular-recipe-food-nutrition-v1.p.mashape.com/recipes/{id}/information?${queryParams.join('&')}`, options)
+			fetch(`https://spoonacular-recipe-food-nutrition-v1.p.mashape.com/recipes/${id}/information?${queryParams.join('&')}`, options)
 				.then(res => res.json())
 				.then(({ results }) => {
 					resolve(results);

From ec3e1d67fc8f337e5edc2633fd188febb5142243 Mon Sep 17 00:00:00 2001
From: Nina Laribi <ninalaribi@Bilawals-MacBook-Pro.local>
Date: Thu, 22 Feb 2018 23:50:08 +0100
Subject: [PATCH 31/45] Fixed bugs with getAllIngredients()

---
 js/model/dinnerModel.js | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/js/model/dinnerModel.js b/js/model/dinnerModel.js
index 34cb274ea..b2f8c1130 100644
--- a/js/model/dinnerModel.js
+++ b/js/model/dinnerModel.js
@@ -88,12 +88,12 @@ const createDinnerModel = () => {
 
 			let queryParams = [`instructionsRequired=true`];
 
-			if (type !== 'all') {
+			if (type !== undefined && type !== 'all') {
 				queryParams.push(`type=${encodeURIComponent(type)}`);
 			}
 
-			if (filter) {
-				queryParams.push(`filter=${encodeURIComponent(filter)}`);
+			if (filter !== undefined) {
+				queryParams.push(`query=${encodeURIComponent(filter)}`);
 			}
 
 			fetch(`https://spoonacular-recipe-food-nutrition-v1.p.mashape.com/recipes/search?${queryParams.join('&')}`, options)

From 12a945f758bf7169e550d6fb889352cdf13d2804 Mon Sep 17 00:00:00 2001
From: Nina Laribi <ninalaribi@Bilawals-MacBook-Pro.local>
Date: Thu, 22 Feb 2018 23:59:22 +0100
Subject: [PATCH 32/45] Updated list of dish types according to API Docs

---
 index.html | 12 ++++++++++--
 1 file changed, 10 insertions(+), 2 deletions(-)

diff --git a/index.html b/index.html
index 36f4f7f2f..d38f737df 100644
--- a/index.html
+++ b/index.html
@@ -82,9 +82,17 @@ <h2 id="dishSearchTitle">Find a dish</h2>
 
                 <select id="dishTypeSelectField" name="dishTypeSelectField">
                   <option value="all" selected>All</option>
-                  <option value="starter">Starter</option>
-                  <option value="main dish">Main Dish</option>
+                  <option value="appetizer">Appetizer</option>
+                  <option value="main course">Main Course</option>
+                  <option value="side dish">Side Dish</option>
                   <option value="dessert">Dessert</option>
+                  <option value="salad">Salad</option>
+                  <option value="bread">Bread</option>
+                  <option value="breakfast">Breakfast</option>
+                  <option value="soup">Soup</option>
+                  <option value="beverage">Beverage</option>
+                  <option value="sauce">Sauce</option>
+                  <option value="drink">Drink</option>
                 </select>
 
                 <button id="dishSearchButton" class="secondaryButton">Search</button>

From e3cfe66e1a5b6746999d5d5452e322c1937657da Mon Sep 17 00:00:00 2001
From: Nina Laribi <ninalaribi@Bilawals-MacBook-Pro.local>
Date: Fri, 23 Feb 2018 00:27:08 +0100
Subject: [PATCH 33/45] Updated ingredients & dishType logic based on API Docs

---
 js/model/dinnerModel.js    | 33 ++++++++++++++++-----------------
 js/view/DishDetailsView.js | 26 +++++++++-----------------
 2 files changed, 25 insertions(+), 34 deletions(-)

diff --git a/js/model/dinnerModel.js b/js/model/dinnerModel.js
index b2f8c1130..f776890d9 100644
--- a/js/model/dinnerModel.js
+++ b/js/model/dinnerModel.js
@@ -9,6 +9,8 @@ const createDinnerModel = () => {
 		observers: []
 	}
 
+	window.getState = () => state
+
 	const addObserver = (observer) => {
 		state.observers.push(observer)
 	}
@@ -38,34 +40,31 @@ const createDinnerModel = () => {
 	const getAllIngredients = () => state.menu.reduce((acc, curr) => acc.concat(curr.ingredients), [])
 
 	const getAllIngredientsForDish = dish => {
-		return dish.ingredients.map(({ name, quantity, unit, price }) => ({
+		return dish.extendedIngredients.map(({ name, amount: quantity, unit }) => ({
 			name,
 			unit,
-			quantity: quantity * state.numberOfGuests,
-			price: price * state.numberOfGuests
+			quantity: quantity * state.numberOfGuests
 		}))
 	}
 
 	// Return the full price of a given dish (represented by dish)
-	const getPriceForDish = dish => dish.ingredients.reduce((acc, curr) => {
-		acc += state.numberOfGuests * curr.price
-		return acc
-	}, 0)
+	const getPriceForDish = dish => dish.pricePerServing
 
 	// Returns the total price of the menu (all the ingredients multiplied by number of guests).
-	const getTotalMenuPrice = () => getAllIngredients().reduce((acc, curr) => {
-		acc += state.numberOfGuests * curr.price
-		return acc
+	const getTotalMenuPrice = () => state.menu.reduce((acc, dish) => {
+		acc += state.numberOfGuests * getPriceForDish(dish)
+		return acc;
 	}, 0)
 
 	// Adds the passed dish to the menu. If the dish of that type already exists on the menu
 	// it is removed from the menu and the new one added.
 	const addDishToMenu = id => {
-		const selectedDish = getDish(id)
-		const restOfTheMenu = state.menu.filter(dish => dish.type !== selectedDish.type)
-		restOfTheMenu.push(selectedDish)
-		state.menu = restOfTheMenu
-		_notifyObservers({ menu: state.menu })
+		getDish(id).then(selectedDish => {
+			const restOfTheMenu = state.menu.filter(dish => dish.dishTypes[0] !== selectedDish.dishTypes[0])
+			restOfTheMenu.push(selectedDish)
+			state.menu = restOfTheMenu
+			_notifyObservers({ menu: state.menu })
+		})
 	}
 
 	// Removes dish from menu
@@ -120,8 +119,8 @@ const createDinnerModel = () => {
 
 			fetch(`https://spoonacular-recipe-food-nutrition-v1.p.mashape.com/recipes/${id}/information?${queryParams.join('&')}`, options)
 				.then(res => res.json())
-				.then(({ results }) => {
-					resolve(results);
+				.then(result => {
+					resolve(result);
 				})
 				.catch(err => {
 					reject(err);
diff --git a/js/view/DishDetailsView.js b/js/view/DishDetailsView.js
index a14eec831..e5ea22f39 100644
--- a/js/view/DishDetailsView.js
+++ b/js/view/DishDetailsView.js
@@ -49,7 +49,7 @@ const createDishDetailsView = (container, model) => {
     const ingredientsTableElement = document.createElement('div')
     ingredientsTableElement.setAttribute('id', 'ingredientsTable')
 
-    const createIngredientRow = ({ name, quantity, unit, price}) => {
+    const createIngredientRow = ({ name, quantity, unit }) => {
 
       const ingredientRowElement = document.createElement('div')
       ingredientRowElement.classList.add('ingredientsTableRow')
@@ -64,16 +64,6 @@ const createDishDetailsView = (container, model) => {
       nameCell.innerHTML = name
       ingredientRowElement.appendChild(nameCell)
 
-      const currencyCell = document.createElement('div')
-      currencyCell.classList.add('ingredientCurrency')
-      currencyCell.innerHTML = 'SEK'
-      ingredientRowElement.appendChild(currencyCell)
-
-      const priceCell = document.createElement('div')
-      priceCell.classList.add('ingredientPrice')
-      priceCell.innerHTML = `${price}.00`
-      ingredientRowElement.appendChild(priceCell)
-
       return ingredientRowElement
     }
     ingredients.map(ingredient => {
@@ -117,26 +107,28 @@ const createDishDetailsView = (container, model) => {
       const numberOfGuests = model.getNumberOfGuests()
       const totalPriceValue = model.getPriceForDish(dish)
 
-      const createDishDescription = ({ name, image, description }) => {
+      const createDishDescription = ({ title, image, sourceUrl }) => {
         const dishDescriptionElement = document.createElement('div')
         dishDescriptionElement.setAttribute('id', 'dishDescription')
 
         const dishTitleElement = document.createElement('div')
         dishTitleElement.setAttribute('id', 'dishTitle')
         const titleH2Element = document.createElement('h2')
-        titleH2Element.innerHTML = `${name}`
+        titleH2Element.innerHTML = `${title}`
         dishTitleElement.appendChild(titleH2Element)
 
         const dishImageElement = document.createElement('div')
         dishImageElement.setAttribute('id', 'dishImage')
         const dishImage = document.createElement('img')
-        dishImage.src = `images/${image}`
+        dishImage.src = image
         dishImageElement.appendChild(dishImage)
 
         const dishDescriptionTextElement = document.createElement('div')
         dishDescriptionTextElement.setAttribute('id', 'dishDescriptionText')
-        const dishDescription = document.createElement('p')
-        dishDescription.innerHTML = description
+        const dishDescription = document.createElement('a')
+        dishDescription.href = sourceUrl
+        dishDescription.target = "_blank"
+        dishDescription.innerHTML = "See description on original website"
         dishDescriptionTextElement.appendChild(dishDescription)
 
         dishDescriptionElement.appendChild(dishTitleElement)
@@ -161,7 +153,7 @@ const createDishDetailsView = (container, model) => {
       const dishPreparationTextElement = document.createElement('div')
       dishPreparationTextElement.setAttribute('id', 'dishPreparationText')
       const dishPreparationText = document.createElement('p')
-      dishPreparationText.innerHTML = 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Eget aliquet nibh praesent tristique. Quis hendrerit dolor magna eget. In cursus turpis massa tincidunt dui ut ornare. Sed adipiscing diam donec adipiscing tristique risus nec feugiat in. Dolor sit amet consectetur adipiscing elit. Ac tincidunt vitae semper quis lectus nulla at. Mauris augue neque gravida in fermentum. Egestas diam in arcu cursus euismod quis viverra nibh. Vulputate enim nulla aliquet porttitor lacus luctus accumsan. Quis varius quam quisque id. Non odio euismod lacinia at quis risus sed vulputate. Id cursus metus aliquam eleifend mi in. Tortor pretium viverra suspendisse potenti nullam ac tortor.'
+      dishPreparationText.innerHTML = dish.instructions
       dishPreparationTextElement.appendChild(dishPreparationText)
 
       dishPreparationElement.appendChild(dishPreparationTextElement)

From f4dc6b6a5626c2028be6c0167255e32e6221373a Mon Sep 17 00:00:00 2001
From: Nina Laribi <ninalaribi@Bilawals-MacBook-Pro.local>
Date: Fri, 23 Feb 2018 00:28:41 +0100
Subject: [PATCH 34/45] Fixed name/price in sidebar

---
 js/controllers/SidebarController.js |  4 ++--
 js/view/SidebarView.js              | 20 ++++++++++----------
 2 files changed, 12 insertions(+), 12 deletions(-)

diff --git a/js/controllers/SidebarController.js b/js/controllers/SidebarController.js
index b75cabb2b..b9f3d5b75 100644
--- a/js/controllers/SidebarController.js
+++ b/js/controllers/SidebarController.js
@@ -16,5 +16,5 @@ const createSidebarController = (view, model, {
 		priceSummaryView.show()
 		recipeSummaryView.hide()
 	}
-  
-}
\ No newline at end of file
+
+}
diff --git a/js/view/SidebarView.js b/js/view/SidebarView.js
index d6844f65d..f9e2e5c11 100644
--- a/js/view/SidebarView.js
+++ b/js/view/SidebarView.js
@@ -17,7 +17,7 @@ const createSidebarView = (container, model) => {
   const guestNumber = container.querySelector('#guestNumber')
   const confirmMenuButton = container.querySelector('#confirmMenuButton')
   const _menuTableContent = container.querySelector('#tableContent')
-  const _totalPrice = container.querySelector('#totalPriceValue') 
+  const _totalPrice = container.querySelector('#totalPriceValue')
 
   const _createUpdate = (model) => (changeDetails) => {
     state.numberOfGuests = model.getNumberOfGuests()
@@ -39,27 +39,27 @@ const createSidebarView = (container, model) => {
 
       const tableRow = document.createElement('div')
       tableRow.classList.add('tableRow')
-  
+
       const rowName = document.createElement('div')
       rowName.classList.add('rowName')
       rowName.innerHTML = `${name}`
-      
+
       const rowCost = document.createElement('div')
       rowCost.classList.add('rowCost')
       rowCost.innerHTML = `${cost}:-`
-  
+
       tableRow.appendChild(rowName)
       tableRow.appendChild(rowCost)
-  
+
       return tableRow
     }
-    
-    state.menu.map(item => 
-      _menuTableContent.appendChild(createNewRow(item.name, item.price))
+
+    state.menu.map(item =>
+      _menuTableContent.appendChild(createNewRow(item.title, item.pricePerServing))
     )
 
     _totalPrice.innerHTML = `${state.totalMenuPrice}.00`
-    
+
   }
 
   const _remove = () => {
@@ -90,4 +90,4 @@ const createSidebarView = (container, model) => {
     show,
     hide
   })
-}
\ No newline at end of file
+}

From c7e8d85985ef03f0ab5df188ec7d2543d9980075 Mon Sep 17 00:00:00 2001
From: Nina Laribi <ninalaribi@Bilawals-MacBook-Pro.local>
Date: Fri, 23 Feb 2018 01:08:37 +0100
Subject: [PATCH 35/45] Attempted to address unknown types of food items

---
 index.html                  | 22 ++++-----
 js/model/dinnerModel.js     |  5 ++-
 js/view/PriceSummaryView.js | 89 ++++++++++++++++++++++++++++---------
 styles/main.css             |  8 +++-
 4 files changed, 89 insertions(+), 35 deletions(-)

diff --git a/index.html b/index.html
index d38f737df..d749dc510 100644
--- a/index.html
+++ b/index.html
@@ -126,17 +126,17 @@ <h2 id="statusTitle">My Dinner: <span id="numberOfGuests">3</span> people</h2>
 
               <div id="dishListContainer">
 
-                <div id="starter">
-
-                </div>
-
-                <div id="mainCourse">
-
-                </div>
-
-                <div id="dessert">
-
-                </div>
+                <div id="appetizer"></div>
+                <div id="mainCourse"></div>
+                <div id="sideDish"></div>
+                <div id="dessert"></div>
+                <div id="salad"></div>
+                <div id="bread"></div>
+                <div id="breakfast"></div>
+                <div id="soup"></div>
+                <div id="beverage"></div>
+                <div id="sauce"></div>
+                <div id="drink"></div>
 
                 <div id="totalPrice" class="dishItemContainer">
                   <div class="verticallyCentered dishImage"></div>
diff --git a/js/model/dinnerModel.js b/js/model/dinnerModel.js
index f776890d9..6470e19e8 100644
--- a/js/model/dinnerModel.js
+++ b/js/model/dinnerModel.js
@@ -31,7 +31,7 @@ const createDinnerModel = () => {
 	const getNumberOfGuests = () => state.numberOfGuests
 
 	// Returns the dish that is on the menu for the selected type
-	const getSelectedDish = type => state.menu.find(dish => dish.type === type)
+	const getSelectedDish = type => state.menu.find(dish => (dish.dishTypes.length === 0 && type === 'main course') || dish.dishTypes.includes(type))
 
 	// Returns all the dishes on the menu.
 	const getFullMenu = () => state.menu
@@ -60,7 +60,8 @@ const createDinnerModel = () => {
 	// it is removed from the menu and the new one added.
 	const addDishToMenu = id => {
 		getDish(id).then(selectedDish => {
-			const restOfTheMenu = state.menu.filter(dish => dish.dishTypes[0] !== selectedDish.dishTypes[0])
+			let selectedDishTypes = selectedDish.dishTypes;
+			const restOfTheMenu = state.menu.filter(dish => (dish.dishTypes.length === 0 && selectedDishTypes.length === 0) || dish.dishTypes.find(dishType => selectedDishTypes.includes(dishType)))
 			restOfTheMenu.push(selectedDish)
 			state.menu = restOfTheMenu
 			_notifyObservers({ menu: state.menu })
diff --git a/js/view/PriceSummaryView.js b/js/view/PriceSummaryView.js
index e3299d90b..d49d47080 100644
--- a/js/view/PriceSummaryView.js
+++ b/js/view/PriceSummaryView.js
@@ -6,59 +6,75 @@
 */
 
 const createPriceSummaryView = (container, model) => {
-  
+
   const state = {
     display: false
   }
 
   const printButton = container.querySelector('#printButton')
 
-  const _starterContainer = container.querySelector('#starter')
+  const _appetizerContainer = container.querySelector('#appetizer')
   const _mainCourseContainer = container.querySelector('#mainCourse')
+  const _sideDishContainer = container.querySelector('#sideDish')
   const _dessertContainer = container.querySelector('#dessert')
+  const _saladContainer = container.querySelector('#salad')
+  const _breadContainer = container.querySelector('#bread')
+  const _breakfastContainer = container.querySelector('#breakfast')
+  const _soupContainer = container.querySelector('#soup')
+  const _beverageContainer = container.querySelector('#beverage')
+  const _sauceContainer = container.querySelector('#sauce')
+  const _drinkContainer = container.querySelector('#drink')
   const _totalPrice = container.querySelector('#totalPriceValue')
 
-  const _createUpdate = (model) => (changeDetails) => {
+  const _createUpdate = model => changeDetails => {
     _remove()
 
     const menu = {
-      'starter': model.getSelectedDish('starter'),
-      'mainCourse': model.getSelectedDish('main dish'),
-      'dessert': model.getSelectedDish('dessert')
+      'appetizer': model.getSelectedDish('appetizer'),
+      'mainCourse': model.getSelectedDish('main course'),
+      'sideDish': model.getSelectedDish('side dish'),
+      'dessert': model.getSelectedDish('dessert'),
+      'salad': model.getSelectedDish('salad'),
+      'bread': model.getSelectedDish('bread'),
+      'breakfast': model.getSelectedDish('breakfast'),
+      'soup': model.getSelectedDish('soup'),
+      'beverage': model.getSelectedDish('beverage'),
+      'sauce': model.getSelectedDish('sauce'),
+      'drink': model.getSelectedDish('drink')
     }
 
     Object.keys(menu).map(type => {
       const dish = menu[type]
       if(dish !== undefined) {
-        dish.price = model.getPriceForDish(dish.id)
+        dish.price = model.getPriceForDish(dish)
       }
     })
 
     const totalPriceValue = model.getTotalMenuPrice()
 
-    const createDishElement = ({image, name, price}) => {
+    const createDishElement = ({image, title, pricePerServing}) => {
       const dishElement = document.createElement('div')
       dishElement.classList.add('dishItemContainer')
-  
+
       const dishImageContainerElement = document.createElement('div')
       dishImageContainerElement.classList.add('verticallyCentered')
       dishImageContainerElement.classList.add('dishImage')
       const dishImageElement = document.createElement('img')
-      dishImageElement.src = `images/${image}`
+      dishImageElement.src = image
       dishImageContainerElement.appendChild(dishImageElement)
-  
+
       const dishNameElement = document.createElement('p')
       dishNameElement.classList.add('dishName')
-      dishNameElement.innerHTML = name
+      dishNameElement.innerHTML = title
 
       const dishPriceElement = document.createElement('p')
       dishPriceElement.classList.add('dishPrice')
-      dishPriceElement.innerHTML = `${price} SEK`
-      
+      dishPriceElement.innerHTML = `${pricePerServing} SEK`
+
       dishElement.appendChild(dishImageContainerElement)
       dishElement.appendChild(dishNameElement)
       dishElement.appendChild(dishPriceElement)
-  
+
       return dishElement
     }
 
@@ -66,15 +82,39 @@ const createPriceSummaryView = (container, model) => {
       const dish = menu[type]
       if(dish !== undefined) {
         switch (type) {
-          case 'starter':
-            _starterContainer.append(createDishElement(dish))
+          case 'appetizer':
+            _appetizerContainer.append(createDishElement(dish))
             break;
           case 'mainCourse':
             _mainCourseContainer.append(createDishElement(dish))
             break;
+          case 'sideDish':
+            _sideDishContainer.append(createDishElement(dish))
+            break;
           case 'dessert':
             _dessertContainer.append(createDishElement(dish))
             break;
+          case 'salad':
+            _saladContainer.append(createDishElement(dish))
+            break;
+          case 'bread':
+            _breadContainer.append(createDishElement(dish))
+            break;
+          case 'breakfast':
+            _breakfastContainer.append(createDishElement(dish))
+            break;
+          case 'soup':
+            _soupContainer.append(createDishElement(dish))
+            break;
+          case 'beverage':
+            _beverageContainer.append(createDishElement(dish))
+            break;
+          case 'sauce':
+            _sauceContainer.append(createDishElement(dish))
+            break;
+          case 'drink':
+            _drinkContainer.append(createDishElement(dish))
+            break;
         }
       }
     })
@@ -84,10 +124,19 @@ const createPriceSummaryView = (container, model) => {
   const update = _createUpdate(model)
 
   const _remove = () => {
-    const childNodesToRemove = Array.from(_starterContainer.childNodes)
+    const childNodesToRemove = Array.from([])
+                                .concat(Array.from(_appetizerContainer.childNodes))
                                 .concat(Array.from(_mainCourseContainer.childNodes))
+                                .concat(Array.from(_sideDishContainer.childNodes))
                                 .concat(Array.from(_dessertContainer.childNodes))
-    childNodesToRemove.map(child => child.remove())                       
+                                .concat(Array.from(_saladContainer.childNodes))
+                                .concat(Array.from(_breadContainer.childNodes))
+                                .concat(Array.from(_breakfastContainer.childNodes))
+                                .concat(Array.from(_soupContainer.childNodes))
+                                .concat(Array.from(_beverageContainer.childNodes))
+                                .concat(Array.from(_sauceContainer.childNodes))
+                                .concat(Array.from(_drinkContainer.childNodes))
+    childNodesToRemove.map(child => child.remove())
     _totalPrice.innerHTML = "0.00"
   }
 
@@ -114,4 +163,4 @@ const createPriceSummaryView = (container, model) => {
     show,
     hide
   })
-}
\ No newline at end of file
+}
diff --git a/styles/main.css b/styles/main.css
index 7d172587d..725248268 100644
--- a/styles/main.css
+++ b/styles/main.css
@@ -377,7 +377,7 @@ p {
   display: grid;
   grid-gap: 3rem;
   grid-template-areas:
-  "starter mainCourse dessert totalPrice";
+  "appetizer mainCourse dessert totalPrice";
 
   align-items: center;
   justify-content: center;
@@ -386,7 +386,7 @@ p {
 }
 
 
-#starter {
+#appetizer {
   grid-area: starter;
 }
 
@@ -417,6 +417,10 @@ p {
   grid-area: dishImage;
 }
 
+.dishImage img {
+  max-width: 200px;
+}
+
 .dishName {
   grid-area: dishName;
 }

From 86de4725f884d82ced9669b85fefde727389bdbc Mon Sep 17 00:00:00 2001
From: Nina Laribi <ninalaribi@Bilawals-MacBook-Pro.local>
Date: Fri, 23 Feb 2018 01:11:40 +0100
Subject: [PATCH 36/45] Added error messages on failed requests

---
 js/model/dinnerModel.js | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/js/model/dinnerModel.js b/js/model/dinnerModel.js
index 6470e19e8..26aceffad 100644
--- a/js/model/dinnerModel.js
+++ b/js/model/dinnerModel.js
@@ -102,6 +102,7 @@ const createDinnerModel = () => {
 					resolve(results);
 				})
 				.catch(err => {
+					alert('Sorry, we could not perform this request. It might be your internet connection. Try again later.');
 					reject(err);
 				});
 		});
@@ -124,6 +125,7 @@ const createDinnerModel = () => {
 					resolve(result);
 				})
 				.catch(err => {
+					alert('Sorry, we could not perform this request. It might be your internet connection. Try again later.');
 					reject(err);
 				});
 		});

From e0857049181f81a91bbcf0a0054ef9e9534d77c5 Mon Sep 17 00:00:00 2001
From: Andrew Szucs <andrew0szucs@gmail.com>
Date: Fri, 23 Feb 2018 15:15:18 +0100
Subject: [PATCH 37/45] Refactor generalStateController into app.js

---
 js/app.js                                | 47 ++++++++++++++++++++----
 js/controllers/DishDetailsController.js  |  8 ++--
 js/controllers/DishSearchController.js   | 13 ++-----
 js/controllers/MainViewController.js     |  8 +---
 js/controllers/PriceSummaryController.js |  7 +---
 js/controllers/SidebarController.js      | 14 +------
 js/controllers/StatusBarController.js    | 15 ++------
 7 files changed, 55 insertions(+), 57 deletions(-)

diff --git a/js/app.js b/js/app.js
index 96d362e16..9fcae6be9 100644
--- a/js/app.js
+++ b/js/app.js
@@ -41,13 +41,46 @@
 	
 	// General State Controller
 	const generalStateController = {
-		mainView,
-		sidebarView,
-		statusBarView,
-		priceSummaryView,
-		dishDetailsView,
-		dishSearchView,
-		recipeSummaryView,
+		transitionFromDishDetailsToDishSearch: () => {
+			dishDetailsView.hide()
+			dishSearchView.show()
+		},
+		transitionFromDishSearchToDishDetails: (event) => {
+			const clickedElement = event.target
+			const clickedDishId = clickedElement.getAttribute('key')
+			if(clickedDishId !== null && clickedDishId !== undefined) {
+				dishSearchView.hide()
+				dishDetailsView.render(Number(clickedDishId))
+				dishDetailsView.show()
+			}
+		},
+		transitionFromMainViewToDishSearch: () => {
+			mainView.hide()
+			sidebarView.show()
+			dishSearchView.show()
+		},
+		transitionFromPriceSummaryToRecipeSummary: () => {
+			priceSummaryView.hide()
+			recipeSummaryView.show()
+		},
+		transitionFromDishSearchToPriceSummary: () => {
+			sidebarView.hide()
+			dishSearchView.hide()
+			dishDetailsView.hide()
+	
+			statusBarView.show()
+			priceSummaryView.show()
+			recipeSummaryView.hide()
+		},
+		transitionFromPriceSummaryToDishSearch: () => {
+			statusBarView.hide()
+			priceSummaryView.hide()
+			recipeSummaryView.hide()
+	
+			sidebarView.show()
+			dishSearchView.show()
+			dishDetailsView.hide()
+		}
 	}
 
 	const mainViewController = createMainViewController(mainView, model, generalStateController)
diff --git a/js/controllers/DishDetailsController.js b/js/controllers/DishDetailsController.js
index 20a45c660..4180636a4 100644
--- a/js/controllers/DishDetailsController.js
+++ b/js/controllers/DishDetailsController.js
@@ -1,11 +1,9 @@
-const createDishDetailsController = (view, model, { dishDetailsView, dishSearchView }) => {
+const createDishDetailsController = (view, model, generalStateController) => {
   view.addToMenuButton.onclick = () => {
     const dishId = view.getDishId()
     model.addDishToMenu(dishId)
   }
 
-  view.backFromDishDetailsButton.onclick = () => {
-		dishDetailsView.hide()
-		dishSearchView.show()
-	}
+  view.backFromDishDetailsButton.onclick = 
+    generalStateController.transitionFromDishDetailsToDishSearch
 }
\ No newline at end of file
diff --git a/js/controllers/DishSearchController.js b/js/controllers/DishSearchController.js
index 8049e6001..0824df35b 100644
--- a/js/controllers/DishSearchController.js
+++ b/js/controllers/DishSearchController.js
@@ -1,13 +1,6 @@
-const createDishSearchController = (view, model, { dishSearchView, dishDetailsView }) => {
+const createDishSearchController = (view, model, generalStateController) => {
   view.dishSearchButton.onclick = view.render
 
-  view.dishSearchResultsElement.onclick = (event) => {
-		const clickedElement = event.target
-		const clickedDishId = clickedElement.getAttribute('key')
-		if(clickedDishId !== null && clickedDishId !== undefined) {
-			dishSearchView.hide()
-			dishDetailsView.render(Number(clickedDishId))
-			dishDetailsView.show()
-		}
-	}
+	view.dishSearchResultsElement.onclick = 
+		generalStateController.transitionFromDishSearchToDishDetails
 }
\ No newline at end of file
diff --git a/js/controllers/MainViewController.js b/js/controllers/MainViewController.js
index a15447b3e..0d230d82b 100644
--- a/js/controllers/MainViewController.js
+++ b/js/controllers/MainViewController.js
@@ -1,8 +1,4 @@
-const createMainViewController = (view, model, { sidebarView, dishSearchView }) => {
+const createMainViewController = (view, model, generalStateController) => {
 
-  view.startButton.onclick = () => {
-    view.hide()
-    sidebarView.show()
-    dishSearchView.show()
-  }
+  view.startButton.onclick = generalStateController.transitionFromMainViewToDishSearch
 }
\ No newline at end of file
diff --git a/js/controllers/PriceSummaryController.js b/js/controllers/PriceSummaryController.js
index 273bbce2e..ca0a60baa 100644
--- a/js/controllers/PriceSummaryController.js
+++ b/js/controllers/PriceSummaryController.js
@@ -1,7 +1,4 @@
-const createPriceSummaryController = (view, model, { priceSummaryView, recipeSummaryView }) => {
+const createPriceSummaryController = (view, model, generalStateController) => {
 
-  view.printButton.onclick = () => {
-		priceSummaryView.hide()
-		recipeSummaryView.show()
-	}
+  view.printButton.onclick = generalStateController.transitionFromPriceSummaryToRecipeSummary
 }
\ No newline at end of file
diff --git a/js/controllers/SidebarController.js b/js/controllers/SidebarController.js
index b75cabb2b..2e3049dd8 100644
--- a/js/controllers/SidebarController.js
+++ b/js/controllers/SidebarController.js
@@ -1,20 +1,10 @@
-const createSidebarController = (view, model, { 
-  sidebarView, dishSearchView, dishDetailsView, statusBarView, priceSummaryView, recipeSummaryView
-}) => {
+const createSidebarController = (view, model, generalStateController) => {
 
   view.guestNumber.oninput = (event) => {
     const newGuestNumber = event.target.value
     model.setNumberOfGuests(newGuestNumber)
   }
 
-  view.confirmMenuButton.onclick = () => {
-		sidebarView.hide()
-		dishSearchView.hide()
-		dishDetailsView.hide()
-
-		statusBarView.show()
-		priceSummaryView.show()
-		recipeSummaryView.hide()
-	}
+  view.confirmMenuButton.onclick = generalStateController.transitionFromDishSearchToPriceSummary
   
 }
\ No newline at end of file
diff --git a/js/controllers/StatusBarController.js b/js/controllers/StatusBarController.js
index a51e3983c..f1ff48f6d 100644
--- a/js/controllers/StatusBarController.js
+++ b/js/controllers/StatusBarController.js
@@ -1,15 +1,6 @@
-const createStatusBarController = (view, model, { 
-  statusBarView, priceSummaryView, recipeSummaryView, sidebarView, dishSearchView, dishDetailsView
-}) => {
+const createStatusBarController = (view, model, generalStateController) => {
 
-  view.backFromMenuSummaryButton.onclick = () => {
-		statusBarView.hide()
-		priceSummaryView.hide()
-		recipeSummaryView.hide()
-
-		sidebarView.show()
-		dishSearchView.show()
-		dishDetailsView.hide()
-	}
+	view.backFromMenuSummaryButton.onclick = 
+		generalStateController.transitionFromPriceSummaryToDishSearch
 
 }
\ No newline at end of file

From 01f33996b4d123faa378c810526fe0c4e4f2af2f Mon Sep 17 00:00:00 2001
From: Nina Laribi <ninalaribi@Bilawals-MacBook-Pro.local>
Date: Sun, 25 Feb 2018 21:29:19 +0100
Subject: [PATCH 38/45] Uses first dishType and added interactions

---
 README.md                  |  4 ++--
 js/model/dinnerModel.js    | 22 ++++++++++++++++++----
 js/view/DishDetailsView.js |  8 ++++++++
 js/view/DishSearchView.js  | 15 +++++++++++++++
 styles/main.css            | 11 +++++++++--
 5 files changed, 52 insertions(+), 8 deletions(-)

diff --git a/README.md b/README.md
index 955b3bb4e..36fc19cc8 100644
--- a/README.md
+++ b/README.md
@@ -1,6 +1,6 @@
-Interaction Programing - Lab assignment - HTML
+Interaction Programming - Lab assignment - HTML
 =================================================
 
-This project contains the solution for the Interaction Programing course lab assignment. For more details on the assignment check the [course website](https://www.kth.se/social/course/DH2642).
+This project contains the solution for the Interaction Programming course lab assignment. For more details on the assignment check the [course website](https://www.kth.se/social/course/DH2642).
 
 You can see the demo [here](https://andrewszucs.github.io/dinnerplanner-html/).
diff --git a/js/model/dinnerModel.js b/js/model/dinnerModel.js
index 26aceffad..a8c91cb33 100644
--- a/js/model/dinnerModel.js
+++ b/js/model/dinnerModel.js
@@ -31,7 +31,7 @@ const createDinnerModel = () => {
 	const getNumberOfGuests = () => state.numberOfGuests
 
 	// Returns the dish that is on the menu for the selected type
-	const getSelectedDish = type => state.menu.find(dish => (dish.dishTypes.length === 0 && type === 'main course') || dish.dishTypes.includes(type))
+	const getSelectedDish = type => state.menu.find(dish => dish.dishType === type)
 
 	// Returns all the dishes on the menu.
 	const getFullMenu = () => state.menu
@@ -60,8 +60,7 @@ const createDinnerModel = () => {
 	// it is removed from the menu and the new one added.
 	const addDishToMenu = id => {
 		getDish(id).then(selectedDish => {
-			let selectedDishTypes = selectedDish.dishTypes;
-			const restOfTheMenu = state.menu.filter(dish => (dish.dishTypes.length === 0 && selectedDishTypes.length === 0) || dish.dishTypes.find(dishType => selectedDishTypes.includes(dishType)))
+			const restOfTheMenu = state.menu.filter(dish => dish.dishType === selectedDish.dishType)
 			restOfTheMenu.push(selectedDish)
 			state.menu = restOfTheMenu
 			_notifyObservers({ menu: state.menu })
@@ -92,7 +91,7 @@ const createDinnerModel = () => {
 				queryParams.push(`type=${encodeURIComponent(type)}`);
 			}
 
-			if (filter !== undefined) {
+			if (filter !== undefined && filter !== "") {
 				queryParams.push(`query=${encodeURIComponent(filter)}`);
 			}
 
@@ -119,9 +118,24 @@ const createDinnerModel = () => {
 
 			let queryParams = [`includeNutrition=true`];
 
+			let recognizedDishTypes = [
+				"appetizer",
+				"mainCourse",
+				"sideDish",
+				"dessert",
+				"salad",
+				"bread",
+				"breakfast",
+				"soup",
+				"beverage",
+				"sauce",
+				"drink"
+			];
+
 			fetch(`https://spoonacular-recipe-food-nutrition-v1.p.mashape.com/recipes/${id}/information?${queryParams.join('&')}`, options)
 				.then(res => res.json())
 				.then(result => {
+					result.dishType = result.dishTypes.find(dishType => recognizedDishTypes.includes(dishType)) || 'main course';
 					resolve(result);
 				})
 				.catch(err => {
diff --git a/js/view/DishDetailsView.js b/js/view/DishDetailsView.js
index e5ea22f39..6bfbc3fc2 100644
--- a/js/view/DishDetailsView.js
+++ b/js/view/DishDetailsView.js
@@ -102,7 +102,15 @@ const createDishDetailsView = (container, model) => {
 
     state.id = id
 
+    // loading state
+    const loadingAlert = document.querySelector('#alert-notice')
+    loadingAlert.style.display = "block"
+    loadingAlert.innerHTML = "Loading dish details ..."
+
     model.getDish(id).then(dish => {
+      loadingAlert.style.display = "none"
+      loadingAlert.innerHTML = ""
+
       const ingredientsList = model.getAllIngredientsForDish(dish)
       const numberOfGuests = model.getNumberOfGuests()
       const totalPriceValue = model.getPriceForDish(dish)
diff --git a/js/view/DishSearchView.js b/js/view/DishSearchView.js
index 827a89c40..a85ad584c 100644
--- a/js/view/DishSearchView.js
+++ b/js/view/DishSearchView.js
@@ -46,10 +46,25 @@ const createDishSearchView = (container, model) => {
       return dishResultElement
     }
 
+
+    const loadingAlert = document.querySelector('#alert-notice')
+    loadingAlert.style.display = "block"
+    loadingAlert.innerHTML = "Loading search results ..."
+
     model.getAllDishes(type, filter).then(dishes => {
+      loadingAlert.style.display = "none"
+      loadingAlert.innerHTML = ""
+
+      if (dishes.length === 0) {
+        dishSearchResultsElement.innerHTML = `Sorry, no search results were found for '${filter}'.`;
+        return;
+      }
+
       dishes.map(dish => {
         dishSearchResultsElement.append(createDishResultElement(dish))
       })
+    }).catch(error => {
+      loadingAlert.innerHTML = error;
     });
   }
 
diff --git a/styles/main.css b/styles/main.css
index 725248268..eb7858d0d 100644
--- a/styles/main.css
+++ b/styles/main.css
@@ -10,6 +10,13 @@ p {
   margin: 0;
 }
 
+#alert-notice {
+  display: none;
+  background: skyblue;
+  padding: 15px;
+  text-align: center;
+}
+
 .showOnMobile {
   display: none;
 }
@@ -100,7 +107,7 @@ p {
     "titleBar"
     "collapseContent";
 
-  background-color: aqua;
+  background-color: pink;
   text-align: left;
 }
 
@@ -377,7 +384,7 @@ p {
   display: grid;
   grid-gap: 3rem;
   grid-template-areas:
-  "appetizer mainCourse dessert totalPrice";
+  "appetizer mainCourse dessert";
 
   align-items: center;
   justify-content: center;

From b983bae2b0995df426d9579c782942b7a143a881 Mon Sep 17 00:00:00 2001
From: Nina Laribi <ninalaribi@Bilawals-MacBook-Pro.local>
Date: Sun, 25 Feb 2018 21:31:36 +0100
Subject: [PATCH 39/45] Added alert to homepage

---
 index.html | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/index.html b/index.html
index d749dc510..72a0001c5 100644
--- a/index.html
+++ b/index.html
@@ -19,6 +19,8 @@ <h1>Dinner Planner</h1>
 
       <div id="content">
 
+        <div id="alert-notice" role="alert"></div>
+
         <div id="mainView">
           <div id="welcomeText">
             Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

From 5ccafe41e8645631fae42df70d2018411f61c6a8 Mon Sep 17 00:00:00 2001
From: Nina Laribi <ninalaribi@Bilawals-MacBook-Pro.local>
Date: Sun, 25 Feb 2018 21:43:14 +0100
Subject: [PATCH 40/45] Fixed bug in dinnerModel

---
 js/app.js               | 22 +++++++++++-----------
 js/model/dinnerModel.js |  2 +-
 2 files changed, 12 insertions(+), 12 deletions(-)

diff --git a/js/app.js b/js/app.js
index 9fcae6be9..43f5f2781 100644
--- a/js/app.js
+++ b/js/app.js
@@ -1,5 +1,5 @@
 (function () {
-	
+
 	// Model
 	const model = createDinnerModel()
 
@@ -8,37 +8,37 @@
 		document.getElementById('mainView'),
 		model
 	)
-	
+
 	const sidebarView = createSidebarView(
 		document.getElementById('sidebarView'),
 		model
 	)
-	
+
 	const dishSearchView = createDishSearchView(
 		document.getElementById('dishSearchView'),
 		model
 	)
-	
+
 	const dishDetailsView = createDishDetailsView(
 		document.getElementById('dishDetailsView'),
 		model
 	)
-	
+
 	const statusBarView = createStatusBarView(
 		document.getElementById('statusBar'),
 		model
 	)
-	
+
 	const priceSummaryView = createPriceSummaryView(
 		document.getElementById('priceSummary'),
 		model
 	)
-	
+
 	const recipeSummaryView = createRecipeSummaryView(
 		document.getElementById('recipeSummaryView'),
 		model
 	)
-	
+
 	// General State Controller
 	const generalStateController = {
 		transitionFromDishDetailsToDishSearch: () => {
@@ -67,7 +67,7 @@
 			sidebarView.hide()
 			dishSearchView.hide()
 			dishDetailsView.hide()
-	
+
 			statusBarView.show()
 			priceSummaryView.show()
 			recipeSummaryView.hide()
@@ -76,7 +76,7 @@
 			statusBarView.hide()
 			priceSummaryView.hide()
 			recipeSummaryView.hide()
-	
+
 			sidebarView.show()
 			dishSearchView.show()
 			dishDetailsView.hide()
@@ -99,4 +99,4 @@
 	priceSummaryView.hide()
 	recipeSummaryView.hide()
 
-})()
\ No newline at end of file
+})()
diff --git a/js/model/dinnerModel.js b/js/model/dinnerModel.js
index a8c91cb33..5d0def6b6 100644
--- a/js/model/dinnerModel.js
+++ b/js/model/dinnerModel.js
@@ -60,7 +60,7 @@ const createDinnerModel = () => {
 	// it is removed from the menu and the new one added.
 	const addDishToMenu = id => {
 		getDish(id).then(selectedDish => {
-			const restOfTheMenu = state.menu.filter(dish => dish.dishType === selectedDish.dishType)
+			const restOfTheMenu = state.menu.filter(dish => dish.dishType !== selectedDish.dishType)
 			restOfTheMenu.push(selectedDish)
 			state.menu = restOfTheMenu
 			_notifyObservers({ menu: state.menu })

From ea4c7434483a07a9fe092644e94ff7026e65198b Mon Sep 17 00:00:00 2001
From: Nina Laribi <ninalaribi@Bilawals-MacBook-Pro.local>
Date: Sun, 25 Feb 2018 21:43:28 +0100
Subject: [PATCH 41/45] Added full list of new categories

---
 js/view/RecipeSummaryView.js | 42 +++++++++++++++++++++++-------------
 1 file changed, 27 insertions(+), 15 deletions(-)

diff --git a/js/view/RecipeSummaryView.js b/js/view/RecipeSummaryView.js
index d75778ff4..cf9dc6f72 100644
--- a/js/view/RecipeSummaryView.js
+++ b/js/view/RecipeSummaryView.js
@@ -6,7 +6,7 @@
 */
 
 const createRecipeSummaryView = (container, model) => {
-  
+
   const state = {
     display: false
   }
@@ -15,12 +15,20 @@ const createRecipeSummaryView = (container, model) => {
     _remove()
 
     const menu = {
-      'starter': model.getSelectedDish('starter'),
-      'mainCourse': model.getSelectedDish('main dish'),
-      'dessert': model.getSelectedDish('dessert')
+      'appetizer': model.getSelectedDish('appetizer'),
+      'mainCourse': model.getSelectedDish('main course'),
+      'sideDish': model.getSelectedDish('side dish'),
+      'dessert': model.getSelectedDish('dessert'),
+      'salad': model.getSelectedDish('salad'),
+      'bread': model.getSelectedDish('bread'),
+      'breakfast': model.getSelectedDish('breakfast'),
+      'soup': model.getSelectedDish('soup'),
+      'beverage': model.getSelectedDish('beverage'),
+      'sauce': model.getSelectedDish('sauce'),
+      'drink': model.getSelectedDish('drink')
     }
 
-    const createRecipeElement = ({name, image, description}) => {
+    const createRecipeElement = ({title, image, description, sourceUrl, instructions}) => {
 
       const recipeElement = document.createElement('div')
       recipeElement.classList.add('recipe')
@@ -29,36 +37,40 @@ const createRecipeSummaryView = (container, model) => {
       recipeImageContainerElement.classList.add('recipeImage')
 
       const recipeImageElement = document.createElement('img')
-      recipeImageElement.src = `images/${image}`
+      recipeImageElement.src = image
       recipeImageContainerElement.appendChild(recipeImageElement)
 
       const recipeTextboxElement = document.createElement('div')
       recipeTextboxElement.classList.add('recipeTextbox')
-      
+
       const recipeNameElement = document.createElement('h2')
       recipeNameElement.classList.add('recipeName')
-      recipeNameElement.innerHTML = `${name}`
-      
+      recipeNameElement.innerHTML = `${title}`
+
       const recipeDescriptionElement = document.createElement('p')
       recipeDescriptionElement.classList.add('recipeDescriptionText')
-      recipeDescriptionElement.innerHTML = `${description}`
+      const recipeDescription = document.createElement('a')
+      recipeDescription.href = sourceUrl
+      recipeDescription.target = "_blank"
+      recipeDescription.innerHTML = "See description on original website"
+      recipeDescriptionElement.appendChild(recipeDescription)
 
       recipeTextboxElement.appendChild(recipeNameElement)
       recipeTextboxElement.appendChild(recipeDescriptionElement)
 
       const preparationTextboxElement = document.createElement('div')
       preparationTextboxElement.classList.add('recipeTextbox')
-      
+
       const preparationTitleElement = document.createElement('h3')
       preparationTitleElement.innerHTML = 'Preparation'
-      
+
       const preparationDescriptionElement = document.createElement('p')
       preparationDescriptionElement.classList.add('recipePreparationText')
-      preparationDescriptionElement.innerHTML = `Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Eget aliquet nibh praesent tristique. Quis hendrerit dolor magna eget. In cursus turpis massa tincidunt dui ut ornare. Sed adipiscing diam donec adipiscing tristique risus nec feugiat in. Dolor sit amet consectetur adipiscing elit. Ac tincidunt vitae semper quis lectus nulla at. Mauris augue neque gravida in fermentum. Egestas diam in arcu cursus euismod quis viverra nibh. Vulputate enim nulla aliquet porttitor lacus luctus accumsan. Quis varius quam quisque id. Non odio euismod lacinia at quis risus sed vulputate. Id cursus metus aliquam eleifend mi in. Tortor pretium viverra suspendisse potenti nullam ac tortor.`
+      preparationDescriptionElement.innerHTML = instructions
 
       preparationTextboxElement.appendChild(preparationTitleElement)
       preparationTextboxElement.appendChild(preparationDescriptionElement)
-      
+
       recipeElement.appendChild(recipeImageContainerElement)
       recipeElement.appendChild(recipeTextboxElement)
       recipeElement.appendChild(preparationTextboxElement)
@@ -101,4 +113,4 @@ const createRecipeSummaryView = (container, model) => {
     show,
     hide
   })
-}
\ No newline at end of file
+}

From 018678c2a6ef60923a2a954a72e3da3216590b22 Mon Sep 17 00:00:00 2001
From: Nina Laribi <ninalaribi@Bilawals-MacBook-Pro.local>
Date: Sun, 25 Feb 2018 21:43:43 +0100
Subject: [PATCH 42/45] Fixed image size on recipe summary view

---
 styles/main.css | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/styles/main.css b/styles/main.css
index eb7858d0d..32fb53161 100644
--- a/styles/main.css
+++ b/styles/main.css
@@ -458,6 +458,10 @@ p {
   text-align: left;
 }
 
+#recipeSummaryView img {
+  max-width: 200px;
+}
+
 .recipe {
   display: grid;
   grid-gap: 2rem;

From 7fad079a0991656a4be5f4e4128fea812393e3e5 Mon Sep 17 00:00:00 2001
From: Nina Laribi <ninalaribi@Bilawals-MacBook-Pro.local>
Date: Sun, 25 Feb 2018 22:01:38 +0100
Subject: [PATCH 43/45] No longer displays alerts

---
 js/model/dinnerModel.js | 2 --
 1 file changed, 2 deletions(-)

diff --git a/js/model/dinnerModel.js b/js/model/dinnerModel.js
index 5d0def6b6..126114838 100644
--- a/js/model/dinnerModel.js
+++ b/js/model/dinnerModel.js
@@ -101,7 +101,6 @@ const createDinnerModel = () => {
 					resolve(results);
 				})
 				.catch(err => {
-					alert('Sorry, we could not perform this request. It might be your internet connection. Try again later.');
 					reject(err);
 				});
 		});
@@ -139,7 +138,6 @@ const createDinnerModel = () => {
 					resolve(result);
 				})
 				.catch(err => {
-					alert('Sorry, we could not perform this request. It might be your internet connection. Try again later.');
 					reject(err);
 				});
 		});

From 82ed724f3520bd0fc5644c630e194e3a8b9d25aa Mon Sep 17 00:00:00 2001
From: Nina Laribi <ninalaribi@Bilawals-MacBook-Pro.local>
Date: Sun, 25 Feb 2018 22:03:49 +0100
Subject: [PATCH 44/45] Add catch-statement to getDish

---
 js/view/DishDetailsView.js | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/js/view/DishDetailsView.js b/js/view/DishDetailsView.js
index 6bfbc3fc2..b756d964a 100644
--- a/js/view/DishDetailsView.js
+++ b/js/view/DishDetailsView.js
@@ -167,6 +167,8 @@ const createDishDetailsView = (container, model) => {
       dishPreparationElement.appendChild(dishPreparationTextElement)
 
       container.appendChild(dishPreparationElement)
+    }).catch(error => {
+      loadingAlert.innerHTML = error;
     });
   }
 

From 7e5f21b0c760507127c3dbcd50ac4fad2f113810 Mon Sep 17 00:00:00 2001
From: Andrew Szucs <andrew0szucs@gmail.com>
Date: Tue, 27 Feb 2018 11:30:10 +0100
Subject: [PATCH 45/45] Fix error message when no network. Fix totalPriceValue
 in expandable sidebar.

---
 index.html                  |   2 +-
 js/model/dinnerModel.js     | 100 ++++++++++++++++--------------------
 js/view/DishDetailsView.js  |   2 +-
 js/view/DishSearchView.js   |   6 ++-
 js/view/PriceSummaryView.js |   2 +-
 js/view/SidebarView.js      |   4 +-
 6 files changed, 55 insertions(+), 61 deletions(-)

diff --git a/index.html b/index.html
index 72a0001c5..dcb3ae7f6 100644
--- a/index.html
+++ b/index.html
@@ -34,7 +34,7 @@ <h1>Dinner Planner</h1>
             <div id="titleBar">
               <h4 id="titleBarTitle">My Dinner</h4>
               <div id="collapsedMenuTotalPrice" class="totalPrice showOnMobile">
-                <span class="totalPriceCurrency">SEK</span> <span class="totalPriceValue">77.20</span>
+                <span class="totalPriceCurrency">SEK</span> <span id="hiddenTotalPriceValue">77.20</span>
               </div>
               <button id="expandButton" class="secondaryButton showOnMobile" onclick="toggleSidebar()">
                 Expand
diff --git a/js/model/dinnerModel.js b/js/model/dinnerModel.js
index 126114838..695dfd14b 100644
--- a/js/model/dinnerModel.js
+++ b/js/model/dinnerModel.js
@@ -78,69 +78,59 @@ const createDinnerModel = () => {
 	// you can use the filter argument to filter out the dish by name or ingredient (use for search)
 	// if you don't pass any filter all the dishes will be returned
 	const getAllDishes = (type, filter) => {
-		return new Promise((resolve, reject) => {
-			let options = {
-				headers: {
-					'X-Mashape-Key': apiConfig.apiKey
-				}
-			};
+		let options = {
+			headers: {
+				'X-Mashape-Key': apiConfig.apiKey
+			}
+		};
 
-			let queryParams = [`instructionsRequired=true`];
+		let queryParams = [`instructionsRequired=true`];
 
-			if (type !== undefined && type !== 'all') {
-				queryParams.push(`type=${encodeURIComponent(type)}`);
-			}
+		if (type !== undefined && type !== 'all') {
+			queryParams.push(`type=${encodeURIComponent(type)}`);
+		}
 
-			if (filter !== undefined && filter !== "") {
-				queryParams.push(`query=${encodeURIComponent(filter)}`);
-			}
+		if (filter !== undefined && filter !== "") {
+			queryParams.push(`query=${encodeURIComponent(filter)}`);
+		}
 
-			fetch(`https://spoonacular-recipe-food-nutrition-v1.p.mashape.com/recipes/search?${queryParams.join('&')}`, options)
-				.then(res => res.json())
-				.then(({ results }) => {
-					resolve(results);
-				})
-				.catch(err => {
-					reject(err);
-				});
-		});
+		return fetch(`https://spoonacular-recipe-food-nutrition-v1.p.mashape.com/recipes/search?${queryParams.join('&')}`, options)
+			.then(res => res.json())
+			.then(({ results }) => {
+				return results
+			})
 	}
 
 	//function that returns a dish of specific ID
 	const getDish = id => {
-		return new Promise((resolve, reject) => {
-			let options = {
-				headers: {
-					'X-Mashape-Key': apiConfig.apiKey
-				}
-			};
-
-			let queryParams = [`includeNutrition=true`];
-
-			let recognizedDishTypes = [
-				"appetizer",
-				"mainCourse",
-				"sideDish",
-				"dessert",
-				"salad",
-				"bread",
-				"breakfast",
-				"soup",
-				"beverage",
-				"sauce",
-				"drink"
-			];
-
-			fetch(`https://spoonacular-recipe-food-nutrition-v1.p.mashape.com/recipes/${id}/information?${queryParams.join('&')}`, options)
-				.then(res => res.json())
-				.then(result => {
-					result.dishType = result.dishTypes.find(dishType => recognizedDishTypes.includes(dishType)) || 'main course';
-					resolve(result);
-				})
-				.catch(err => {
-					reject(err);
-				});
-		});
+		let options = {
+			headers: {
+				'X-Mashape-Key': apiConfig.apiKey
+			}
+		};
+
+		let queryParams = [`includeNutrition=true`];
+
+		let recognizedDishTypes = [
+			"appetizer",
+			"mainCourse",
+			"sideDish",
+			"dessert",
+			"salad",
+			"bread",
+			"breakfast",
+			"soup",
+			"beverage",
+			"sauce",
+			"drink"
+		];
+
+		return fetch(`https://spoonacular-recipe-food-nutrition-v1.p.mashape.com/recipes/${id}/information?${queryParams.join('&')}`, options)
+			.then(res => res.json())
+			.then(result => {
+				result.dishType = result.dishTypes.find(dishType => recognizedDishTypes.includes(dishType)) || 'main course';
+				return result
+			})
 	};
 
 	return ({
diff --git a/js/view/DishDetailsView.js b/js/view/DishDetailsView.js
index b756d964a..1204b5d61 100644
--- a/js/view/DishDetailsView.js
+++ b/js/view/DishDetailsView.js
@@ -168,7 +168,7 @@ const createDishDetailsView = (container, model) => {
 
       container.appendChild(dishPreparationElement)
     }).catch(error => {
-      loadingAlert.innerHTML = error;
+      loadingAlert.innerHTML = `There was a problem with loading the dishes. ${error}`;
     });
   }
 
diff --git a/js/view/DishSearchView.js b/js/view/DishSearchView.js
index a85ad584c..062ee9157 100644
--- a/js/view/DishSearchView.js
+++ b/js/view/DishSearchView.js
@@ -60,11 +60,13 @@ const createDishSearchView = (container, model) => {
         return;
       }
 
+      console.log(dishes)
       dishes.map(dish => {
         dishSearchResultsElement.append(createDishResultElement(dish))
       })
-    }).catch(error => {
-      loadingAlert.innerHTML = error;
+    })
+    .catch(error => {
+      loadingAlert.innerHTML = `There was a problem with loading the dishes. ${error}`;
     });
   }
 
diff --git a/js/view/PriceSummaryView.js b/js/view/PriceSummaryView.js
index d49d47080..e61e658f2 100644
--- a/js/view/PriceSummaryView.js
+++ b/js/view/PriceSummaryView.js
@@ -119,7 +119,7 @@ const createPriceSummaryView = (container, model) => {
       }
     })
 
-    _totalPrice.innerHTML = `${totalPriceValue}.00`
+    _totalPrice.innerHTML = `${totalPriceValue}`
   }
   const update = _createUpdate(model)
 
diff --git a/js/view/SidebarView.js b/js/view/SidebarView.js
index f9e2e5c11..47b9fa515 100644
--- a/js/view/SidebarView.js
+++ b/js/view/SidebarView.js
@@ -18,6 +18,7 @@ const createSidebarView = (container, model) => {
   const confirmMenuButton = container.querySelector('#confirmMenuButton')
   const _menuTableContent = container.querySelector('#tableContent')
   const _totalPrice = container.querySelector('#totalPriceValue')
+  const _hiddenTotalPrice = container.querySelector('#hiddenTotalPriceValue')
 
   const _createUpdate = (model) => (changeDetails) => {
     state.numberOfGuests = model.getNumberOfGuests()
@@ -58,7 +59,8 @@ const createSidebarView = (container, model) => {
       _menuTableContent.appendChild(createNewRow(item.title, item.pricePerServing))
     )
 
-    _totalPrice.innerHTML = `${state.totalMenuPrice}.00`
+    _totalPrice.innerHTML = `${state.totalMenuPrice}`
+    _hiddenTotalPrice.innerHTML = `${state.totalMenuPrice}`
 
   }