Need help pulling the specific ID from item return from an ID. : learnprogramming

Hi there,

I’m working an a movie API, which basically fetches a list of movies, grabs the individual movie ID, and then based on the movie ID, pulls the details of it.

I’m create a “saved”/watchlist, by pushing the saved ID’s to an array to push to local storage.

I’ve filmed a 5 minute video explaing how my code works + the issue I’m coming into.

If any one can help, that would be awesome!

My code for reference is below:

JS

const apiKey = "c1720c47"
const searchBtnEl = document.getElementById("search-btn")
const inputEl = document.getElementById("searchInput")
const exploreEl = document.getElementById("explore")
const watchlistEl = document.getElementById("watchlist")

const movieContainerEl = document.getElementById("movie-container")
let watchListarr = []


function watchList() {
    console.log("click")
}


searchBtnEl.addEventListener("click", (e) => {
    e.preventDefault()
    const inputValue = inputEl.value

    const iD = []
    let movieHTML = ""

    // To Fetch IMBD ID
    fetch(`http://www.omdbapi.com/?s=${inputValue}&apikey=${apiKey}`)
        .then(res => res.json())
        .then(data => {

            if (data.Response === "False") {
                movieContainerEl.innerHTML = `
                <div class="explore" id="explore">
                    <p>Unable to find what you’re looking for. Please try another search.</p>
                </div>
                `
            }


            for (let i = 0; i < 10; i++) {
                iD.push(data.Search[i].imdbID)
            }
            console.log(iD)
            for (let j = 0; j < iD.length; j++) {
                fetch(`http://www.omdbapi.com/?i=${iD[j]}&apikey=${apiKey}`)
                    .then(res => res.json())
                    .then(data => {
                        movieHTML += `
                        <div class="movie">
                        <div class="img-holder">
                          <img
                            src="${data.Poster}"
                            alt="movie"
                          />
                        </div>
                        <div class="movie-info">
                          <div class="movie-title">
                            <h2>${data.Title}</h2>
                            <p><i class="fas fa-star"></i> ${data.imdbRating}</p>
                          </div>
                          <div class="movie-details">
                            <p>${data.Runtime} </p>
                            <p>${data.Genre}</p>
                            <p id="watchlist" onclick="watchList()">
                              <i class="fa fa-plus-circle" aria-hidden="true"></i> Watchlist
                            </p>
                          </div>
                          <div class="movie-summary">
                            <p>
                              ${data.Plot}
                            </p>
                          </div>
                        </div>
                      </div>
                        `

                        movieContainerEl.innerHTML = movieHTML



                    })
            }


        })

})

HTML

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>My Project</title>
    <!-- <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css"
        integrity="sha512-iBBXm8fW90+nuLcSKlbmrPcLa0OT92xO1BIsZ+ywDWZCvqsWgccV3gFoRBv0z+8dLJgyAHIhR35VZc2oM/gI1w=="
        crossorigin="anonymous" referrerpolicy="no-referrer" /> -->
    <script
      src="https://kit.fontawesome.com/615f70c9e4.js"
      crossorigin="anonymous"
    ></script>
    <link rel="stylesheet" href="style.css" />
  </head>

  <body>
    <div class="banner">
      <div class="banner-text">
        <h1>Find your film</h1>
        <h3>My Watchlist</h3>
      </div>
    </div>
    <div class="searchbar">
      <form>
        <span><img src="SearchIcon.png" /></span>
        <input id="searchInput" type="text" placeholder="Search A Movie" />
        <button id="search-btn" class="search-btn">Search</button>
      </form>
    </div>

    <!-- ****DEFUALT***** -->

    <!-- ****DEFUALT***** -->

    <div class="container">
      <div class="movie-container" id="movie-container">
        <div class="explore" id="explore">
          <img src="MovieRoll.png" alt="" />
          <p>Start Exploring</p>
        </div>

        <!-- <div class="movie">
          <div class="img-holder">
            <img
              src="https://m.media-amazon.com/images/M/MV5BNjM0NTc0NzItM2FlYS00YzEwLWE0YmUtNTA2ZWIzODc2OTgxXkEyXkFqcGdeQXVyNTgwNzIyNzg@._V1_SX300.jpg"
              alt=""
            />
          </div>
          <div class="movie-info">
            <div class="movie-title">
              <h2>Blade Runner</h2>
              <p><i class="fas fa-star"></i> 8.1</p>
            </div>
            <div class="movie-details">
              <p>117 min</p>
              <p>Action, Drama, Sci-fi</p>
              <p id="watchlist">
                <i class="fa fa-plus-circle" aria-hidden="true"></i> Watchlist
              </p>
            </div>
            <div class="movie-summary">
              <p>
                A blade runner must pursue and terminate four replicants who
                stole a ship in space, and have returned to Earth to find their
                creator.
              </p>
            </div>
          </div>
        </div> -->
      </div>
    </div>

    <script src="script.js"></script>
  </body>
</html>

CSS

@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500;800&display=swap");

* {
  box-sizing: border-box;
}

body {
  font-family: "Inter", sans-serif;
  height: 100vh;
  margin: 0;
  padding: 0;
}

.banner {
  width: 100%;
  height: 25%;
  background-color: rgb(97, 96, 96);
  background-image: url("backgroundimg.jpg");
  background-size: cover;
  background-repeat: no-repeat;
  background-position: 0% 30%;
  background-blend-mode: darken;
  display: flex;
  align-items: center;
  justify-content: space-around;
  color: white;
}

.banner-text {
  width: 84%;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.banner-text h1 {
  font-weight: 800;
  font-size: 3rem;
}

.banner-text h3 {
  transform: translateY(25%);
}

/* Start Search Bar */

.searchbar {
  background: white;
  border: 1px solid #d1d5db;
  /* border: 1px solid green; */
  border-radius: 5px 5px 5px 5px;
  width: 84%;
  margin: 0 auto;
  transform: translateY(-50%);
  height: 5%;
}

form {
  width: 100%;
  height: 100%;
  margin: 0 auto;
  display: flex;
  align-items: center;
  outline: none;
  border: 0;
}

form span {
  padding: 0 0.5rem;
}

form input {
  width: 72%;
  height: 100%;
  border-radius: 5px 0 0 5px;
  font-weight: 500;
  font-size: 1rem;
  border: none;
  background-repeat: no-repeat;
  background-position: center left;
}

form input:active,
form input:focus {
  outline: none;
}

form button {
  width: 25%;
  height: 100%;
  border-radius: 0 5px 5px 0;
  border: 1px solid #d1d5db;
  font-size: 1rem;
  color: #374151;
  background-color: #f9fafb;
}

form button:active,
form button:focus,
form button:hover {
  cursor: pointer;
}

form button:active {
  transform: scale(0.99);
}

/* End Search Bar */

/* Start Explore */

.container {
  height: 70%;
  width: 100%;
  /* background: gray; */
}

/* Default */

.explore {
  margin-top: 0;
  height: 70%;
  background-color: #ffffff;
  /* border: 1px red solid; */
  display: flex;
  justify-content: center;
  flex-direction: column;
  align-items: center;
}

.explore img {
  width: 10%;
  height: 6rem;
}

.explore p {
  color: #dfdddd;
  font-weight: 700;
  font-size: 1rem;
}

/* Movies */

.movie-container {
  width: 84%;
  height: 100%;
  /* border: 1px solid blue; */
  margin: 0 auto;
}

.movie img {
  width: 7rem;
  height: auto;
}

.movie {
  display: flex;
  /* border: 1px solid red; */
  border-bottom: 2px solid #e5e7eb;
  padding-bottom: 1rem;
}

.movie-title {
  display: flex;
  align-items: center;
}

.fa-star {
  color: #fec654;
}

.movie-title h2 {
  font-size: 1rem;
  font-weight: 800;
}

.movie-title p {
  margin-left: 1rem;
  font-size: 0.8rem;
  font-weight: 800;
}

.movie-info {
  /* background-color: #dfdddd; */
  padding-left: 1.5rem;
  font-size: 0.8rem;
}

.movie-details {
  display: flex;
  justify-content: space-between;
  width: 20rem;
  /* border: 1px solid red; */
}

.movie-summary {
  color: #6b7280;
  font-weight: 400;
}

/* End Explore */ ;

Leave a Comment