diff --git a/.DS_Store b/.DS_Store new file mode 100644 index 00000000..8c59530e Binary files /dev/null and b/.DS_Store differ diff --git a/007.mp4 b/007.mp4 new file mode 100644 index 00000000..16a4f933 Binary files /dev/null and b/007.mp4 differ diff --git a/READMEZA.md b/READMEZA.md new file mode 100644 index 00000000..13da133b --- /dev/null +++ b/READMEZA.md @@ -0,0 +1,19 @@ +Week 3 Project: Cinema + +Functionality: +-Able to search for films by Title +-Autosearches above 3 letters (lazy option to be honest) +-Pagination for next 20 Results +-Infinite scrolling +-Able to call/view additional information via modal by clicking on divs + +Visual Design +-Infinite loop video on landing +-Broadly responsive (including the modal) +-Simple Design +-Cursor and hover effects + +Issues +-Spent Saturday trying to make some superfluous stuff work which failed and used up time. +-Lack of time means I spent no time on making functions pure or implementing BEM +-Lack of time meant I couldn't finish off Favourites - I think I would have got these working to a basic level diff --git a/imagefound.png b/imagefound.png new file mode 100644 index 00000000..1c85b161 Binary files /dev/null and b/imagefound.png differ diff --git a/index.html b/index.html new file mode 100644 index 00000000..784dc84e --- /dev/null +++ b/index.html @@ -0,0 +1,59 @@ + + + + + + + Project Cinema + + + + + + + + +
+

Screen Search

+
+ +
+
+ + + +
+
+ + + + + + + + +
+ +
+ + + + diff --git a/index.js b/index.js new file mode 100644 index 00000000..1980418f --- /dev/null +++ b/index.js @@ -0,0 +1,182 @@ +var searchTitle = "" +var pageNumber = 1; +const form = document.querySelector(".form"); +let next = document.querySelector(".next"); +let parent = document.querySelector(".main"); +let movieItem = document.querySelectorAll(".movieItem") +let bodyarea = document.querySelector("body") +let modalbox = document.querySelector(".modal-body") +var textArea = document.querySelector(".textarea") + + + + +//search just by title (no pagination) +form.addEventListener("submit", function(event){ + event.preventDefault() + console.log(event.target[0].value) + searchTitle = event.target[0].value + var url = `http://www.omdbapi.com/?apikey=77164d83&s=${searchTitle}` + + fetch(url) + .then(function(response) { + return response.json(); + }) + .then(function(body) { + parent.innerHTML = "" + displayTest(body.Search) + console.log(body) + // textarea.value = "" + }) + }) + +// function to diplay the returned search items for the main cards view + function displayTest(movies) { + movies.forEach(function(movie, index) { + let movieItem = document.createElement("div") + movieItem.setAttribute("data-id",`${movie.imdbID}`) + console.log(movieItem); + movieItem.className = "movieItem" + movieItem.id = `${movie.imdbID}` + movieItem.innerHTML = ` + movie image +

${movie.Title} (${movie.Year})

+ + ` + // + parent.appendChild(movieItem); + }) +} + + +//to pull full information +bodyarea.addEventListener("click", function(event){ + const movieContainer = event.target.closest(".movieItem") + if(event.target.matches(".far")){ + console.log({event}) + // [movieId1, movieId2] + localStorage.setItem("movieIDs",JSON.stringify([movieContainer.dataset.id])); + // then do json parse + } + else { + if(movieContainer){ + console.log(movieContainer.dataset.id) + fetch(`http://www.omdbapi.com/?apikey=77164d83&i=${movieContainer.dataset.id}`) + .then(function(response) { + return response.json(); + }) + .then(function(body) { + // parent.innerHTML = "" + // displayTest(body.Search) + modal.style.display = "flex"; + console.log(body); + displayDetails(body); + // textarea.value = "" + }) + } + } +}) +// addEventListener() + +//populate contents of modal overlay + function displayDetails(body) { + // modalbox.innerHTML = ""; + modalbox.innerHTML = ` + + ` + } + + +// modal below Here +//get modal modalelement +var modal = document.querySelector("#simpleModal"); +//get open modal button +var modalBtn = document.querySelector("#modalBtn"); +//get close button +var closeBtn = document.querySelector(".closeBtn"); + +//listen for open Click +//modalBtn.addEventListener("click", openModal); + +//listen for close Click +closeBtn.addEventListener("click", closeModal); +//listen for ourside lcick +window.addEventListener("click", clickOutside); + +//function to open modal +function openModal(){ + modal.style.display = "block"; +} + +function closeModal(){ + modal.style.display = "none"; +} + +function clickOutside(e){ + if(e.target == modal){ + modal.style.display = "none"; + } +} + +//infinite scrolling +window.addEventListener('scroll', () => { + const scrollable = document.documentElement.scrollHeight - window.innerHeight; + const scrolled = window.scrollY; + if (Math.ceil(scrolled) === scrollable) { + searchQuery = textArea.value + pageNumber++ + var url = `http://www.omdbapi.com/?apikey=77164d83&s=${searchQuery}&page=${[pageNumber]}` + event.preventDefault() + fetch(url) + .then(function(response) { + return response.json(); + }) + .then(function(body) { + // parent.innerHTML = "" + displayTest(body.Search) + }) + } +}) + +//pagination - next 10 +next.addEventListener("click", function(event){ + searchQuery = textArea.value + pageNumber++ + var url = `http://www.omdbapi.com/?apikey=77164d83&s=${searchQuery}&page=${[pageNumber]}` + event.preventDefault() + fetch(url) + .then(function(response) { + return response.json(); + }) + .then(function(body) { + parent.innerHTML = "" + displayTest(body.Search) + }) + }) + +//search preview +textArea.addEventListener("input", function(event){ + searchTitle = event.target.value + if (searchTitle.length > 2) { + var url = `http://www.omdbapi.com/?apikey=77164d83&s=${searchTitle}` + fetch(url) + .then(function(response) { + return response.json(); + }) + .then(function(body) { + parent.innerHTML = "" + displayTest(body.Search) + }) + } + else { + parent.innerHTML = "" + } + }) diff --git a/style.css b/style.css new file mode 100644 index 00000000..f7f18293 --- /dev/null +++ b/style.css @@ -0,0 +1,191 @@ +body{ + background-color: white;; + color:#555; + font-family:Arial, Helvetica, sans-serif; + font-size:16px; + line-height:1.6em; + margin:0; +} + +header { + background-color: coral; + text-align: center; + color: white; + margin:auto; + overflow:hidden; + font-family: 'Notable', sans-serif; +} + +.modal{ + display:none; + position: fixed; + z-index:1; + left: 0; + top:0; + height: 100%; + width:100%; + overflow: auto; + background-color: rgba(0,0,0,0.5); +} + +.modal-content{ + background-color:#f4f4f4; + margin: 20% auto; + width:70%; + box-shadow: 0 5px 8px 0 rgba(0,0,0,0.2),0 7px 20px 0 rgba(0,0,0,0.17); + animation-name:modalopen; + animation-duration:1s; +} + +.modal-header h2, .modal-footer h3{ + margin:0; +} + +.modal-header{ + background:coral; + padding:15px; + color:#fff; +} + +.modal-body{ + padding:10px 20px; +} + +.video{ + display: flex; + margin-top: 10px; + /* min-width: 100%; + min-height: 100%; + align-items: flex-start; */ + height:100vh; +} + +.text-input{ + padding-top: 15px; + align-content: center; + display: flex; + justify-content: center; +} + + +.textarea{ + size: 50; +} + +.main { + display: flex; + flex-wrap: wrap; + justify-content: space-around; + /* flex-grow: */ + /* overflow: auto; */ +} + +.movieItem { + box-shadow: 10px 10px grey; + margin:30px; + background-color: #f4f4f4; + border: 1px solid; + text-align: center; + overflow-wrap: normal; + max-width: 325px; + /* -webkit-transition: All 1s ease-in-out; +*/ +} + +h2 { + display: flex; + justify-content: center; + flex-wrap: wrap; + text +} + +.movieItem:hover { + background-color: #C0C0C0; +} + +.movieItem:hover { + z-index: 1.5; + /* width: 300px; + height:300px; */ +} + +#posterImage { + min-width: 300px; + min-height: 460px; + max-width: 325px; +} + +footer { + position: absolute; + width: 100%; + text-align: center; + bottom: 0; + background-color: coral; + margin-top: 1000px; +} + + +.button{ + background-color: coral; + padding: 1em 2em; + color: #fff; + border:0; +} + +.button:hover{ + background:#333; +} + + + + + +.closeBtn{ + color:#ccc; + float: right; + font-size: 30px; +} + +.closeBtn:hover,.closeBtn:focus{ + color: #000; + text-decoration: none; + cursor:pointer; +} + +@keyframes modalopen{ + from{opacity: 0} + to{opacity: 1} +} + + + +/* //flip box */ +/* .flip3D{ width:240px; height:200px; margin:10px; float:left; } +.flip3D > .front{ + position:absolute; + -webkit-transform: perspective( 600px ) rotateY( 0deg ); + transform: perspective( 600px ) rotateY( 0deg ); + background:#FC0; width:240px; height:200px; border-radius: 7px; + -webkit-backface-visibility: hidden; + backface-visibility: hidden; + transition: -webkit-transform .5s linear 0s; + transition: transform .5s linear 0s; +} +.flip3D > .back{ + position:absolute; + -webkit-transform: perspective( 600px ) rotateY( 180deg ); + transform: perspective( 600px ) rotateY( 180deg ); + background: #80BFFF; width:240px; height:200px; border-radius: 7px; + -webkit-backface-visibility: hidden; + backface-visibility: hidden; + transition: -webkit-transform .5s linear 0s; + transition: transform .5s linear 0s; +} +.flip3D:hover > .front{ + -webkit-transform: perspective( 600px ) rotateY( -180deg ); + transform: perspective( 600px ) rotateY( -180deg ); +} +.flip3D:hover > .back{ + -webkit-transform: perspective( 600px ) rotateY( 0deg ); + transform: perspective( 600px ) rotateY( 0deg ); +} */