diff --git a/css/search.css b/css/search.css new file mode 100644 index 0000000..63de61e --- /dev/null +++ b/css/search.css @@ -0,0 +1,11 @@ +.row.searchResult { + overflow: auto; + height: 100%; +} + +.row.searchResult ul { + margin-top: 50px; + white-space: normal; + list-style: none; +} +/*# sourceMappingURL=search.css.map */ \ No newline at end of file diff --git a/css/search.css.map b/css/search.css.map new file mode 100644 index 0000000..830f467 --- /dev/null +++ b/css/search.css.map @@ -0,0 +1,9 @@ +{ + "version": 3, + "mappings": "AAAA,AAAA,IAAI,AAAA,aAAa,CAAC;EACd,QAAQ,EAAE,IAAI;EACd,MAAM,EAAE,IAAI;CAQf;;AAVD,AAII,IAJA,AAAA,aAAa,CAIb,EAAE,CAAC;EACC,UAAU,EAAE,IAAI;EAChB,WAAW,EAAE,MAAM;EACnB,UAAU,EAAE,IAAI;CAEnB", + "sources": [ + "search.scss" + ], + "names": [], + "file": "search.css" +} \ No newline at end of file diff --git a/css/search.scss b/css/search.scss new file mode 100644 index 0000000..d00a763 --- /dev/null +++ b/css/search.scss @@ -0,0 +1,11 @@ +.row.searchResult { + overflow: auto; + height: 100%; + + ul { + margin-top: 50px; + white-space: normal; + list-style: none; + // display: inline-block; + } +} \ No newline at end of file diff --git a/genre.html b/genre.html index e69de29..bf3256f 100644 --- a/genre.html +++ b/genre.html @@ -0,0 +1,79 @@ + + + + + Cinema Online + + + + + + + +
+

Now Playing

+ +
+
+

Opening This Week

+ +
+ + + + + + + + + + \ No newline at end of file diff --git a/index.html b/index.html index 4bed1e1..c583f64 100644 --- a/index.html +++ b/index.html @@ -11,7 +11,7 @@ - -
-

Now Playing

- -
-
-

Opening This Week

- + +
+
+
+

Opening This Week

+
+ +
- + \ No newline at end of file diff --git a/info.html b/info.html index b1f6be5..84c6831 100644 --- a/info.html +++ b/info.html @@ -97,7 +97,7 @@
Cast overview
integrity="sha384-JEW9xMcG8R+pH31jmWH6WWP0WintQrMb4s7ZOdauHnUtxwoG2vI5DkLtS3qm9Ekf" crossorigin="anonymous"> - + \ No newline at end of file diff --git a/js/genre.js b/js/genre.js new file mode 100644 index 0000000..cfcdf84 --- /dev/null +++ b/js/genre.js @@ -0,0 +1,201 @@ +let nowPlaying = document.getElementsByClassName("row nowPlaying")[0] +let nowPlayingUl = nowPlaying.getElementsByTagName("ul")[0] +let nowPlayingList = nowPlaying.getElementsByTagName("li") + +let upcoming = document.getElementsByClassName("row upcoming")[0] +let upcomingH4 = upcoming.getElementsByTagName("h4")[0] +let upcomingList = upcoming.getElementsByTagName("li") + + +let genreUrlId = window.location.href +let genreId = parseInt(genreUrlId.split("=")[1]) +let genreName = genreUrlId.split("=")[2] + +let actionGenres = document.getElementsByClassName("dropdown-item action")[0] +let dropdownMenu = document.getElementsByClassName("dropdown-menu")[0] +let dropdownItem = document.getElementsByClassName("dropdown-item") + + +let api = { + url: "https://api.themoviedb.org/3/movie/", + key: "api_key=8ff5e2fbb1b643a55f0256bb89a8a192", + +} + +let apiImg = { + url: "https://image.tmdb.org/t/p/w200" +} + + +let urls = [ + (`${api.url}now_playing?${api.key}&language=en-US&page=1`), + (`${api.url}upcoming?${api.key}&language=en-US&page=1®ion=CA`), + (`https://api.themoviedb.org/3/genre/movie/list?${api.key}&language=en-US`) +] + + +let initDisplay = () => { + + Promise.all(urls.map(url => + fetch(url).then(resp => resp.json()) + )) + .then(data => { + nowPlayingDisplay(data[0]) + upcomingDisplay(data[1]) + genreListDisplay(data[2]) + genrePageinit() + }) + +} + + + +let genreListDisplay = (genre) => { + + + // console.log(parseInt(genreId)) + clickGenre = (e) => { + Promise.all(urls.map(url => + fetch(url).then(resp => resp.json()) + )) + .then(data => { + + console.log(`test`) + console.log(data[2]) + // console.log(data[1].results[0].genre_ids) + // console.log(genreUrlId) + let title = document.getElementsByClassName("catagoryBanner")[0] + let h4 = title.getElementsByTagName("h4")[0] + let targetId = e.target.id + // h4.innerText = (e.target.innerText) + h4.innerText = (`test`) + nowPlaying.className = (`row genresResult`) + + for (i = 0; i < upcomingList.length; i++) { + nowPlayingUl.appendChild(upcomingList[0]) + + } + + for (i = 0; i < nowPlayingList.length; i++) { + + if (nowPlayingList[i].id.includes(targetId)) { + nowPlayingList[i].style.display = "" + + } else if (!nowPlayingList[i].id.includes(targetId)) { + nowPlayingList[i].style.display = "none" + } + } + + + + }) + upcoming.remove() + + } + + + for (let i = 0; i < genre.genres.length; i++) { + + // console.log(genre.genres[i]) + + let ul = dropdownMenu + let li = document.createElement("li") + let a = document.createElement("a") + a.className = (`dropdown-item ${genre.genres[i].id} ${genre.genres[i].name}`) + + ul.appendChild(li) + li.appendChild(a) + a.innerText = (`${genre.genres[i].name}`) + a.setAttribute("href", `./genre.html?id=${genre.genres[i].id}=${genre.genres[i].name}`) + a.setAttribute("id", `${genre.genres[i].id}`) + + dropdownItem[i].addEventListener("click", clickGenre) + } + + +} + +let nowPlayingDisplay = (movie) => { + console.log(movie) + // console.log(`${apiImg.url}${movie.results[0].poster_path}`) + + for (let i = 0; i < movie.results.length; i++) { + + let ul = nowPlaying.getElementsByTagName("ul")[0] + let li = document.createElement("li") + li.className = "nowPlayingMovie" + ul.appendChild(li) + let a = document.createElement("a") + a.setAttribute("href", `./info.html?id=${movie.results[i].id}`) + li.appendChild(a) + + li.setAttribute("id", `${movie.results[i].genre_ids}`) + let img = document.createElement("img") + img.setAttribute("src", (`${apiImg.url}${movie.results[i].poster_path}`)) + a.appendChild(img) + let p = document.createElement("p") + p.innerHTML = (`${movie.results[i].title}`) + a.appendChild(p) + } +} + +let upcomingDisplay = (movie) => { + console.log(movie) + // console.log(`${apiImg.url}${movie.results[0].poster_path}`) + + for (let i = 0; i < movie.results.length; i++) { + + let ul = upcoming.getElementsByTagName("ul")[0] + let li = document.createElement("li") + li.className = "upcomingMovie" + ul.appendChild(li) + let a = document.createElement("a") + a.setAttribute("href", `./info.html?id=${movie.results[i].id}`) + li.appendChild(a) + + li.setAttribute("id", `${movie.results[i].genre_ids}`) + let img = document.createElement("img") + img.setAttribute("src", (`${apiImg.url}${movie.results[i].poster_path}`)) + a.appendChild(img) + let p = document.createElement("p") + p.innerHTML = (`${movie.results[i].title}`) + a.appendChild(p) + + } + for (i = 0; i < upcomingList.length; i++) { + nowPlayingUl.appendChild(upcomingList[0]) + + } + upcoming.remove() + nowPlaying.className = (`row genresResult`) +} + + + + + +let genrePageinit = () => { + + console.log(genreName) + let title = document.getElementsByClassName("catagoryBanner")[0] + let h4 = title.getElementsByTagName("h4")[0] + h4.innerText = (`${genreName}`) + + for (i = 0; i < upcomingList.length; i++) { + nowPlayingUl.appendChild(upcomingList[0]) + + } + + for (i = 0; i < nowPlayingList.length; i++) { +// + if (nowPlayingList[i].id.includes(genreId)) { + nowPlayingList[i].style.display = "" + + } else if (!nowPlayingList[i].id.includes(genreId) || nowPlayingList[i].id == null) { + nowPlayingList[i].style.display = "none" + } + } +} + +initDisplay() +genrePageinit() \ No newline at end of file diff --git a/js/index.js b/js/index.js index dbf7a42..10b0301 100644 --- a/js/index.js +++ b/js/index.js @@ -1,5 +1,4 @@ -let searchInput = document.getElementsByClassName("form-control me-2")[0] -let searchBtn = document.getElementsByClassName("btn btn-outline-success my-2 my-sm-0")[0] + let nowPlaying = document.getElementsByClassName("row nowPlaying")[0] let nowPlayingUl = nowPlaying.getElementsByTagName("ul")[0] @@ -9,7 +8,9 @@ let upcoming = document.getElementsByClassName("row upcoming")[0] let upcomingH4 = upcoming.getElementsByTagName("h4")[0] let upcomingList = upcoming.getElementsByTagName("li") - +let genreUrlId = window.location.href +let genreId = parseInt(genreUrlId.split("=")[1]) +let genreName = genreUrlId.split("=")[2] // let genresResult = document.getElementsByClassName("row genresResult")[0] let actionGenres = document.getElementsByClassName("dropdown-item action")[0] @@ -67,9 +68,8 @@ let genreListDisplay = (genre) => { let title = document.getElementsByClassName("catagoryBanner")[0] let h4 = title.getElementsByTagName("h4")[0] + h4.innerText = (`${genreName}`) - let targetId = e.target.id - h4.innerText = (e.target.innerText) nowPlaying.className = (`row genresResult`) for (i = 0; i < upcomingList.length; i++) { @@ -113,7 +113,7 @@ let genreListDisplay = (genre) => { ul.appendChild(li) li.appendChild(a) a.innerText = (`${genre.genres[i].name}`) - + a.setAttribute("href", `./genre.html?id=${genre.genres[i].id}=${genre.genres[i].name}`) a.setAttribute("id", `${genre.genres[i].id}`) dropdownItem[i].addEventListener("click", clickGenre) @@ -180,7 +180,7 @@ let upcomingDisplay = (movie) => { p.innerHTML = (`${movie.results[i].title}`) a.appendChild(p) } - initPage() + } @@ -188,10 +188,13 @@ let upcomingDisplay = (movie) => { let initPage = () => window.scrollTo(0,0) window.addEventListener("onload",initPage) -initDisplay() +initDisplay() +initPage() + + diff --git a/js/info.js b/js/info.js index 0e25d80..e9022a6 100644 --- a/js/info.js +++ b/js/info.js @@ -8,7 +8,7 @@ let lang = document.getElementById("lang") let playTime = document.getElementById("playTime") let releaseDate = document.getElementById("releaseDate") let genreWrap = document.getElementById("genreWrap") -let genre = document.getElementById("genre") +let genreInfo = document.getElementById("genre") let story = document.getElementById("story") let castWrap = document.getElementById("castWrap") let movieId = window.location.href diff --git a/js/nav.js b/js/nav.js index e69de29..f1b29c0 100644 --- a/js/nav.js +++ b/js/nav.js @@ -0,0 +1,148 @@ +let searchInput = document.getElementsByClassName("form-control me-2")[0] +let searchBtn = document.getElementsByClassName("btn btn-outline-success my-2 my-sm-0")[0] + +let actionGenres = document.getElementsByClassName("dropdown-item action")[0] +let dropdownMenu = document.getElementsByClassName("dropdown-menu")[0] +let dropdownItem = document.getElementsByClassName("dropdown-item") + + + +let initDisplay = () => { + + let api = { + url: "https://api.themoviedb.org/3/movie/", + key: "api_key=8ff5e2fbb1b643a55f0256bb89a8a192", + + } + + let apiImg = { + url: "https://image.tmdb.org/t/p/w200" + } + + + let urls = [ + (`${api.url}now_playing?${api.key}&language=en-US&page=1`), + (`${api.url}upcoming?${api.key}&language=en-US&page=1®ion=CA`), + (`https://api.themoviedb.org/3/genre/movie/list?${api.key}&language=en-US`) + ] + + + Promise.all(urls.map(url => + fetch(url).then(resp => resp.json()) + )) + .then(data => { + // nowPlayingDisplay(data[0]) + // upcomingDisplay(data[1]) + genreListDisplay(data[2]) + }) + +} + +let genreListDisplay = (genre) => { + + + + clickGenre = (gerneId) => { + Promise.all(urls.map(url => + fetch(url).then(resp => resp.json()) + )) + .then(data => { + console.log(data[0]) + console.log(data[1]) + console.log(data[1].results[0].genre_ids) + + let title = document.getElementsByClassName("catagoryBanner")[0] + let h4 = title.getElementsByTagName("h4")[0] + h4.innerText = (`${genreName}`) + nowPlaying.className = (`row genresResult`) + + for (i = 0; i < upcomingList.length; i++) { + nowPlayingUl.appendChild(upcomingList[0]) + + } + + for (i = 0; i < nowPlayingList.length; i++) { + + if (nowPlayingList[i].id.includes(gerneId)) { + nowPlayingList[i].style.display = "" + + } else if (!nowPlayingList[i].id.includes(gerneId)) { + nowPlayingList[i].style.display = "none" + } + } + + + }) + upcoming.remove() + } + for (let i = 0; i < genre.genres.length; i++) { + + console.log(genre.genres[i]) + + let ul = dropdownMenu + let li = document.createElement("li") + let a = document.createElement("a") + a.className = (`dropdown-item ${genre.genres[i].id} ${genre.genres[i].name}`) + ul.appendChild(li) + li.appendChild(a) + a.innerText = (`${genre.genres[i].name}`) + a.setAttribute("href", `./genre.html?id=${genre.genres[i].id}=${genre.genres[i].name}`) + a.setAttribute("id", `${genre.genres[i].id}`) + + dropdownItem[i].addEventListener("click", clickGenre) + } + + +} + +let nowPlayingDisplay = (movie) => { + console.log(movie) + // console.log(`${apiImg.url}${movie.results[0].poster_path}`) + + for (let i = 0; i < movie.results.length; i++) { + + let ul = nowPlaying.getElementsByTagName("ul")[0] + let li = document.createElement("li") + li.className = "nowPlayingMovie" + ul.appendChild(li) + let a = document.createElement("a") + a.setAttribute("href", `./info.html?id=${movie.results[i].id}`) + li.appendChild(a) + + li.setAttribute("id", `${movie.results[i].genre_ids}`) + let img = document.createElement("img") + img.setAttribute("src", (`${apiImg.url}${movie.results[i].poster_path}`)) + a.appendChild(img) + let p = document.createElement("p") + p.innerHTML = (`${movie.results[i].title}`) + a.appendChild(p) + } +} + +let upcomingDisplay = (movie) => { + console.log(movie) + // console.log(`${apiImg.url}${movie.results[0].poster_path}`) + + for (let i = 0; i < movie.results.length; i++) { + + let ul = upcoming.getElementsByTagName("ul")[0] + let li = document.createElement("li") + li.className = "upcomingMovie" + ul.appendChild(li) + let a = document.createElement("a") + a.setAttribute("href", `./info.html?id=${movie.results[i].id}`) + li.appendChild(a) + + li.setAttribute("id", `${movie.results[i].genre_ids}`) + let img = document.createElement("img") + img.setAttribute("src", (`${apiImg.url}${movie.results[i].poster_path}`)) + a.appendChild(img) + let p = document.createElement("p") + p.innerHTML = (`${movie.results[i].title}`) + a.appendChild(p) + } + +} +// window.addEventListener("load",initDisplay ) + +initDisplay() \ No newline at end of file diff --git a/js/search.js b/js/search.js new file mode 100644 index 0000000..af92238 --- /dev/null +++ b/js/search.js @@ -0,0 +1,83 @@ +let searchInput = document.getElementsByClassName("form-control me-2")[0] +let searchBtn = document.getElementsByClassName("btn btn-outline-success my-2 my-sm-0")[0] +let searchResult = document.getElementsByClassName("row searchResult")[0] +// let searchBtn = document.getElementById("searchBtn") +let searchUrl = window.location.href +let searchQuery = searchUrl + +// a.setAttribute("href", `./info.html?id=${movie.results[i].id}`) + + + + + +// let urls = [ +// (`${api.url}search/movie?${api.key}&language=en-US&query=${searchInput.value}&page=1&include_adult=false`) +// (`${api.url}upcoming?${api.key}&language=en-US&page=1®ion=CA`), +// (`https://api.themoviedb.org/3/genre/movie/list?${api.key}&language=en-US`) +// ] + +let searchMoive = () => { + // location.assign(`search.html?query=${searchInput.value}`) + let api = { + url: "https://api.themoviedb.org/3/", + key: "api_key=8ff5e2fbb1b643a55f0256bb89a8a192", + + } + + + // searchUrl = (`${searchUrl}query=${searchInput.value}`) + // console.log(location.search) + fetch(`${api.url}search/movie?${api.key}&language=en-US&query=${searchInput.value}&page=1&include_adult=false`) + .then(resp => resp.json()) + .then(data => + displaySearch(data)) + + +} + +let displaySearch = (movie) => { + console.log(movie) + console.log(window.history) + let apiImg = { + url: "https://image.tmdb.org/t/p/w200" + } + + + for (let i = 0; i < movie.results.length; i++) { + + let ul = searchResult.getElementsByTagName("ul")[0] + let li = document.createElement("li") + li.className = "searchResult" + ul.appendChild(li) + let a = document.createElement("a") + a.setAttribute("href", `./info.html?id=${movie.results[i].id}`) + li.appendChild(a) + + li.setAttribute("id", `${movie.results[i].genre_ids}`) + let img = document.createElement("img") + img.setAttribute("src", (`${apiImg.url}${movie.results[i].poster_path}`)) + a.appendChild(img) + let p = document.createElement("p") + p.innerHTML = (`${movie.results[i].title}`) + a.appendChild(p) + } +} + + + + +let saveQuery = () => { + // window.location.href = window.location.href + (`?query=${searchInput.value}`); + window.history.replaceState(null, null, `?query=${searchInput.value}`); + + // window.history.pushState(`?query=${searchInput.value}`); + searchMoive(); +} +// searchMoive(); +// window.addEventListener("DOMContentLoaded", searchMoive) +searchBtn.addEventListener("click", saveQuery) + +window.onhashchange = function () { + window.history.back() +} \ No newline at end of file diff --git a/search.html b/search.html new file mode 100644 index 0000000..10c242e --- /dev/null +++ b/search.html @@ -0,0 +1,80 @@ + + + + + Cinema Online + + + + + + + + +
+

+ +
+ + + + + + + + + + + \ No newline at end of file