react/NEWreact.html at 68b2669a6395ae759b1f0bc26892610abe9a76ae · bfl-itp/react · 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
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122

<html>
  <!--new react assignement; code adapted from http://videofortheweb.org/code example -->

	<head>
		<title>Learn About Meditation</title>
		<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>

		<style type="text/css">
			*{
				margin: 20
               px;
				padding: 0px;
				font-family: Garamond;
			}

			/*BUTTON STYLING*/
			.buttonContainer{
				position: fixed;
				margin-left: 5px;
				z-index: 100px;
			}
			.button{
				color: black;
				border-style: solid;
				border-width: 5px;
				border-color: grey;
				width: 125px;
				text-align: center;
				padding: 5px;
				margin: 5px;
			}
			.button:hover{
				background-color: rgb(177,207,118);
			}

			/*VIDEO STYLING*/
			.videoContainer{
				clear: left;
				margin-top: 60px;
				width: 100%;
			}
			#videoTitle{
				margin-top: 10px;
				margin-bottom: 10px;
				text-align: center;
				font-size: 24px;
			}
			#video{
				margin: auto;
				width: 640px;
			}
			#videoDescription{
				margin-top: 20px;
				text-align: center;
				font-size: 16px;
			}

		</style>

		<script type="text/javascript">

			var videos = [
				{
					title: "Beginner meditation",
				Test Test Test
				},
				{
					title: "Mindfulness meditation",
					iframe : '<iframe width="640" height="360" src="http://www.youtube-nocookie.com/embed/3nwwKbM_vJc?rel=0" frameborder="0" allowfullscreen></iframe>',
					description: "This video will teach you about the history, theory, and practice of mindfulness meditation."
				},
				{
					title: "Transcendental meditation",
					iframe : '<iframe width="640" height="360" src="http://www.youtube-nocookie.com/embed/ZjT831cjaUY?rel=0" frameborder="0" allowfullscreen></iframe>',
					description: "This video will teach you about transcendental meditation techniques."
				}
			];

			$( document ).ready( function(){

				$('#buttonOne').click(function(){
					console.log("We clicked Button One!");
					$('#videoTitle').html(videos[0].title);
					$('#video').html(videos[0].iframe);
					$('#videoDescription').html(videos[0].description);
				});

				$('#buttonTwo').click(function(){
					console.log("We clicked Button Two!");
					$('#videoTitle').html(videos[1].title);
					$('#video').html(videos[1].iframe);
					$('#videoDescription').html(videos[1].description);
				});

				$('#buttonThree').click(function(){
					console.log("We clicked Button Three!");
					$('#videoTitle').html(videos[2].title);
					$('#video').html(videos[2].iframe);
					$('#videoDescription').html(videos[2].description);
				});

			});

		</script>
	</head>

	<body>
		<div class="buttonContainer">
			<div class="button" id="buttonOne">Beginner meditation</div>
			<div class="button" id="buttonTwo">Mindfulness meditation</div>
			<div class="button" id="buttonThree">Another kind of meditation
          </div>
		</div>

		<div class="videoContainer">
			<div id="videoTitle">Select A Video To Learn About Meditation!</div>
			<div id="video"></div>
			<div id="videoDescription"></div>
		<div>
	</body>
</html>