-
Notifications
You must be signed in to change notification settings - Fork 0
/
movie_picker.html
106 lines (99 loc) · 5.49 KB
/
movie_picker.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
<html>
<head>
<title>Random Top 100 Movie</title>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<script>
var movies = ["Jeanne Dielman, 23 Quai du Commerce, 1080 Bruxelles", "Vertigo", "Citizen Kane", "Tokyo Story", "In the Mood for Love", "2001: A Space Odyssey", "Beau travail", "Mulholland Dr.", "Man with a Movie Camera", "Singin' in the Rain", "Sunrise: A Song of Two Humans", "The Godfather", "La Règle du jeu", "Cléo from 5 to 7", "The Searchers", "Meshes of the Afternoon", "Close-up", "Persona", "Apocalypse Now", "Seven Samurai", "The Passion of Joan of Arc", "Late Spring", "Playtime", "Do the Right Thing", "Au hasard Balthazar", "The Night of the Hunter", "Shoah", "Daisies", "Taxi Driver", "Portrait of a Lady on Fire", "8½", "Mirror", "Psycho", "L'Atalante", "Pather Panchali", "City Lights", "M", "À bout de souffle", "Some Like It Hot", "Rear Window", "Bicycle Thieves", "Rashomon", "Stalker", "Killer of Sheep", "Barry Lyndon", "The Battle of Algiers", "North by Northwest", "Ordet", "Wanda", "The 400 Blows", "The Piano", "Fear Eats the Soul", "News from Home", "Le Mépris", "Blade Runner", "Battleship Potemkin", "The Apartment", "Sherlock Jr.", "Sans Soleil", "La dolce vita", "Moonlight", "Daughters of the Dust", "GoodFellas", "The Third Man", "Casablanca", "Touki Bouki", "Andrei Rublev", "La Jetée", "The Red Shoes", "The Gleaners and I", "Metropolis", "L'avventura", "Journey to Italy", "My Neighbour Totoro", "Spirited Away", "Imitation of Life", "Sansho the Bailiff", "Sunset Blvd.", "Sátántangó", "A Brighter Summer Day", "Modern Times", "A Matter of Life and Death", "Céline and Julie Go Boating", "Blue Velvet", "The Spirit of the Beehive", "Pierrot le fou", "Histoire(s) du Cinéma", "The Shining", "CHUNGKING EXPRESS", "Parasite", "Yi Yi", "Ugetsu Monogatari", "The Leopard", "Madame de...", "A Man Escaped", "Once upon a Time in the West", "Tropical Malady", "Black Girl", "The General", "Get Out"]
var pick_movie = function() {
var display = document.getElementById("your_movie");
display.innerHTML = "";
display.style.backgroundImage = "url('images/loading-gif.gif')";
setTimeout(_picker, 1000);
}
var _picker = function() {
random_integer = Math.floor(Math.random() * movies.length) - 1;
var display = document.getElementById("your_movie");
display.style.backgroundImage = "";
display.innerHTML = "";
var current_film = movies[random_integer]
var movie_payload = "#" + (random_integer + 1) + ": " + current_film
movie_payload += " <a target=\"_blank\" href=\"https://www.imdb.com/find/?q=" + current_film + "\"><img class=\"icon\" src=\"https://upload.wikimedia.org/wikipedia/commons/thumb/c/cc/IMDb_Logo_Square.svg/2048px-IMDb_Logo_Square.svg.png\"></a>"
display.innerHTML = movie_payload
}
var show_movies = function() {
var ul = document.getElementById("all_movies");
for(var n=0;n<movies.length;n++) {
var li = document.createElement("li");
var te = document.createTextNode(movies[n])
li.appendChild(te)
ul.appendChild(li)
}
}
</script>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l9a69psu" crossorigin="anonymous">
<style>
ol {
columns: 2;
-webkit-columns: 2;
-moz-columns: 2;
column-gap: 10%;
text-align: left;
margin: auto;
list-style-position: inside;
width: 90%;
height: 180%;
}
.all {
margin: auto;
}
#picker div{
height: 15%;
}
#picker button{
height: 11%;
width: 75%;
background-color: #04AA6D;
border: none;
color: white;
padding: 20px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
margin: 4px 2px;
border-radius: 8px;
}
#picker{
margin: auto;
margin-top: 3%;
width: 75%;
text-align: center;
font-size: x-large;
color: darkblue;
}
#picker #your_movie {
margin-top: 10%;
background-repeat: no-repeat;
background-position: center;
background-size: contain;
}
.icon {
height: 25px;
width: 25px;
}
</style>
</head>
<body onload="show_movies()">
<div id="picker">
<button onclick="pick_movie()">Click to pick from the BFI poll</button><br>
<div id="your_movie"></div>
</div>
<div class="all">
<ol id="all_movies">
</ol>
</div>
</body>
</html>