Skip to content

Commit 920bf86

Browse files
mikeckennedymikeckennedy
committed
Improved genre dropdown.
1 parent d2f3ac2 commit 920bf86

File tree

4 files changed

+58
-48
lines changed

4 files changed

+58
-48
lines changed

‎days/093-096-vuejs/movie_exploder/js/dropdown.js

Lines changed: 14 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -3,30 +3,30 @@
33
let el = {};
44

55
$('.placeholder').on('click', function (ev) {
6-
$('.placeholder').css('opacity', '0');
7-
$('.list__ul').toggle();
6+
$('.placeholder').css('opacity', '0');
7+
$('.list__ul').toggle();
88
});
99

10-
$('.list__ul a').on('click', function (ev) {
11-
ev.preventDefault();
12-
var index = $(this).parent().index();
10+
$('.list__ul a').on('click', function (ev) {
11+
ev.preventDefault();
12+
var index = $(this).parent().index();
1313

14-
$('.placeholder').text( $(this).text() ).css('opacity', '1');
14+
$('.placeholder').text($(this).text()).css('opacity', '1');
1515

16-
console.log($('.list__ul').find('li').eq(index).html());
16+
console.log($('.list__ul').find('li').eq(index).html());
1717

18-
$('.list__ul').find('li').eq(index).prependTo('.list__ul');
19-
$('.list__ul').toggle();
18+
$('.list__ul').find('li').eq(index).prependTo('.list__ul');
19+
$('.list__ul').toggle();
2020

21-
});
21+
});
2222

2323

2424
$('select').on('change', function (e) {
2525

26-
// Set text on placeholder hidden element
27-
$('.placeholder').text(this.value);
26+
// Set text on placeholder hidden element
27+
$('.placeholder').text(this.value);
2828

29-
// Animate select width as placeholder
30-
$(this).animate({width: $('.placeholder').width() + 'px' });
29+
// Animate select width as placeholder
30+
$(this).animate({width: $('.placeholder').width() + 'px'});
3131

3232
});

‎days/093-096-vuejs/movie_exploder/js/fake_data.js

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -197,6 +197,7 @@ movies_temp = {
197197
}
198198

199199
genres_temp = [
200+
"Top movies by genre",
200201
"action",
201202
"adventure",
202203
"animation",

‎days/093-096-vuejs/movie_exploder/js/site.js

Lines changed: 7 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -6,15 +6,19 @@ app = new Vue({
66
search_text: null,
77
movies: movies_temp.hits,
88
genres: genres_temp,
9-
selected_genre: null
9+
selected_genre: genres_temp[0],
10+
no_genre: genres_temp[0],
1011
},
1112
methods: {
12-
search: function() {
13+
search: function () {
1314
let text = this.search_text
1415
console.log("Would have searched for " + text)
1516
},
16-
top_10: function() {
17+
top_10: function () {
1718
console.log("Would have loaded top 10")
19+
},
20+
load_genre: function (genre) {
21+
console.log("Would load " + genre)
1822
}
1923
}
2024
})

‎days/093-096-vuejs/movie_exploder/views/index.html

Lines changed: 36 additions & 31 deletions
Original file line numberDiff line numberDiff line change
@@ -1,57 +1,62 @@
11
<!DOCTYPE html>
2+
<!--suppress HtmlFormInputWithoutLabel -->
23
<html lang="en">
34
<head>
45
<meta charset="UTF-8">
56
<title>Movie Exploder!</title>
67

78
<link rel="stylesheet" href="../css/bootstrap/css/bootstrap.css">
89
<link rel="stylesheet" href="../css/site.css">
10+
<link rel="stylesheet" href="../css/dropdown.css">
911

1012
</head>
1113
<body>
1214

13-
<div class="card" id="app">
14-
<h1>Movie Exploder</h1>
15+
<div class="card" id="app">
16+
<h1>Movie Exploder</h1>
1517

16-
<div class="controls">
17-
<!--suppress HtmlFormInputWithoutLabel -->
18-
<input type="text" v-model="search_text"
19-
class="form-control"
20-
placeholder=" Search for a movie by keyword"
21-
@keyup.enter="search()"
22-
>
18+
<div class="controls">
19+
<!--suppress HtmlFormInputWithoutLabel -->
20+
<input type="text" v-model="search_text"
21+
class="form-control"
22+
placeholder=" Search for a movie by keyword"
23+
@keyup.enter="search()"
24+
>
2325

24-
<div class="subcontrols">
26+
<div class="subcontrols">
2527

26-
<a class="top_10" @click="top_10()">Top 10</a>
28+
<a class="top_10" @click="top_10()">Top 10</a>
2729

28-
<select v-model="selected_genre">
29-
<option v-for="g in genres" :value="g">{{g}}</option>
30-
</select>
31-
32-
</div>
30+
<select v-model="selected_genre"
31+
@change="load_genre(selected_genre)">
32+
<option v-for="g in genres" :value="g">{{g}}</option>
33+
</select>
3334

3435
</div>
3536

36-
<div class="movies">
37-
<div class="movie" v-for="m in movies">
38-
<div class="title">{{m.title.toLocaleUpperCase()}}</div>
39-
<div class="attributes">
40-
<span class="year" v-if="m.year > 0">{{m.year}}</span>
41-
<span class="year" v-else>NO YEAR</span>
42-
<span class="rating" v-if="m.rating">{{m.rating}}</span>
43-
<span class="score">score {{m.imdb_score}}</span>
44-
</div>
45-
<div class="genres">
46-
<span class="badge badge-info" v-for="g in m.genres">{{g}}</span>
47-
</div>
37+
</div>
38+
39+
<div class="movies">
40+
<div class="movie" v-for="m in movies">
41+
<div class="title">{{m.title.toLocaleUpperCase()}}</div>
42+
<div class="attributes">
43+
<span class="year" v-if="m.year > 0">{{m.year}}</span>
44+
<span class="year" v-else>NO YEAR</span>
45+
<span class="rating" v-if="m.rating">{{m.rating}}</span>
46+
<span class="score">score {{m.imdb_score}}</span>
47+
</div>
48+
<div class="genres">
49+
<span class="badge badge-info" v-for="g in m.genres">{{g}}</span>
4850
</div>
4951
</div>
5052
</div>
53+
</div>
5154

52-
<script src="../js/vue/vue.js"></script>
53-
<script src="../js/fake_data.js"></script>
54-
<script src="../js/site.js"></script>
55+
<script src="../js/vue/vue.js"></script>
56+
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.2/jquery.min.js'></script>
57+
<script src="../js/fake_data.js"></script>
58+
<script src="../js/site.js"></script>
59+
<script src="../js/dropdown.js"></script>
5560

5661
</body>
5762
</html>

0 commit comments

Comments
 (0)