constructorlabs · LemonyDesign · Sep 22, 2018 · Sep 22, 2018 · Sep 23, 2018 · Sep 23, 2018
diff --git a/data.txt b/data.txt
@@ -0,0 +1,38 @@
+Title: "Guardians of the Galaxy Vol. 2",
+Year: "2017",
+Rated: "PG-13",
+Released: "05 May 2017",
+Runtime: "136 min",
+Genre: "Action, Adventure, Comedy",
+Director: "James Gunn",
+Writer: "James Gunn, Dan Abnett (based on the Marvel comics by), Andy Lanning (based on the Marvel comics by), Steve Englehart (Star-Lord created by), Steve Gan (Star-Lord created by), Jim Starlin (Gamora and Drax created by), Stan Lee (Groot created by), Larry Lieber (Groot created by), Jack Kirby (Groot created by), Bill Mantlo (Rocket Raccoon created by), Keith Giffen (Rocket Raccoon created by), Steve Gerber (Howard the Duck created by), Val Mayerik (Howard the Duck created by)",
+Actors: "Chris Pratt, Zoe Saldana, Dave Bautista, Vin Diesel",
+Plot: "The Guardians must fight to keep their newfound family together as they unravel the mystery of Peter Quill's true parentage.",
+Language: "English",
+Country: "USA",
+Awards: "Nominated for 1 Oscar. Another 12 wins & 42 nominations.",
+Poster: "https://m.media-amazon.com/images/M/MV5BMTg2MzI1MTg3OF5BMl5BanBnXkFtZTgwNTU3NDA2MTI@._V1_SX300.jpg",
+Ratings: [
+{
+Source: "Internet Movie Database",
+Value: "7.7/10"
+},
+{
+Source: "Rotten Tomatoes",
+Value: "83%"
+},
+{
+Source: "Metacritic",
+Value: "67/100"
+}
+],
+Metascore: "67",
+imdbRating: "7.7",
+imdbVotes: "408,619",
+imdbID: "tt3896198",
+Type: "movie",
+DVD: "22 Aug 2017",
+BoxOffice: "$389,804,217",
+Production: "Walt Disney Pictures",
+Website: "https://marvel.com/guardians",
+Response: "True"
diff --git a/index.html b/index.html
@@ -0,0 +1,39 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <meta http-equiv="X-UA-Compatible" content="ie=edge">
+    <title>Lemony Cinema</title>
+    <link rel="stylesheet" href="styles/normalize.css">
+    <link rel="stylesheet" href="styles/styles.css">
+</head>
+<body>
+    <header class="mainheader">
+        <h1 class="mainheader__title">Mouldy Lemons</h1>
+        <h3 class="mainheader__subtitle">Discover the zestiest flicks</h3>
+    </header>
+    <div class="container">
+        <main class="maincontent">
+            <section class="search">
+                <form class="search__form">
+                    <input class="search__input"  type='text' name="search" placeholder="Enter film title" autocomplete="film">
+                    <button class="btn search__btn">Search</button>
+                </form>
+            </section>
+            <section class="movies">
+                <div class="moviesfeed"></div>
+            </section>
+
+            <nav class="paging">
+                <a class="paging__previous">&larr;</a>
+                <a class="paging__next">&rarr;</a>
+            </nav>
+        </main>
+    </div>  
+    <footer class="footer">
+        <p class="container">Powered by Lemons (and IMDB)</p>
+    </footer>
+    <script src="scripts/index.js"></script>
+</body>
+</html>
diff --git a/scripts/index.js b/scripts/index.js
@@ -0,0 +1,203 @@
+//API RESULTS
+// apikey=eabbbb71
+// http://www.omdbapi.com/?s=Jaws&apikey=eabbbb71
+
+//Initialize values
+let page = 1;
+let searchText = "";
+const initialFetch = `http://www.omdbapi.com/?s=Lemonade&apikey=eabbbb71`
+
+//querySelectors
+const searchBox = document.querySelector(".search__input");
+let form = document.querySelector("form");
+const moviesParentNode = document.querySelector(".moviesfeed");
+
+//Initial Fetch
+fetchContent(initialFetch);
+
+//Submit Search
+form.addEventListener("submit", event => {
+    event.preventDefault();
+    searchText = form.search.value;
+    const APIQuery = `http://www.omdbapi.com/?s=${searchText}&apikey=eabbbb71`;
+    fetchContent(APIQuery)
+});
+
+//Event Listeners
+document.addEventListener("click", event => {
+    if (event.target.matches(".moviesfeed__btn")) {
+        fetchFullArticle(event);
+    }
+    if (event.target.matches('.paging__previous')) {
+        clickPrevious(event);
+    }
+    if (event.target.matches('.paging__next')) {
+        clickNext(event);
+    }
+});
+
+// Load Full Query
+function fetchFullArticle(event) {
+    event.preventDefault();
+    let filmID = event.target.dataset.id;
+    const APIQuery = `http://www.omdbapi.com/?i=${filmID}&apikey=eabbbb71`;
+    const moviesButtons = document.querySelectorAll('.moviesfeed__btn');
+    const movieDetails = document.querySelectorAll(".moviesfeed__details");
+
+    moviesButtons.forEach(item => {
+    const parentSection = item.closest(".moviesfeed__full").getAttribute("id"); 
+    const parentClass = item.closest(".moviesfeed__full").classList;
+    const articleClass = item.closest("article").classList;
+    const moviesButton = item.closest(".moviesfeed__btn");
+
+        if (filmID === parentSection) {
+        // FETCHING TOFIX as function calls (below) - address scope issue
+            fetch(APIQuery)
+            .then(function(response) {
+            return response.json();
+            })
+            .then(function(body) {
+                movieDetails.forEach(movie => {
+                 let movieID = movie.dataset.id;
+                    if (movieID === parentSection) {
+                    movie.innerHTML = filmsLayoutFilm(body);
+                    }
+                })
+            // toggle details 
+            parentClass.toggle('details--open');
+            articleClass.toggle('active');
+
+            parentClass.contains("details--open") ? moviesButton.textContent = "Hide details" : moviesButton.textContent = "Show details";
+
+            })
+            .catch(function(error) {
+            displayErrorToUser("Server failed to return data");
+            });
+        }
+    });
+}
+
+/*
+-----------------
+DISPLAY TEMPLATES
+-----------------
+*/
+function filmsLayoutSearchResult(item) {
+    // fallbacks or empty if data is null TODO
+    const title = `${item.Title}`;
+    const year = `${item.Year}`;
+    const id = `${item.imdbID}`;
+    const posterurl = item.Poster !== "N/A" ? `${item.Poster}` : "";
+    return `
+        <section class="moviesfeed__full" id="${id}" style="background-image: url(${posterurl});">
+            <div class="moviesfeed__content">
+                <header class="movie__header"><h3 class="movie__title"><span>${title} <em>${year}</em></span></h3></header>
+                <a href="#" class="btn moviesfeed__btn" data-id="${id}">Show details</a>
+            </div>
+            <div class="moviesfeed__details" data-id="${id}"><a class="closeBtn">X</a></div>
+        </section>`;
+  };  
+
+function displaySearchList(filmArticles) {
+
+    moviesParentNode.innerHTML = "";
+    // filter out films without posters
+    let searchArray = filmArticles.Search.filter(item => {
+        return item.Poster !== "N/A"
+        });
+
+    searchArray.map(item => {
+        const article = document.createElement("article");
+        article.innerHTML = filmsLayoutSearchResult(item);
+        return moviesParentNode.appendChild(article);
+    });
+
+
+}  
+function filmsLayoutFilm(body)  {
+    // fallbacks or empty if data is null TODO
+
+    const director = body.Director !== "N/A" ? `<h3>Directed by ${body.Director}</h3>` : "";
+    const plot = body.Plot !== "N/A" ? `<p>${body.Plot}</p>` : "";
+    const actors = body.Actors !== "N/A" ? `<li><strong>Starring: </strong>${body.Actors}</li>` : "";
+    const language = body.Language !== "N/A" ? `<li><strong>Language: </strong>${body.Language}</li>` : "";
+    const genre = body.Genre !== "N/A" ? `<li><strong>Genre: </strong>${body.Genre}</li>` : "";
+    const guidance = body.Rated !== "N/A" ? `<li><strong>Movie Guidance: </strong>${body.Rated}</li>` : "";
+    const rating = body.imdbRating !== "N/A" ? `<p><strong>Moudy lemons score: </strong>${body.imdbRating}</p>` : "";
+
+    return `<div class="moviesfeed__details--wrap">${director}${plot}<ul class="moviesfeed__details-list menu--settings">${actors}${language}${genre}${guidance}</ul>${rating}</div>`;
+}
+
+
+// function displayFullFilm(body) {
+//     const movieDetails = document.querySelectorAll(".moviesfeed__details");
+//     movieDetails.forEach(movie => {
+
+//         let movieID = movie.dataset.id;
+//          if (movieID === parentSection) {
+//             movieDetails.innerHTML = filmsLayoutFilm(body);
+//          }
+//     })
+// }  
+
+
+/* 
+------
+PAGING
+------
+*/
+
+//Functions: next page
+function clickNext(event) {
+    event.preventDefault();
+    page++;
+    const searchText = form.search.value;
+    console.log(form.search.value);
+    // const searchQuery = formRef.search.value;
+    const APIQuery = `http://www.omdbapi.com/?s=${searchText}&page=${page}&apikey=eabbbb71`;
+    fetchContent(APIQuery);
+}
+
+//Functions: previous page
+function clickPrevious(event) {
+    event.preventDefault();
+    if (page > 1) {
+        page--;
+        const searchText = form.search.value;
+        const APIQuery = `http://www.omdbapi.com/?s=${searchText}&page=${page}&apikey=eabbbb71`;
+    fetchContent(APIQuery);
+    } 
+}
+
+/* 
+--------------
+FETCH REQUESTS
+--------------
+*/
+function fetchContent(APIQuery) {
+    fetch(APIQuery)
+        .then(function(response) {
+        return response.json();
+        })
+        .then(function(body) {
+        displaySearchList(body);
+        })
+        .catch(function(error) {
+        displayErrorToUser("Server failed to return data");
+        });
+    }
+
+// function fetchFullContent(APIQuery) {
+//     fetch(APIQuery)
+//         .then(function(response) {
+//         return response.json();
+//         })
+//         .then(function(body) {
+//         displayFullFilm(body);
+//         })
+//         .catch(function(error) {
+//         displayErrorToUser("Server failed to return data");
+//         });
+//     }    
+
+function displayErrorToUser() {};