jupiter-web-exercises/es6-refactor-solution.html at master · CodeupClassroom/jupiter-web-exercises · 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
<!DOCTYPE html>
<html lang="en">
<head>

	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">

	<title>ES6 Refactor</title>

	<!-- Bootstrap CSS -->
	<link
			href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"
			rel="stylesheet"
			integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u"
			crossorigin="anonymous">
</head>
<body>

<main class="container">

	<h1>ES6 Refactor</h1>

	<h3>Top 3 Favorite Movies</h3>

	<div id="favMovies">
		<ol>
			<li class="movie"></li>
			<hr>
			<li class="movie"></li>
			<hr>
			<li class="movie"></li>
		</ol>
	</div>

	<button id="showBtn" class="btn btn-primary">Show Movies</button>

</main>

<!-- jQuery Version 2.2.4 -->
<script src="http://code.jquery.com/jquery-2.2.4.min.js"></script>

<!-- Bootstrap JS -->
<script
		src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"
		integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa"
		crossorigin="anonymous"></script>

<!-- Custom JS -->
<script>

	{

		"use strict";

		const showBtn = document.getElementById("showBtn");

		const movies = [
			{
				name: "LOTR",
				year: "2001",
				genre: "Fantasy"
			},
			{
				name: "The Matrix",
				year: "1999",
				genre: "Sci-Fi"
			},
			{
				name: "Shine",
				year: "1996",
				genre: "Drama"
			}
		];


		// object destructuring
		// arrow function
		const buildMovieHTML = ({ name, year, genre }) => {
			return `<ul><li>${name}</li><li>${year}</li><li>${genre}</li></ul>`;
		};


		// arrow function
		// for ... of loop
		const addHTMLToPage = (movies) => {
			const listItems = document.getElementsByClassName('movie');
			let i = 0;
			for (let listItem of listItems) {
				listItem.innerHTML = buildMovieHTML(movies[i]);
				++i;
			}
		};


		showBtn.addEventListener("click", () => {
			addHTMLToPage(movies);
		});

	}


</script>

</body>
</html>