MoviesApp/wishlist.js at master · vasanth-seven/MoviesApp · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
const IMG_PATH = "https://image.tmdb.org/t/p/w500";
const API_KEY = "5e78d0de3d7a05661e85587fae4693b4";
const close = document.querySelector(".close");
const body = document.querySelector("body");
const overlay = document.querySelector(".overlay");
const movieCard = document.querySelector(".movie-card");

// const addToFavorites = () => {};
const allWishlist=document.querySelector('.all-wishlist')
window.addEventListener("load", () => {
  const menuButton = document.querySelector(".menu-icon");
  const menu = document.querySelector(".menu");
  const closeButon = document.querySelector(".cancel-icon");

  menuButton.onclick = () => {
    menu.classList.add("active");
    menuButton.style.display = "none";
    closeButon.style.display = "block";
  };
  // menuButton.addEventListener("click", () => {
  // });
  closeButon.addEventListener("click", () => {
    menu.classList.remove("active");
    menuButton.style.display = "block";
    closeButon.style.display = "none";
  });

let wishlist= localStorage.getItem('wishlist')
let wishlistArray = JSON.parse(localStorage.getItem("wishlist"));
console.log(wishlistArray)
if(wishlist==null || wishlist==[]){
allWishlist.innerHTML=`
<h2>
NO MOVIES ADDED...
ADD SOME MOVIES TO WISHLIST...
</h2>
`
}
else{

  async function fetchTopRate(wishid) {
    const resp = await fetch(`https://api.themoviedb.org/3/movie/${wishid}?api_key=${API_KEY}`);
    // console.log(`https://api.themoviedb.org/3/movie/${favid}?api_key=${API_KEY}`)
    const respData = await resp.json();
    console.log(wishid)
    if(respData.success!=false){
      const { title, vote_average, poster_path, id } = respData;
      const topRated = document.createElement("div");
      topRated.classList.add("movies");
      topRated.id = id;
      topRated.innerHTML = `
      <a class="favorite" title="ADD TO FAVORITES"><i class="fas fa-heart"></i></a>
      <a class="wishlist" title="ADD TO WISHLIST "><i class="fas fa-bookmark"></i></a>
          <img class ="movie-poster" loading="lazy" src=${IMG_PATH + poster_path}>
                  <div class="movie-info">
                      <h3 class="movie-title">${title}</h3>
                      <span class="movie-rating">${vote_average}</span>
                  </div>`;
      allWishlist.append(topRated);
    }
  }
  fetchTopRate();


    for(let i=0;i<wishlistArray.length;i++){
      if(wishlistArray[i]!=undefined)
      fetchTopRate(wishlistArray[i])
    }


    const getMovieById = async (id) => {
      const resp = await fetch(
        `https://api.themoviedb.org/3/movie/${id}?api_key=${API_KEY}`
      );
      const respData = await resp.json();
      const {
        title,
        tagline,
        overview,
        genres,
        poster_path,
        release_date,
        vote_average,
        revenue,
        runtime,
      } = respData;
      let genre = "";
      genres.forEach((x) => (genre += x.name + " "));
      const img=new Image;
      img.src= `https://image.tmdb.org/t/p/w500/${poster_path}`;
      img.addEventListener("load", function () {
        movieCard.innerHTML = `<div class="movie-title">
        <h1>${title}</h1>
        <span class="tagline">${tagline}</span>
        <p>${overview}</p>
        <div class="additional-details">
            <span class="genre-list">${genre}</span>

            <div class="release-details">
                <div class='movie-data'>
                    <p> Original Release:</p><span class="">${release_date}</span>
                </div>
                <div class='movie-data'>
                    <p>Running Time:</p><span class="">${runtime} mins</span>
                </div>
                <div class="movie-data">
                    <p> Box Office:</p><span class="">$${revenue}</span>
                </div>
                <div class="movie-data">
                    <p> Vote Average:</p><span class="">${vote_average} / 10</span>
                </div>
            </div>
        </div>
      </div>

          `;
        movieCard.appendChild(img)
        });


      // <img src="https://image.tmdb.org/t/p/w500/${poster_path}">

    };


    setTimeout(()=>{
      const movies = document.querySelectorAll(".movies");

      for (let i = 0; i < movies.length; i++) {
      movies[i].addEventListener("click", function () {
      const movieId = movies[i].id;
      getMovieById(movieId);

      body.style.overflow = "hidden";
      overlay.classList.toggle("active");
      });
      }


    },1000)
    close.addEventListener("click", () => {
      body.style.overflow = "auto";
      overlay.classList.toggle("active");
      movieCard.innerHTML='<h1>LOADING...</h1>';
    });
}


});