-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathmovies.html
121 lines (96 loc) · 3.54 KB
/
movies.html
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
<!DOCTYPE html>
<html lang="en">
<head>
<title>Favorite Movies</title>
<link rel="stylesheet" type="text/css" href="style.css">
<script src="https://code.jquery.com/jquery-1.9.1.min.js"></script>
<script>
$(document).ready(function() {
});
function saveToLocalStorage(){
var tempTitle = document.getElementById("title").value;
if(localStorage.getItem(tempTitle) === null){ //checks if the movie title is not already in the database
//gets and sets the values from the user form
var tempYear = document.getElementById("year").value;
var tempDirector = document.getElementById("director").value;
var tempPoster = document.getElementById("poster").value;
var key = tempTitle;
var values = [tempYear, tempDirector, tempPoster];
//sets values to localStorage
localStorage.setItem(key, JSON.stringify(values));
appendToTable(key, values)
}
}
function appendToTable(key, values){
var table = document.getElementById("localTable");
var row = table.insertRow(1); //inserts a new row
//inserts four empty cells
var cell1 = row.insertCell(0);
var cell2 = row.insertCell(1);
var cell3 = row.insertCell(2);
var cell4 = row.insertCell(3);
//sets each cell to the corresponding value
cell1.innerHTML = key;
cell2.innerHTML = values[0];
cell3.innerHTML = values[1];
cell4.innerHTML = values[2];
showLocalStorage();
}
//traverses through the existing values in localStorage and adds them to the table
function populateExisting(){
for(var i =0; i < localStorage.length; i++){
appendToTable(localStorage.key(i), JSON.parse(localStorage.getItem(localStorage.key(i))) )
}
}
//displays localStorage values in console
function showLocalStorage(){
var i;
console.log("local storage");
console.log(localStorage.length);
for (i = 0; i < localStorage.length; i++) {
console.log(localStorage.key(i) + "=[" + localStorage.getItem(localStorage.key(i)) + "]");
}
}
//clears all values in localStorage and table
function clearLocalStorage(){
$("#localTable tbody tr").remove()
localStorage.clear();
showLocalStorage();
}
</script>
</head>
<body onload="populateExisting();">
<body>
<h1>Favorite Movies List </h1>
<div class="form">
<h4>Enter the information below and click submit to store it into the database.</h4>
Movie title:
<input id="title" placeholder="Enter movie title" />
Year of release:
<input id="year" placeholder="Enter year of release" />
Director:
<input id="director" placeholder="Enter director" />
Poster URL:
<input id="poster" placeholder="Enter poster URL" />
<input type="submit" value="Submit" onclick="saveToLocalStorage()" />
</div>
<div id="localStorageDiv" class="float">
<table id="localTable" border="1">
<thead>
<tr>
<th>Title</th>
<th>Year of Release</th>
<th>Director</th>
<th>Poster</th>
</tr>
</thead>
<tbody>
<tr id ="tableROW">
</tr>
</tbody>
</table>
<input type="submit" value="Clear database" onclick="clearLocalStorage()" />
</div>
</body>
</body>
</html>