From 8935525382f81a246d2905573bff7021d51f7f64 Mon Sep 17 00:00:00 2001 From: Paywand Mohammed Hussein <73426000+paywand007@users.noreply.github.com> Date: Sat, 3 Sep 2022 15:28:37 +0300 Subject: [PATCH 1/7] First commit --- index.html | 11 ++++----- oop-script.js | 64 +++++++++++++++++++++++++-------------------------- 2 files changed, 37 insertions(+), 38 deletions(-) diff --git a/index.html b/index.html index b4fe8ef..334a48a 100644 --- a/index.html +++ b/index.html @@ -2,16 +2,15 @@ - - - - + + + + Movie -
-
+
diff --git a/oop-script.js b/oop-script.js index 48fe5ed..e3688d2 100644 --- a/oop-script.js +++ b/oop-script.js @@ -3,17 +3,17 @@ class App { static async run() { const movies = await APIService.fetchMovies() - HomePage.renderMovies(movies); + HomePage.renderMovies(movies) } } class APIService { - static TMDB_BASE_URL = 'https://api.themoviedb.org/3'; + static TMDB_BASE_URL = 'https://api.themoviedb.org/3' static async fetchMovies() { const url = APIService._constructUrl(`movie/now_playing`) const response = await fetch(url) const data = await response.json() - return data.results.map(movie => new Movie(movie)) + return data.results.map((movie) => new Movie(movie)) } static async fetchMovie(movieId) { const url = APIService._constructUrl(`movie/${movieId}`) @@ -22,44 +22,44 @@ class APIService { return new Movie(data) } static _constructUrl(path) { - return `${this.TMDB_BASE_URL}/${path}?api_key=${atob('NTQyMDAzOTE4NzY5ZGY1MDA4M2ExM2M0MTViYmM2MDI=')}`; + return `${this.TMDB_BASE_URL}/${path}?api_key=${atob( + 'bae5a03c227c33b8d9842f4e6c132889=' + )}` } } class HomePage { - static container = document.getElementById('container'); + static container = document.getElementById('container') static renderMovies(movies) { - movies.forEach(movie => { - const movieDiv = document.createElement("div"); - const movieImage = document.createElement("img"); - movieImage.src = `${movie.backdropUrl}`; - const movieTitle = document.createElement("h3"); - movieTitle.textContent = `${movie.title}`; - movieImage.addEventListener("click", function() { - Movies.run(movie); - }); + movies.forEach((movie) => { + const movieDiv = document.createElement('div') + const movieImage = document.createElement('img') + movieImage.src = `${movie.backdropUrl}` + const movieTitle = document.createElement('h3') + movieTitle.textContent = `${movie.title}` + movieImage.addEventListener('click', function() { + Movies.run(movie) + }) - movieDiv.appendChild(movieTitle); - movieDiv.appendChild(movieImage); - this.container.appendChild(movieDiv); + movieDiv.appendChild(movieTitle) + movieDiv.appendChild(movieImage) + this.container.appendChild(movieDiv) }) } } - class Movies { static async run(movie) { const movieData = await APIService.fetchMovie(movie.id) - MoviePage.renderMovieSection(movieData); + MoviePage.renderMovieSection(movieData) APIService.fetchActors(movieData) - } } class MoviePage { - static container = document.getElementById('container'); + static container = document.getElementById('container') static renderMovieSection(movie) { - MovieSection.renderMovie(movie); + MovieSection.renderMovie(movie) } } @@ -80,24 +80,24 @@ class MovieSection {

Actors:

- `; + ` } } class Movie { - static BACKDROP_BASE_URL = 'http://image.tmdb.org/t/p/w780'; + static BACKDROP_BASE_URL = 'http://image.tmdb.org/t/p/w780' constructor(json) { - this.id = json.id; - this.title = json.title; - this.releaseDate = json.release_date; - this.runtime = json.runtime + " minutes"; - this.overview = json.overview; - this.backdropPath = json.backdrop_path; + this.id = json.id + this.title = json.title + this.releaseDate = json.release_date + this.runtime = json.runtime + ' minutes' + this.overview = json.overview + this.backdropPath = json.backdrop_path } get backdropUrl() { - return this.backdropPath ? Movie.BACKDROP_BASE_URL + this.backdropPath : ""; + return this.backdropPath ? Movie.BACKDROP_BASE_URL + this.backdropPath : '' } } -document.addEventListener("DOMContentLoaded", App.run); \ No newline at end of file +document.addEventListener('DOMContentLoaded', App.run) \ No newline at end of file From 357591fe87506a274551c641a6d29a94eff4120e Mon Sep 17 00:00:00 2001 From: Paywand Mohammed Hussein <73426000+paywand007@users.noreply.github.com> Date: Mon, 5 Sep 2022 14:36:09 +0300 Subject: [PATCH 2/7] hi --- index.html | 42 ++++++++++++++++++++++++++++++++++++++++++ oop-script.js | 2 +- 2 files changed, 43 insertions(+), 1 deletion(-) diff --git a/index.html b/index.html index 334a48a..d6f6af5 100644 --- a/index.html +++ b/index.html @@ -10,8 +10,50 @@ +
+ + + + diff --git a/oop-script.js b/oop-script.js index e3688d2..d82cd21 100644 --- a/oop-script.js +++ b/oop-script.js @@ -23,7 +23,7 @@ class APIService { } static _constructUrl(path) { return `${this.TMDB_BASE_URL}/${path}?api_key=${atob( - 'bae5a03c227c33b8d9842f4e6c132889=' + 'NTQyMDAzOTE4NzY5ZGY1MDA4M2ExM2M0MTViYmM2MDI=' )}` } } From 6073d4bde697d8fe4f26584ce188d778718a9ffa Mon Sep 17 00:00:00 2001 From: Paywand Mohammed Hussein <73426000+paywand007@users.noreply.github.com> Date: Wed, 7 Sep 2022 18:31:20 +0300 Subject: [PATCH 3/7] hi --- index.html | 237 +++++++++++++++++++++++++++++++++++++++++--------- oop-script.js | 147 +++++++++++++++++++++++++++---- 2 files changed, 326 insertions(+), 58 deletions(-) diff --git a/index.html b/index.html index d6f6af5..aa1ac19 100644 --- a/index.html +++ b/index.html @@ -7,53 +7,208 @@ Movie + + - -
+
-