-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
158 lines (148 loc) · 7.13 KB
/
index.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
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>List of Series</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<style>
.card {
width: 25rem;
margin-bottom: 1rem;
}
.card-img-top {
object-fit: cover;
height: 300px; /* adjust this value to your desired height */
}
.card-text {
color: blue;
}
</style>
</head>
<body>
<div class="container">
<h1>List of Series</h1>
<div class="row">
<div class="col-md-6">
<table class="table table-bordered">
<thead>
<tr>
<th>ID</th>
<th>Name</th>
<th>Channel</th>
<th>Seasons</th>
</tr>
</thead>
<tbody id="seriesTableBody">
<tr class="seriesRow" data-id="1">
<td>1</td>
<td>Breaking Bad</td>
<td>AMC</td>
<td>5</td>
</tr>
<tr class="seriesRow" data-id="2">
<td>2</td>
<td>Orange Is the New Black</td>
<td>Netflix</td>
<td>6</td>
</tr>
<tr class="seriesRow" data-id="3">
<td>3</td>
<td>Game of Thrones</td>
<td>HBO</td>
<td>7</td>
</tr>
<tr class="seriesRow" data-id="3">
<td>4</td>
<td>The Big Bang Theory</td>
<td>CBS</td>
<td>12</td>
</tr>
<tr class="seriesRow" data-id="3">
<td>5</td>
<td>Sherlock</td>
<td>BBC</td>
<td> 4</td>
</tr>
<tr class="seriesRow" data-id="3">
<td>6</td>
<td>A Very English Scandal</td>
<td>BBC</td>
<td> 2</td>
</tr>
</tr>
<tfoot>
<tr>
<td colspan="4">Seasons Average: 6</td>
</tr>
</tbody>
</table>
</div>
<div class="col-md-6">
<div class="card" style="display:none;">
<img id="seriesImage" class="card-img-top" src="" alt="Series image">
<div class="card-body" id="seriesDetail">
<h5 class="card-title"></h5>
<h6 class="card-subtitle mb-2 text-muted"></h6>
<p class="card-text"></p>
</div>
</div>
</div>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<script>
$(document).ready(function() {
$('.seriesRow').click(function() {
var id = $(this).data('id');
var name = $(this).find('td:nth-child(2)').text();
var channel = $(this).find('td:nth-child(3)').text();
var seasons = $(this).find('td:nth-child(4)').text();
var imageUrl = '';
$('#seriesDetail').find('.card-title').text(name);
$('#seriesDetail').find('.card-subtitle').text(channel);
// $('#seriesDetail').find('.card-text').text(seasons + ' seasons');
$('.card').show();
if (name === 'Breaking Bad') {
$('#seriesDetail').find('.card-subtitle').text( 'Set and filmed in Albuquerque, New Mexico, the series tells the story of Walter White, a struggling and depressed high school chemistry teacher who is diagnosed with lung cancer.');
$('#seriesDetail').find('.card-text').text('https://www.amc.com/shows/breaking-bad');
imageUrl = 'https://i.imgur.com/GGje0vc.jpg';
}
if (name === 'Orange Is the New Black') {
$('#seriesDetail').find('.card-subtitle').text( 'The series begins revolving around Piper Chapman, a woman in her thirties living in New York City who is sentenced to 15 months in Litchfield Penitentiary');
$('#seriesDetail').find('.card-text').text('https://www.netflix.com/co/title/70242311');
imageUrl = 'https://i.imgur.com/EvKe48G.jpg';
}
if (name === 'Game of Thrones') {
$('#seriesDetail').find('.card-subtitle').text( ' Game of Thrones is a fantasy drama television series that follows various noble families as they fight for control of the Seven Kingdoms of Westeros, while an ancient enemy returns to threaten the realm.');
$('#seriesDetail').find('.card-text').text('https://www.hbo.com/game-of-thrones');
imageUrl = 'https://i.imgur.com/TDCEV1S.jpg';
}
if (name === 'The Big Bang Theory') {
$('#seriesDetail').find('.card-subtitle').text( 'Leonard and Sheldon are brilliant physicists—geniuses in the laboratory but socially challenged everywhere else. Enter beautiful, street-smart neighbor Penny, who aims to teach them a thing or two about life. Despite their on-again, off-again relationship in the past, Leonard and Penny have finally gotten married. Even Sheldon has found a female companion, entering into a relationship agreement with neurobiologist Amy Farrah Fowler, and he recently took their relationship to the next level by marrying her after a long courtship. In their free time, Leonard and Sheldon enjoy fantasy role-playing games with their ever-expanding universe of friends, including fellow scientists Koothrappali, Wolowitz, and Wolowitz’s adorable microbiologist wife, Bernadette, who is adjusting to life with their two children.');
$('#seriesDetail').find('.card-text').text('https://www.cbs.com/shows/big_bang_theory/about/');
imageUrl = 'https://i.imgur.com/uAEpVWk.jpg';
}
if (name === 'Sherlock') {
$('#seriesDetail').find('.card-subtitle').text( 'Sherlock depicts consulting detective Sherlock Holmes (Benedict Cumberbatch) solving various mysteries in modern-day London. Holmes is assisted by his flatmate and friend, Dr John Watson (Martin Freeman), who has returned from military service in Afghanistan with the Royal Army Medical Corps');
$('#seriesDetail').find('.card-text').text('https://www.bbc.co.uk/programmes/b018ttws');
imageUrl = 'https://i.imgur.com/02B7qhj.jpg';
}
if (name === 'A Very English Scandal') {
$('#seriesDetail').find('.card-subtitle').text( 'A Very English Scandal is a fact-based three-part British television comedy-drama miniseries based on John Prestons book of the same name.');
$('#seriesDetail').find('.card-text').text('https://www.bbc.co.uk/programmes/p065smy4');
imageUrl = 'https://i.imgur.com/D4y3DrQ.jpg';
}
if(false){}
else {
$('#seriesDetail').find('.card-img-top').removeAttr('src');
$('#seriesImage').attr('src', imageUrl);
}
$('.card').show();
});
});
</script>
</body>
</html>
[...]