Question

我正在使用API，但我坚持这一部分。因此，目前，如果我搜索电影，它将在TMDB上播放并从那里获取信息，并将其显示在我的网页上。这样我就可以工作了，但是现在我有一个模态窗口，上面写着“您喜欢电视节目还是电影”，有两个选项，电影和电视节目。如果有人检查电视节目，它又如何从tmdb中抢走电视节目，而当有人搜索电视节目时，该如何显示呢？我已经坚持了好几天，需要帮助。

这是我的密码

<!DOCTYPE html>

<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Movie Recommendations</title>
    <meta name="viewport" content="width=device-width" />
    <link rel="stylesheet" href="css/main.css" />
</head>



<body>
    <main>
        <header class='head'>
            <div class='page ' id='movie'>
                <div>
                    <h1>Movie Search</h1>
                </div>
            </div>
            <div class='page toggle' id='tv'>
                <div>
                    <h1>TV Show Search</h1>
                </div>
            </div>

            <div class="icons">

                <div class="backButtonDiv">
                    <img id="back-button" alt="Back" title="Back" data-src="img/back-button.svg" class="iconic iconic-md" />
                </div>
                <div>
                     <input type="text" id="search-input" placeholder="Search.." />
                </div>
                <div class="searchButtonDiv">
                    <img id="search-button" alt="Search" title="Search" data-src="img/magnifying-glass.svg" class="iconic iconic-md" />
                </div>
            </div>

        </header>

        <div class="page hide" id="search-results">
            <div>
                <h1>Your shows..</h1>
            </div>
            <section class="title"></section>
            <section class="content flex-container"></section>
        </div>




        <div class="input">

            <div id="modalButton" class="modalBtn">
                <img data-src="img/settings.svg" class="iconic iconic-md" alt="settings" id="modalBtn" />
            </div>
        </div>

    </main>

    <footer>
        <div class="attribution">
            <a href="https://www.themoviedb.org/" alt="The Movie Database">
                <img src="img/tmdb1.svg" alt="AttributionImage" id="tmdb"></a>
            <p>&copy; ddd</p>
        </div>
    </footer>

    <div class="overlay toggle">&nbsp;</div>

    <div class="modal off">
        <div class="modal-header">
            <h2>Choose your preference</h2>
        </div>
        <div class="modal-radio">

            <input type="radio" name="pref" value="movie" id="movie" checked>
            <label for="movie">Movies</label>

            <input type="radio" name="pref" value="tv" id="tv">
            <label for="TV">Television shows</label>
        </div>
        <button class="cancelButton">Cancel</button>
        <button class="saveButton">Save</button>

    </div>

    <!--  Modal window-->




    <script src="js/iconic.min.js"></script>
    <script src="js/key.js"></script>
    <script src="js/main.js"></script>
</body>

</html>

js

///* globals APIKEY */

const movieDataBaseURL = "https://api.themoviedb.org/3/";
const APIKEY ='f8219ab886ef5d0e9bae240821d59cc2';

let imageURL = null;
let imageSizes = [];
let searchString = "";
let timeKey = "timeKey";
let staleDataTimeOut = 3600; // 30 seconds, good for testing

document.addEventListener("DOMContentLoaded", init);


function init() {
    console.log(APIKEY);
    addEventListeners();

    getLocalStorageData();


    // MODAL WINDOW
    document.querySelector("#modalButton").addEventListener("click", showOverlay);
    document
        .querySelector(".cancelButton")
        .addEventListener("click", hideOverlay);
    document.querySelector(".overlay").addEventListener("click", hideOverlay);

    document.querySelector(".saveButton").addEventListener("click", function (e) {
        let pref = document.getElementsByName("pref");
        let videos = null;
        for (let i = 0; i < pref.length; i++) {
            if (pref[i].checked) {
                videos = pref[i].value;
                break;
            }
        }
        alert("You choose " + videos);
        console.log("You picked " + videos);
        if (videos == "tv") {
            document.querySelector("#movie").classList.add("toggle");
            document.querySelector("#tv").classList.remove("toggle");

        } else {
            document.querySelector("#movie").classList.remove("toggle");
            document.querySelector("#tv").classList.add("toggle");
        }
        hideOverlay(e);
    });

    // MODAL WINDOW



}



function addEventListeners() {
    let searchButton = document.querySelector(".searchButtonDiv");
    searchButton.addEventListener("click", startSearch);


    let searchResults = document.getElementById("search-results");
    document.getElementById("search-input").addEventListener("keyup",
        function (event) {
            if (event.keyCode === 13) {
                startSearch();
            }
        });


    let backButton = document.querySelector(".backButtonDiv");
    backButton.addEventListener("click", homePage);
}

function homePage() {
    location.reload();

}

function getLocalStorageData() {
    if (localStorage.getItem(timeKey)) {

        let savedDate = localStorage.getItem(timeKey);
        savedDate = new Date(savedDate);

        let seconds = calculateElapsedTime(savedDate);

        if (seconds > staleDataTimeOut) {
            console.log("Local Storage Data is stale");

        }
    } else {
        saveDateToLocalStorage();
    }
    // if there is no poster path or sizes data in local storage
    // or if the information is over 60 minutes old (stale)
    // then we need to get that data from TMDb using Fetch

    getPosterSizesandURL();
}


function saveDateToLocalStorage() {
    console.log("Saving current Date to Local Storage");
    let now = new Date();
    localStorage.setItem("imageSizes", imageSizes);
    localStorage.setItem(timeKey, now);
}

function calculateElapsedTime(savedDate) {
    let now = new Date();
    console.log(now);


    let elapsedTime = now.getTime() - savedDate.getTime();

    let seconds = Math.ceil(elapsedTime / 1000);
    console.log("So far we been elapsed for  " + seconds + " seconds");
    return seconds;
}

function getPosterSizesandURL() {
    // we need to create the url, it's a good idea to have a global base url (look at the top of this file)
    // https://developers.themoviedb.org/3/getting-started/introduction
    // https://developers.themoviedb.org/3/configuration/get-api-configuration
    // e.g. https://api.themoviedb.org/3/configuration?api_key=<<api_key>>

    let url = `${movieDataBaseURL}configuration?api_key=${APIKEY}`;

    fetch(url)
        .then(response => response.json())
        .then(function (data) {
            console.log(data);
            imageURL = data.images.secure_base_url;
            imageSizes = data.images.poster_sizes;
            saveDateToLocalStorage(imageSizes);
            console.log(imageURL);
            console.log(imageSizes);

        })
        .catch((error) => console.log(error));

}


function startSearch() {
    console.log("Searching...");
    searchString = document.getElementById("search-input").value;
    if (!searchString) {
        alert("Please enter search data");
        searchString.focus();
        return;
    }

    // this is a new search so you should reset any existing page data

    getSearchResults();
}

function getSearchResults() {
    let url = `${movieDataBaseURL}search/movie?api_key=${APIKEY}&query=${searchString}`;
    fetch(url)
        .then(response => response.json())
        .then(data => {
            console.log(data);

            //  create the page from data
            createPage(data);
            //  navigate to "results";
        })
        .catch(error => console.log(error));
}


function showOverlay(e) {
    e.preventDefault();
    let overlay = document.querySelector(".overlay");
    overlay.classList.remove("hide");
    overlay.classList.add("show");
    showModal(e);
}

function showModal(e) {
    e.preventDefault();
    let modal = document.querySelector(".modal");
    modal.classList.remove("off");
    modal.classList.add("on");
}

function hideOverlay(e) {
    e.preventDefault();
    e.stopPropagation(); // don't allow clicks to pass through
    let overlay = document.querySelector(".overlay");
    overlay.classList.remove("show");
    overlay.classList.add("hide");
    hideModal(e);
}

function hideModal(e) {
    e.preventDefault();
    let modal = document.querySelector(".modal");
    modal.classList.remove("on");
    modal.classList.add("off");
}



function createPage(data) {

    let content = document.querySelector("#search-results>.content");

    let title = document.querySelector("#search-results>.title");

    let message = document.createElement("h2");
    content.innerHTML = "";
    title.innerHTML = "";

    if (data.total_results == 0) {
        message.innerHTML = `No results found for ${searchString}`
    } else {
        message.innerHTML = `There are ${data.total_results} results for ${searchString}`;
    }
    title.appendChild(message);

    let documentFragment = new DocumentFragment;

    documentFragment.appendChild(createMovieCards(data.results));

    content.appendChild(documentFragment);

    let cardList = document.querySelectorAll(".content>div");

    cardList.forEach(function (item) {
        item.addEventListener("click", getRecommendations);
    });

}

function createMovieCards(results) {

    let documentFragment = new DocumentFragment(); // use a documentFragment for performance

    results.forEach(function (movie) {
        let movieCard = document.createElement("div");
        let section = document.createElement("section");
        let image = document.createElement("img");
        let videoTitle = document.createElement("p");
        let videoDate = document.createElement("p");
        let videoRating = document.createElement("p");
        let videoOverview = document.createElement("p");

        // set up the content
        videoTitle.textContent = movie.title;
        videoDate.textContent = movie.release_date;
        videoRating.textContent = movie.vote_average;
        videoOverview.textContent = movie.overview;

        // set up image source URL
        image.src = `${imageURL}${imageSizes[2]}${movie.poster_path}`;
        //class names to style in css
        videoTitle.className = "videoTitle";
        videoOverview.className = "videoOverview";
        videoRating.className = "videoRating";
        videoDate.className = "videoDate";


        // set up movie data attributes
        movieCard.setAttribute("data-title", movie.title);
        movieCard.setAttribute("data-id", movie.id);

        // set up class names
        movieCard.className = "movieCard";
        section.className = "imageSection";


        // append elements
        section.appendChild(image);
        movieCard.appendChild(section);
        movieCard.appendChild(videoTitle);
        movieCard.appendChild(videoDate);
        movieCard.appendChild(videoRating);
        movieCard.appendChild(videoOverview);

        documentFragment.appendChild(movieCard);
    });

    return documentFragment;
}

function getRecommendations() {
    //console.log(this);
    let movieTitle = this.getAttribute("data-title");

    searchString = movieTitle;


    let movieID = this.getAttribute("data-id");
    console.log("you clicked: " + movieTitle + " " + movieID);

    let url = `${movieDataBaseURL}movie/${movieID}/recommendations?api_key=${APIKEY}`;
    fetch(url)
        .then(response => response.json())
        .then(data => {
            console.log(data);

            //  create the page from data
            createPage(data);
            //  navigate to "results";
        })
        .catch(error => console.log(error));

}

css

   @import url('https://fonts.googleapis.com/css?family=Bellefair');
    @import url('https://fonts.googleapis.com/css?family=Aldrich');
    /*Dont touch anything below here*/
    * {
        padding: 0;
        margin: 0;
    }

    #search-button, #back-button {
        height: 3rem;
        width: 3rem;
        cursor: pointer;
    }

    .iconic-property-stroke,
    .iconic-property-fill {
        fill: #345;
        stroke: #269
    }

    /*Dont touch anything above here*/
    /*Add this class to the recommend and search results content sections in HTML*/
    header {
        align-items: center;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
    }


    .searchButtonDiv,
    .backButtonDiv,
    .modalBtn {
        display: flex;
        position: relative;
    }

    #search-button {
        transform: translatex(-50px) translateY(-35px);
    }

    #back-button{
        transform: translateX(-120px) translateY(40px);

    }

    #modalButton{
        transform: translateX(650px) translateY(-180px);

    }
    .videoTitle{
        font-family:"bellefair", "Times New Roman", Serif;
        font-size:2rem;
        border-bottom:1px dashed;
        padding:0.5rem;
        color:hsl(0, 6%, 69%);
    }
    .videoTitle:hover{
        font-size:50px;
    }
    .videoOverview,.videoDate,.videoRating{
        font-family:"Aldrich"
    }
    h1 {
        font-size: 3rem;
        text-shadow: 4px 4px grey;
        color:white;
        font-family:"bellefair"

    }

    /*
    .backButtonDiv{
        transform:translateY(30px) translateX(-30px);
    }
    */
    .flex-container {
        display: flex;
        flex-wrap: wrap;
    }

    .movieCard {
        width: 50rem;
        height: auto;
        margin: 1rem auto;
        background-color: hsl(15, 83%, 58%);
        color: white;
        border-radius:20px;

    }

    .movieCard:hover {
        /*    font-size: 1.2rem;*/
        font-weight: bold;
        width: 75rem;
        transform: scale(1.03);
        transition: transform 0.5s ease;
        box-shadow: 5px 5px hsl(199, 58%, 39%);
        font-size:20px;

    }

    .imageSection {
        float: left;
        width: 12rem;
        height: 17rem;
        margin-right: 1rem;
        overflow: hidden;
        padding: 0.5rem;
    }

    /*select only the images that are direct descendants of .imageSection*/
    .imageSection > img {
        height: 17rem;
        margin-right: 1rem;
        border-radius:20px;
    }

    html {
        background-color: hsl(157, 68%, 89%);
        text-align: center;
        padding-top: 5rem;

    }

    main {
        background-color: hsl(157, 68%, 81%);
        padding: 1.5rem;
        margin: 2rem;
        border: 5px dashed black;
        border-radius: 100px;
        box-shadow: 10px 10px hsl(0, 64%, 89%);
    }


    #search-input {
        width: 500px;
        height: 25px;
        font-size: 1rem;
        text-align: center;
        border-radius: 20px;
        transition: 0.5s all ease-in;
    }


    #search-input:hover {
        width: 700px;
        transition: 0.5s all ease-in;
    }

    .modal {
        text-align: center;
        position: relative;
        max-width: 50%;
        z-index: 200;
        flex-direction: column;
        font-weight: 800;
        transition: transform 1s ease-out;
    }



    #tmdb {
        width: 150px;
   }


    /*--------------------------
    Modal Window*/

    .overlay {
        position: fixed;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        z-index: 100;
        background: rgba(0, 0, 0, 0.8);
        cursor: pointer;
    }

    .modal {
        position: fixed;
        width: 500px;
        height: 280px;
        z-index: 200;
        top: calc((100% - 280px)/2);
        left: calc((100% - 500px)/2);
        font-family: Roboto, Helvetica, Arial, sans-serif;
        line-height: 1.5;
        color: #555;
        background-color: #eee;
    }

    /* use these class names to show or hide the overlay and modal window */
    .show {
        display: block;
    }

    .toggle {
        display: none;
    }

    .off {
        transform: translateY(-400%);
    }

    .on {
        transform: translateY(0);
    }

    .cancelButton,
    .saveButton {
        width: 120px;
        position: absolute;
        border: none;
        background-color: orange;
        color: white;
        cursor: pointer;
        padding: 0.25rem 2rem;
        font-size: 1rem;
    }

    .saveButton {
        bottom: 1rem;
        right: 4rem;
    }

    .cancelButton {
        bottom: 1rem;
        left: 4rem;
    }

    .modal-header {
        padding: 2px 16px;
        background-color: orange;
        color: white;
        text-align: center;
    }

    .modal-radio {
        text-align: center;
        margin-top: 4rem;
    }

    /*modal window---------------------------------*/

TMDB影视API

0 个答案: