Thanks to visit codestin.com
Credit goes to github.com

Skip to content

Commit 2b74f73

Browse files
author
zohaib_akhader
committed
uploading project
0 parents  commit 2b74f73

File tree

6 files changed

+369
-0
lines changed

6 files changed

+369
-0
lines changed

‎README.md

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
# imdblite
2+
Download the project, unzip it and open in VS Code.
3+
4+
Run the project by using VS Code Live Server

‎assets/images/background.jpg

1.54 MB
Loading

‎hp.json

Lines changed: 76 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,76 @@
1+
{
2+
"Search": [
3+
{
4+
"Title": "Harry Potter and the Deathly Hallows: Part 2",
5+
"Year": "2011",
6+
"imdbID": "tt1201607",
7+
"Type": "movie",
8+
"Poster": "https://m.media-amazon.com/images/M/MV5BMGVmMWNiMDktYjQ0Mi00MWIxLTk0N2UtN2ZlYTdkN2IzNDNlXkEyXkFqcGdeQXVyODE5NzE3OTE@._V1_SX300.jpg"
9+
},
10+
{
11+
"Title": "Harry Potter and the Sorcerer's Stone",
12+
"Year": "2001",
13+
"imdbID": "tt0241527",
14+
"Type": "movie",
15+
"Poster": "https://m.media-amazon.com/images/M/MV5BNmQ0ODBhMjUtNDRhOC00MGQzLTk5MTAtZDliODg5NmU5MjZhXkEyXkFqcGdeQXVyNDUyOTg3Njg@._V1_SX300.jpg"
16+
},
17+
{
18+
"Title": "Harry Potter and the Chamber of Secrets",
19+
"Year": "2002",
20+
"imdbID": "tt0295297",
21+
"Type": "movie",
22+
"Poster": "https://m.media-amazon.com/images/M/MV5BMjE0YjUzNDUtMjc5OS00MTU3LTgxMmUtODhkOThkMzdjNWI4XkEyXkFqcGdeQXVyMTA3MzQ4MTc0._V1_SX300.jpg"
23+
},
24+
{
25+
"Title": "Harry Potter and the Prisoner of Azkaban",
26+
"Year": "2004",
27+
"imdbID": "tt0304141",
28+
"Type": "movie",
29+
"Poster": "https://m.media-amazon.com/images/M/MV5BMTY4NTIwODg0N15BMl5BanBnXkFtZTcwOTc0MjEzMw@@._V1_SX300.jpg"
30+
},
31+
{
32+
"Title": "Harry Potter and the Goblet of Fire",
33+
"Year": "2005",
34+
"imdbID": "tt0330373",
35+
"Type": "movie",
36+
"Poster": "https://m.media-amazon.com/images/M/MV5BMTI1NDMyMjExOF5BMl5BanBnXkFtZTcwOTc4MjQzMQ@@._V1_SX300.jpg"
37+
},
38+
{
39+
"Title": "Harry Potter and the Order of the Phoenix",
40+
"Year": "2007",
41+
"imdbID": "tt0373889",
42+
"Type": "movie",
43+
"Poster": "https://m.media-amazon.com/images/M/MV5BOTA3MmRmZDgtOWU1Ny00ZDc5LWFkN2YtNzNlY2UxZmY0N2IyXkEyXkFqcGdeQXVyNTIzOTk5ODM@._V1_SX300.jpg"
44+
},
45+
{
46+
"Title": "Harry Potter and the Deathly Hallows: Part 1",
47+
"Year": "2010",
48+
"imdbID": "tt0926084",
49+
"Type": "movie",
50+
"Poster": "https://m.media-amazon.com/images/M/MV5BMTQ2OTE1Mjk0N15BMl5BanBnXkFtZTcwODE3MDAwNA@@._V1_SX300.jpg"
51+
},
52+
{
53+
"Title": "Harry Potter and the Half-Blood Prince",
54+
"Year": "2009",
55+
"imdbID": "tt0417741",
56+
"Type": "movie",
57+
"Poster": "https://m.media-amazon.com/images/M/MV5BNzU3NDg4NTAyNV5BMl5BanBnXkFtZTcwOTg2ODg1Mg@@._V1_SX300.jpg"
58+
},
59+
{
60+
"Title": "When Harry Met Sally...",
61+
"Year": "1989",
62+
"imdbID": "tt0098635",
63+
"Type": "movie",
64+
"Poster": "https://m.media-amazon.com/images/M/MV5BMjE0ODEwNjM2NF5BMl5BanBnXkFtZTcwMjU2Mzg3NA@@._V1_SX300.jpg"
65+
},
66+
{
67+
"Title": "Dirty Harry",
68+
"Year": "1971",
69+
"imdbID": "tt0066999",
70+
"Type": "movie",
71+
"Poster": "https://m.media-amazon.com/images/M/MV5BMzdhMTM2YTItOWU2YS00MTM0LTgyNDYtMDM1OWM3NzkzNTM2XkEyXkFqcGdeQXVyNjc1NTYyMjg@._V1_SX300.jpg"
72+
}
73+
],
74+
"totalResults": "740",
75+
"Response": "True"
76+
}

‎index.html

Lines changed: 106 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,106 @@
1+
<!doctype html>
2+
<html lang="en">
3+
4+
<head>
5+
<meta charset="utf-8">
6+
<meta name="viewport" content="width=device-width, initial-scale=1">
7+
<title>Bootstrap demo</title>
8+
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
9+
<link href="styles.css" rel="stylesheet">
10+
</head>
11+
12+
<body>
13+
<nav class="navbar navbar-expand-lg bg-body-tertiary">
14+
<div class="container-fluid">
15+
<a class="navbar-brand" href="#">IMDB Lite</a>
16+
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent"
17+
aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
18+
<span class="navbar-toggler-icon"></span>
19+
</button>
20+
<div class="collapse navbar-collapse justify-content-end" id="navbarSupportedContent">
21+
<form class="d-flex" role="search">
22+
<input class="form-control me-2" type="search" placeholder="Search" aria-label="Search" id="search-movie">
23+
<select class="form-select" id="movie-type">
24+
<option value="" disabled selected>--Select A Type--</option>
25+
<option value="movie">Movie</option>
26+
<option value="series">Series</option>
27+
</select>
28+
<button class="btn btn-outline-success" type="button" onclick="search()">Search</button>
29+
</form>
30+
</div>
31+
</div>
32+
</nav>
33+
34+
<div class="row">
35+
<div class="hero">
36+
<div class="hero-wrapper">
37+
<div class="row">
38+
<div class="col-md-12">
39+
<h1 class="text-center white-font-color hero-title">Find Your Favorite Movies And TV Shows</h1>
40+
</div>
41+
</div>
42+
<div class="row">
43+
<div class="col-md-6 offset-md-3">
44+
<h2 class="text-center white-font-color hero-description">Welcome to the official IMDB Lite website.
45+
Here
46+
you will be able to browse and read reviews and other facts of your Favorite Movies and TV Shows.</h2>
47+
</div>
48+
</div>
49+
</div>
50+
<div class="movies-wrapper">
51+
<div class="row" id="movies-wrapper-row">
52+
<!-- <div class="col-md-3 d-flex justify-content-center white-font-color">
53+
<div class="movies-box">
54+
<img class="img-fluid"
55+
src="https://m.media-amazon.com/images/M/MV5BMGVmMWNiMDktYjQ0Mi00MWIxLTk0N2UtN2ZlYTdkN2IzNDNlXkEyXkFqcGdeQXVyODE5NzE3OTE@._V1_SX300.jpg">
56+
<div class="movies-layer-top">
57+
<p class="white-font-color position-absolute top-50 start-50 translate-middle">View Details</p>
58+
</div>
59+
</div>
60+
</div> -->
61+
<!-- <div class="col-md-3 d-flex justify-content-center white-font-color">
62+
<div class="movies-box">
63+
<img class="img-fluid"
64+
src="https://m.media-amazon.com/images/M/MV5BNmQ0ODBhMjUtNDRhOC00MGQzLTk5MTAtZDliODg5NmU5MjZhXkEyXkFqcGdeQXVyNDUyOTg3Njg@._V1_SX300.jpg">
65+
<div class="movies-layer-top">
66+
<p class="white-font-color position-absolute top-50 start-50 translate-middle">View Details</p>
67+
</div>
68+
</div>
69+
</div> -->
70+
<!-- <div class="col-md-3 d-flex justify-content-center white-font-color">
71+
<div class="movies-box">
72+
<img class="img-fluid"
73+
src="https://m.media-amazon.com/images/M/MV5BMjE0YjUzNDUtMjc5OS00MTU3LTgxMmUtODhkOThkMzdjNWI4XkEyXkFqcGdeQXVyMTA3MzQ4MTc0._V1_SX300.jpg">
74+
<div class="movies-layer-top">
75+
<p class="white-font-color position-absolute top-50 start-50 translate-middle">View Details</p>
76+
</div>
77+
</div>
78+
</div> -->
79+
<!-- <div class="col-md-3 d-flex justify-content-center white-font-color">
80+
<div class="movies-box">
81+
<img class="img-fluid"
82+
src="https://m.media-amazon.com/images/M/MV5BMTY4NTIwODg0N15BMl5BanBnXkFtZTcwOTc0MjEzMw@@._V1_SX300.jpg">
83+
<div class="movies-layer-top">
84+
<p class="white-font-color position-absolute top-50 start-50 translate-middle">View Details</p>
85+
</div>
86+
</div>
87+
</div> -->
88+
</div>
89+
</div>
90+
<div class="buttons-wrapper">
91+
<div class="row">
92+
<div class="col-md-6 d-flex justify-content-start">
93+
<button type="button" class="btn btn-orange" onclick="previousPage()">Previous</button>
94+
</div>
95+
<div class="col-md-6 d-flex justify-content-end">
96+
<button type="button" class="btn btn-orange" onclick="nextPage()">Next</button>
97+
</div>
98+
</div>
99+
</div>
100+
</div>
101+
</div>
102+
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
103+
<script src="script.js"></script>
104+
</body>
105+
106+
</html>

‎script.js

Lines changed: 113 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,113 @@
1+
const apiEndPoint = "http://www.omdbapi.com/?apikey=9f912670";
2+
3+
const apiCollection = {
4+
getMovies: function (movieName, type, plot) {
5+
return apiEndPoint + "&s=" + movieName + "&type=" + type;
6+
}
7+
}
8+
9+
let currentPage = 1
10+
const moviesPerPage = 4
11+
12+
let begin = (currentPage - 1) * moviesPerPage
13+
let end = begin + moviesPerPage
14+
15+
let actualData = []
16+
let filteredData = []
17+
18+
19+
async function getData(movieName, type) {
20+
// Fetch data from the API
21+
const apiResponse = await fetch(apiCollection.getMovies(movieName, type))
22+
23+
const data = await apiResponse.json()
24+
25+
actualData = data.Search
26+
27+
filteredData = paginateMovies(actualData, begin, end)
28+
removeOldMovies()
29+
30+
// data is an array, you can iterate through it
31+
filteredData.forEach(item => {
32+
createMovieElement(item.Poster)
33+
})
34+
35+
}
36+
37+
function paginateMovies(data, beginIndex, endIndex) {
38+
return data.slice(beginIndex, endIndex)
39+
}
40+
41+
function nextPage() {
42+
currentPage = currentPage + 1
43+
44+
let begin = (currentPage - 1) * moviesPerPage
45+
let end = begin + moviesPerPage
46+
47+
filteredData = paginateMovies(actualData, begin, end)
48+
49+
removeOldMovies()
50+
filteredData.forEach(item => {
51+
createMovieElement(item.Poster)
52+
})
53+
}
54+
55+
function previousPage() {
56+
currentPage = currentPage - 1
57+
58+
let begin = (currentPage - 1) * moviesPerPage
59+
let end = begin + moviesPerPage
60+
61+
filteredData = paginateMovies(actualData, begin, end)
62+
63+
removeOldMovies()
64+
filteredData.forEach(item => {
65+
createMovieElement(item.Poster)
66+
})
67+
}
68+
69+
function removeOldMovies() {
70+
const parentDiv = document.getElementById('movies-wrapper-row');
71+
72+
while (parentDiv.firstChild) {
73+
parentDiv.removeChild(parentDiv.firstChild);
74+
}
75+
}
76+
77+
function createMovieElement(imgSource) {
78+
const div = document.createElement('div')
79+
div.classList.add('col-md-3', 'd-flex', 'justify-content-center', 'white-font-color')
80+
81+
const movieBox = document.createElement('div')
82+
movieBox.classList.add('movies-box')
83+
84+
const img = document.createElement('img')
85+
img.src = imgSource
86+
img.classList.add('img-fluid')
87+
88+
const movieLayerTop = document.createElement('div')
89+
movieLayerTop.classList.add('movies-layer-top')
90+
91+
const p = document.createElement('p')
92+
p.innerText = 'View Details'
93+
p.classList.add('white-font-color', 'position-absolute', 'top-50', 'start-50', 'translate-middle')
94+
95+
movieLayerTop.appendChild(p)
96+
97+
movieBox.appendChild(img)
98+
movieBox.appendChild(movieLayerTop)
99+
100+
div.appendChild(movieBox)
101+
102+
document.getElementById('movies-wrapper-row').appendChild(div)
103+
}
104+
105+
function search() {
106+
const movieName = document.getElementById('search-movie').value
107+
108+
const type = document.getElementById('movie-type').value ?? null
109+
110+
getData(movieName, type)
111+
}
112+
113+
getData('Harry Potter', null, null)

‎styles.css

Lines changed: 70 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,70 @@
1+
.hero {
2+
background-size: cover;
3+
background-position: top;
4+
position: relative;
5+
background-image: linear-gradient(to right bottom, rgba(29, 29, 29, 0.65) 0, #1d1d1d 100%), url("./assets/images/background.jpg");
6+
height: 100vh;
7+
}
8+
9+
.wrapper {
10+
padding-top: 50px;
11+
}
12+
13+
.white-font-color {
14+
color: white;
15+
}
16+
17+
.hero-description {
18+
font-size: 15px;
19+
letter-spacing: 2px;
20+
margin: 20px auto ;
21+
}
22+
23+
.movies-wrapper {
24+
margin-top: 50px;
25+
}
26+
27+
.movies-box {
28+
width: 210px;
29+
height: 315px;
30+
border: 4px solid white;
31+
border-radius: 2px;
32+
transition: all 0.4s ease-in-out 0s;
33+
position: relative;
34+
}
35+
36+
.movies-layer-top {
37+
opacity: 0;
38+
position: absolute;
39+
top: 0;
40+
left: 0;
41+
right: 0;
42+
bottom: 0;
43+
background-image: linear-gradient(to right bottom, rgba(243, 163, 59, 0.8), rgba(182, 113, 10, 0.8));
44+
transition: all 0.4s ease-in-out 0s;
45+
}
46+
47+
.movies-box:hover .movies-layer-top {
48+
opacity: 1;
49+
cursor: pointer;
50+
}
51+
52+
.buttons-wrapper {
53+
margin-top: 50px;
54+
padding: 0px 10px;
55+
}
56+
57+
.btn-orange {
58+
background-color: orange;
59+
color: white;
60+
}
61+
62+
.btn-orange:hover {
63+
background-color: orange;
64+
color: white;
65+
}
66+
67+
.btn-orange:active {
68+
background-color: orange !important;
69+
color: white !important;
70+
}

0 commit comments

Comments
 (0)