Cook-Recipe/index.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


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en">
<head>
   <title>The Chef</title>
   <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
   <link rel="stylesheet" type="text/css" href="css/style.css" />
</head>
<body onload = "show()">
   <h1>The Chef's Recipes</h1>
   <!-- Navigation bar -->
   <div class = "navigation">
      <ul>
         <li><a href="index.html" class="current"> Home</a></li>
         <li><a href="recipes.html"> Recipes</a> </li>
         <li><a href="form.html"> Form</a> </li>
         <li><a href="login.html"> Login</a> </li>
      </ul>
   </div>
   <div id="content">
   <h2> Welcome To Our Special Recipes!</h2>
      <p>If you have ever wonder what you should prepared for an awesome meal, here are some suggestions for a fine meal.<br/>
      </p>
      <hr></hr>
      <h3>Here is the most popular dish on Chef's Recipes:</h3>
      <div id="pop"></div>
      <p>
         Enjoy your meal!
      </p>
   </div>
   <script>
   var out = document.getElementById("pop");
	function show(){
		var anObj = new XMLHttpRequest();
		anObj.open("GET", "indexController.php?", true);
		anObj.send();
		anObj.onreadystatechange = function () {
			if (anObj.readyState == 4 && anObj.status == 200) {
				var array = JSON.parse(anObj.responseText);
				var id = array[0]["ID"];
				var ajax = new XMLHttpRequest();
				ajax.open("GET", "recipes.php?pop=" + id, true);
				ajax.send();
				ajax.onreadystatechange =
				function () {
					if (ajax.readyState == 4 && ajax.status == 200) {
						out.innerHTML = ajax.responseText;
					}
				}
			}
		}
	}
   </script>

</body>
</html>