-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
462 lines (393 loc) · 21.7 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
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="icon" href="static/bulbFavicon.ico">
<!-- Bootstrap embedding -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<!-- Tailwindcss framework embedding -->
<link href="static/css/tailwind.min.css" rel="stylesheet">
<!-- css embedding -->
<link rel="stylesheet" href="static/css/movieApi.css">
<!-- Bootstrap jquery embedding -->
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
<script type="text/javascript" src="static/js/jquery-3.5.1.min.js"></script>
<title>Welcome to Cinegram !</title>
</head>
<body>
<!-- preloader -->
<div class="loader-wrapper">
<!-- Loading square for squar.red network -->
<span class="loader"><span class="loader-inner"></span></span>
</div>
<!-- Header -->
<header class="text-gray-700 body-font">
<div class="container mx-auto flex flex-wrap p-5 flex-col md:flex-row items-center">
<a class="flex title-font font-medium items-center text-gray-900 mb-4 md:mb-0">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" class="w-10 h-10 text-white p-2 bg-green-500 rounded-full" viewBox="0 0 24 24">
<path d="M12 2L2 7l10 5 10-5-10-5zM2 17l10 5 10-5M2 12l10 5 10-5"></path>
</svg>
<span class="ml-3 text-xl">Cinegram</span>
</a>
<nav class="md:ml-auto md:mr-auto flex flex-wrap items-center text-base justify-center">
</nav>
<a href="contactUs.html" target="_blank">
<button class="hover:text-red-600">Contact Us
</button>
</a>
</div>
</header>
<!-- top content -->
<section class="text-gray-700 body-font">
<div class="container mx-auto flex flex-col justify-center items-center">
<img class="topImg" alt="hero" src="https://source.unsplash.com/1200x400/?movie,marvel">
<div class="w-full md:w-2/3 flex flex-col mb-16 items-center text-center">
<h1 class="title-font sm:text-4xl text-3xl mb-4 font-medium text-gray-900">Don't know what to watch ?</h1>
<p class="dontWorry mb-8 leading-relaxed">Don't you worry dear ! you're at right place. We'll help you out.</p>
<div class="flex w-full justify-center items-end">
<div class="relative mr-4 lg:w-full xl:w-1/2 w-2/4 md:w-full text-left">
<label for="hero-field" class="leading-7 text-sm text-gray-600">Movie's name</label>
<input type="text" id="movieInput" name="movieInput" class="w-full bg-gray-100 rounded border border-gray-300 focus:border-indigo-500 text-base outline-none text-gray-700 py-1 px-3 leading-8 transition-colors duration-200 ease-in-out">
</div>
<button class="inline-flex text-white bg-green-500 border-0 py-2 px-6 focus:outline-none hover:bg-green-600 rounded text-lg" id="searchBtn">Search</button>
</div>
<span class="error hidden" id="err-movieInput">
Please enter character more than 5.
</span>
<span class="error hidden" id="err-ApiSearch">
No results found. Please try again with valid movie name.
</span>
<p id="movieInputP" class="text-sm mt-2 text-gray-500 mb-8 w-full">Choose your next movie with our help.</p>
</div>
</div>
<div class="container">
<div class="row">
<div class="col-lg-12 col-sm-12 col-md-12">
<span id="movieList">
</span>
</div>
</div>
</div>
</section>
<!-- About us -->
<section class="text-gray-700 body-font">
<div class="container px-5 py-24 mx-auto flex flex-wrap">
<div class="lg:w-1/2 w-full mb-10 lg:mb-0 rounded-lg overflow-hidden">
<img alt="feature" class="object-cover object-center h-full w-full" src="https://source.unsplash.com/720x600/?dc,movie">
</div>
<div class="flex flex-col flex-wrap lg:py-6 -mb-10 lg:w-1/2 lg:pl-12 lg:text-left text-center">
<div class="flex flex-col mb-10 lg:items-start items-center">
<div class="w-12 h-12 inline-flex items-center justify-center rounded-full bg-indigo-100 text-indigo-500 mb-5">
<svg fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" class="w-6 h-6" viewBox="0 0 24 24">
<path d="M22 12h-4l-3 9L9 3l-3 9H2"></path>
</svg>
</div>
<div class="flex-grow">
<h2 class="text-gray-900 text-lg title-font font-medium mb-3">Never Boring</h2>
<p class="leading-relaxed text-base">We give the best options to make sure that you don't select a boring movie.</p>
</div>
</div>
<div class="flex flex-col mb-10 lg:items-start items-center">
<div class="w-12 h-12 inline-flex items-center justify-center rounded-full bg-indigo-100 text-indigo-500 mb-5">
<svg fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" class="w-6 h-6" viewBox="0 0 24 24">
<circle cx="6" cy="6" r="3"></circle>
<circle cx="6" cy="18" r="3"></circle>
<path d="M20 4L8.12 15.88M14.47 14.48L20 20M8.12 8.12L12 12"></path>
</svg>
</div>
<div class="flex-grow2">
<h2 class="text-gray-900 text-lg title-font font-medium mb-3">Covers all you desire</h2>
<p class="leading-relaxed text-base">We provide results for almost all movies that you want to reach.</p>
</div>
</div>
<div class="flex flex-col mb-10 lg:items-start items-center">
<div class="w-12 h-12 inline-flex items-center justify-center rounded-full bg-indigo-100 text-indigo-500 mb-5">
<svg fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" class="w-6 h-6" viewBox="0 0 24 24">
<path d="M20 21v-2a4 4 0 00-4-4H8a4 4 0 00-4 4v2"></path>
<circle cx="12" cy="7" r="4"></circle>
</svg>
</div>
<div class="flex-grow3">
<h2 class="text-gray-900 text-lg title-font font-medium mb-3">Never disappoints</h2>
<p class="leading-relaxed text-base">We make sure that you don't get disappointed.</p>
</div>
</div>
</div>
</div>
</section>
<!-- Footer -->
<footer class="text-gray-700 body-font">
<div class="container px-5 py-8 mx-auto flex items-center sm:flex-row flex-col">
<a class="flex title-font font-medium items-center md:justify-start justify-center text-gray-900">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" class="w-10 h-10 text-white p-2 bg-green-500 rounded-full" viewBox="0 0 24 24">
<path d="M12 2L2 7l10 5 10-5-10-5zM2 17l10 5 10-5M2 12l10 5 10-5"></path>
</svg>
<span class="ml-3 text-xl">Cinegram</span>
</a>
<p class="text-sm text-gray-500 sm:ml-4 sm:pl-4 sm:border-l-2 sm:border-gray-200 sm:py-2 sm:mt-0">© 2021 survi suman —
<a href="https://twitter.com/knyttneve" class="text-gray-600 ml-1" rel="noopener noreferrer" target="_blank">@sumansurvi</a>
</p>
</div>
</footer>
<script type="text/javascript">
// Preloader
$(window).on('load',function(){
$('.loader-wrapper').fadeOut('slow');
});
// -------
// to disable the search btn everytime the page gets loaded
$(document).ready(function() {
document.getElementById('searchBtn').disabled=true;
});
var msg = "";
var input = document.getElementById('movieInput')
input.addEventListener("keyup", function(event) {
if (event.keyCode === 13) {
event.preventDefault();
document.getElementById('searchBtn').click();
}
});
//search button
$('#searchBtn').on('click',function(event){
$('.loader-wrapper').show();
// to clear the previous data every time search button is clicked
document.getElementById('movieList').innerHTML='';
// to prevent default event (search btn will not get clicked if we press enter)
event.preventDefault();
// to check id
let btnId = this.id;
// movie input validation to check if it's empty or not
let inputMovie = document.getElementById('movieInput').value;
// to remove the extra spaces from both sides of a string
// inputMovie = inputMovie.trim();
// to remmove the extra spaces from both sides of a string and also from middle of a string
inputMovie = inputMovie.replace(/\s+/g,' ').trim();
if(isEmpty(inputMovie)){
$('.loader-wrapper').fadeOut('slow');
// showing this message because input is empty
msg = "Please enter a movie name";
// putting the msg content in err-movieInput span
document.getElementById('err-movieInput').textContent=msg;
// unhiding the span so that msg is visible to user
$('#err-movieInput').removeClass('hidden');
}else{
// searching the input by search param.
searchMovie(inputMovie);
}
});
// Api fetching by search param
function searchMovie(name){
// hiding the Internet error which has happened previously
$('#err-ApiSearch').addClass('hidden');
// hiding the Input error which has happened previously
$('#err-movieInput').addClass('hidden');
// The main purpose of Ajax is to improve the speed, performance and usability of a web application.
$.ajax({
// Both GET and POST method is used to transfer data from client to server in HTTP protocol but Main difference between POST and GET method is that GET carries request parameter appended in URL string while POST carries request parameter in message body which makes it more secure way of transferring data from client to server in http protocol.
type: "POST",
// OMDB API -----> Open Movie Database
url: 'https://www.omdbapi.com/?s='+name+'&apikey=e905fad1',
// executes a code snippet after a specified delay (in milliseconds).
timeout: 0,
// if API calling is successful, this function works.
success : function(data) {
if(data.Response=='True'){
// creating an array
var duplicateArr = new Array();
for(let i = 0 ; i < data.Search.length ; i++){
let title = data.Search[i].Title;
// we're making an array of strings by spliting the string from all white spaces
let splitArr = title.split(" ");
// we're joining array of string by adding underscore"_" between them
let joinTitle = splitArr.join("_");
duplicateArr.push(joinTitle);
}// we're replacing " " with "_" because it's not accepting white space values
console.log(duplicateArr, "length", duplicateArr.length);
// removing all duplicate values
var uniqueArr = removeDuplicates(duplicateArr);
console.log(uniqueArr, "uLength", uniqueArr.length);
for(let i = 0 ; i < uniqueArr.length ; i++){
searchMovieByTitle(uniqueArr[i]);
}
}else{
$('.loader-wrapper').fadeOut('slow');
$('#err-ApiSearch').removeClass('hidden');
}
},
// if API calling fails due to some error like internet failure, then this function works
error : function(event,xhr){
// An event represents the precise moment when something happens
// xhr -----> XMLHttpRequest object (to update parts of a web page, without reloading the whole page.)
// unhiding err-ApiSearch span to show the error message to user
$('#err-ApiSearch').removeClass('hidden');
}
});
}
// Api fetching by title param
function searchMovieByTitle(title){
// hiding the Internet error which has happened previously
$('#err-ApiSearch').addClass('hidden');
console.log(title);
let splitArr;
let joinTitle;
if(title.includes("_")){
// we're making an array of strings by spliting the string from all underscores"_""
splitArr = title.split("_");
// we're joining array of string by adding a white space" " between them
joinTitle = splitArr.join(" ");
title = joinTitle;
}
//calling an ajax function or an api to get the movie data using title of the movie
$.ajax({
type: "POST",
url: 'https://www.omdbapi.com/?t='+title+'&apikey=e905fad1',
timeout: 2000,
success : function(data) {
//var obj = jQuery.parseJSON(data);
if(data.Response=='True'){
console.log(data,'data');
showMovie(data);
}else{
$('#err-ApiSearch').removeClass('hidden');
}
},
error : function(event,xhr){
$('#err-ApiSearch').removeClass('hidden');
}
});
$('.loader-wrapper').fadeOut('slow');
}
$('#movieInput').on('keyup',function(){
var input = document.getElementById('movieInput').value;
if(input == ''){
document.getElementById('searchBtn').disabled=true;
}else{
document.getElementById('searchBtn').disabled=false;
}
});
/*
function movieInputValidation(){
var input = document.getElementById('movieInput').value;
// console.log(input, "---" , input.length);
// validation for minimum character input
if(input.length>=5){
$('#err-movieInput').addClass('hidden');
}else{
if(input.length==1){
msg = "Please enter 4 more characters";
//$('#err-movieInput').innerH("Please enter 4 more characters");
}else if(input.length==2){
msg = "Please enter 3 more characters";
}else if(input.length==3){
msg = "Please enter 2 more characters";
}else if(input.length==4){
msg = "Please enter 1 more characters";
}else{
msg = "Please enter some characters";
}
document.getElementById('err-movieInput').innerHTML=msg;
$('#err-movieInput').removeClass('hidden');
}
} */
// this function is used for showing outcomes of the search dynamically.
function showMovie(data){
let movieList = '';
let title = '';
//for rating list
let ratingList = '';
for( let i=0 ; i < data.Ratings.length ; i++){
if( i == data.Ratings.length-1){
ratingList += data.Ratings[i].Source+' : '+ data.Ratings[i].Value+'.';
}else{
ratingList += data.Ratings[i].Source+' : '+ data.Ratings[i].Value+' , ';
}
}
if(data.Ratings == 'N/A' || data.Ratings == ''){
ratingList = 'No rating information available for this movie.';
}
//for actors
let namesarr = data.Actors.split(",");
let actorLink='';
for(let i=0; i<namesarr.length ; i++)
{
if(i == namesarr.length-1){
actorLink += '<a target="_blank" href="http://www.google.com/search?q='+namesarr[i].split(" ").join("+")+'">'+namesarr[i]+'</a>.';
}else{
actorLink += '<a target="_blank" href="http://www.google.com/search?q='+namesarr[i].split(" ").join("+")+'">'+namesarr[i]+'</a>,';
}
}
console.log(actorLink);
if(data.Actors == 'N/A' || data.Actors == ''){
actorLink = 'No casting information available for this movie.';
}
//for actors
let plot = '';
if(data.Plot == 'N/A' || data.Plot == ''){
plot = 'No plot information available for this movie.';
}else{
plot=data.Plot;
}
//for genre
let genre = '';
if(data.Genre == 'N/A' || data.Genre == ''){
genre = 'No genre information available for this movie.';
}else{
genre=data.Genre;
}
//for directors
let directorLink = '';
let directorArr = data.Director.split(",");
for( let i=0 ; i < directorArr.length ; i++){
if(i == directorArr.length-1){
directorLink += '<a target="_blank" href="http://www.google.com/search?q='+directorArr[i].split(" ").join("+")+'">'+directorArr[i]+'</a>.';
}else{
directorLink += '<a target="_blank" href="http://www.google.com/search?q='+directorArr[i].split(" ").join("+")+'">'+directorArr[i]+'</a>,';
}
}
if(data.Director == 'N/A'){
directorLink = data.Director;
}
let poster = '';
if(data.Poster == 'N/A' || data.Poster == ''){
poster = 'static/dog.jpg';
}else{
poster=data.Poster;
}
movieList = '<div class="row"><div class="price-column col-lg-12 col-md-12 col-sm-12"><div class="card"><div class="card-header"><div class="row"><div class="col-lg-8 col-md-8 col-sm-8"><p class="movieH">'+data.Title+'</p><hr id="titleHr"><p class="movieP">Ratings : </p><p class="inputP">'+ratingList+'</p><p class="movieP">Cast : </p><p class="inputP">'+ actorLink +'</p><p class="movieP">Introduction :</p><p class="inputP">'+plot+'</p><p class="movieP">Genre : </p><p class="inputP">' +genre+ '</p><p class="movieP">Director : </p><p class="inputP">' +directorLink+ '</p></div><div class="header-img col-lg-4 col-md-4 col-sm-4 "><img alt="feature" class="movieImg object-cover object-center h-full w-full pull-right" src="'+poster+'"><a class="trailerBtn" target="_blank" href="https://www.youtube.com/results?search_query='+data.Title+'">Watch !</a><p class="trailerP">watch related videos on yotube.</p></div></div></div></div></div></div>';
$('#movieList').append(movieList);
}
function isEmpty(value){
if(value == "" || value == null || value == undefined){
return true;
}else{
return false;
}
}
// this function is taking an array as input and removing all the duplictae values
function removeDuplicates(array){
var outputArray = [];
// Count variable is used to add the new unique value only once in the outputArray.
var count = 0;
// Start variable is used to set true if a repeated duplicate value is encountered in the output array.
var start = false;
for (j = 0; j < array.length; j++) {
for (k = 0; k < outputArray.length; k++) {
if ( array[j] == outputArray[k] ) {
start = true;
}
}
count++;
if (count == 1 && start == false) {
outputArray.push(array[j]);
}
start = false;
count = 0;
}
return outputArray;
}
</script>
</body>
</html>