Cook-Recipe/recipes.html at master · Chrislin923/Cook-Recipe · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Recipes</title>
   <link rel="stylesheet" type="text/css" href="css/style.css" />
</head>
<body onload= "showAll()">
<h1>Recipes</h1>
   <!-- Navigation bar -->
   <div class = "navigation">
      <ul>
         <li><a href="index.html"> Home</a></li>
         <li><a href="recipes.html" class="current"> Recipes</a> </li>
         <li><a href="form.html"> Form</a> </li>
         <li><a href="login.html"> Login</a> </li>
      </ul>
   </div>
   <div id="toChange"></div>
   <script>
   var cover = document.getElementById("toChange");
	function showAll() {
		var ajax = new XMLHttpRequest();
		ajax.open("GET", "recipes.php?command=showAll", true);
		ajax.send();
		ajax.onreadystatechange = function() {
			if (ajax.readyState == 4 && ajax.status == 200) {
				var array = JSON.parse(ajax.responseText);
				var str = "";
				for (var index = 0; index < array.length; index++) {
					str += "<img onclick = 'recipe(event)' id = '"+index + "''" + "' class = 'oneRecipe' src = "+ array[index]+ ">"
				}
				cover.innerHTML = str;
			}
		}
	}
	   function addToFavorites(id){
			var user = 0;
			var ajax = new XMLHttpRequest();
		   	var url = "controller.php?method=addFavorite&id=" + id
		   			+ "&user=" + user;
		   	ajax.open("GET", url, true); // Arguments Method, url, async
		   	ajax.send();
		   	ajax.onreadystatechange = function () {
		   		if (ajax.readyState == 4 && ajax.status == 200) {
		   	   		 var arr = ajax.responseText;
		   	   		 alert(arr);
		   	   	}
		   	   	else {
		   	   		//document.getElementById("divToChange").innerHTML = "failure";
		   	   	}
		   	}
		}
	function recipe(event){
		var id = event.target.id;
		var ajax = new XMLHttpRequest();
		ajax.open("GET", "recipes.php?text=" + id, true);
		ajax.send();
		ajax.onreadystatechange =
		function () {
			if (ajax.readyState == 4 && ajax.status == 200) {
				cover.innerHTML = ajax.responseText;
			}
		}
	}
   </script>

</body>
</html>