javascript-learning/tabletop-food.html at master · CooperUnion/javascript-learning · 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
70
71
72
73
74
75
76
<!DOCTYPE html>
<html>
	<head>
		<title>Google Spreadsheet JSON Example</title>
		<script src="http://code.jquery.com/jquery-latest.js"></script>
		<script src="https://cdnjs.cloudflare.com/ajax/libs/tabletop.js/1.3.5/tabletop.min.js"></script>
		<script>
			$(document).ready(function(){

					//configure spreadsheet
				  var public_spreadsheet_url = '1u-ex1__Af1BLpDHbQCuAzCzmShDsMxdrASSN3AnOmzk';

					//function to get data from the spreadsheet
				  var getData = function () {
				    Tabletop.init({
				    	"key": public_spreadsheet_url,
			        "callback": processData,
			        "simpleSheet": true
				    });
				  }

					//editable function that processes data from the spreadsheet
					var processData = function(data){
						console.log(data);
						for(var i=0; i<data.length; i++) {

							// $("body").append(data[i].foods + " ");
							// $("<h2>").addClass("fancyBorder").html(data[i].foods).appendTo("body");

							if(data[i].price === "$") {
								var price = "cheap";
							} else if(data[i].price === "$$") {
								var price = "average";
							} else if(data[i].price === "$$$") {
								var price = "expensive";
							}

							$("<h2>").addClass("fancyBorder").addClass(price).html(data[i].foods).appendTo("body");

							// $("body").append("<h2 class='fancyBorder "+price+"'>"+data[i].foods+"</h2>");


						}
					};


					//function that runs when the page is ready
				  getData();

			});
		</script>
		<style>

			.fancyBorder {
				border:1px solid black;
			}


			.cheap {
				background-color:green;
			}

			.average {
				background-color:yellow;
			}

			.expensive {
				background-color:red;
			}

		</style>

	</head>
	<body>
	</body>
</html>