CODEWITHSUNDEEP
javascriptes6-modules
Anas
Anas

Reputation: 61

Component in vanilla Javascript?

I have tried to create to create a component in vanilla JavaScript here in main js file I am trying to call a function that is defined in a component and also I am expecting an output but it gives me error saying showMovies is not a function. Can anyone tell me what is right way to do so:

import Component from './Component.js';

form.addEventListener("submit", (e) => {
  e.preventDefault();
  main.innerHTML = "";

  const searchTerm = search.value;
  const SEARCHAPI = "https://api.themoviedb.org/3/search/movie?&api_key=04c35731a5ee918f014970082a0088b1&query=";

  if (searchTerm) {
    Component.showMovies(SEARCHAPI + searchTerm);
    search.value = "";
  } else {
    main.innerHTML = "<h1>No result Found!</h1>";
  }
});

const Component = () => {

  const IMGPATH = "https://image.tmdb.org/t/p/w1280";
  // const SEARCHAPI = "https://api.themoviedb.org/3/search/movie?&api_key=04c35731a5ee918f014970082a0088b1&query=";

  const main = document.getElementById("main");
  const form = document.getElementById("form");
  const search = document.getElementById("search");

  const showMovies = (url) => {
    fetch(url)
      .then((res) => res.json())
      .then(function(data) {
        console.log(data.results);
        const el = document.createElement("div");
        const title = document.createElement("h3");

        const rank = document.createElement("h3");
        const image = document.createElement("img");
        const year = document.createElement("h3");

        image.src = IMGPATH + data.results[0].poster_path;
        el.appendChild(image);

        let date = new Date(data.results[0].release_date);

        rank.innerHTML = "Rating: &emsp;" + data.results[0].popularity;

        title.innerHTML = "Title: &emsp;" + data.results[0].title;
        year.innerHTML = "Release: &emsp;" + date.getFullYear();

        main.appendChild(el);
        main.appendChild(title);
        main.appendChild(rank);
        main.appendChild(year);
      });
  };


}

export default Component;

Upvotes: 1

Views: 704

Answers (1)

Debashish
Debashish

Reputation: 501

The component you have defined here is a function that consists a function called showMovies. But as you have not returned the function, it will be inaccessible. To be able to use it, you may return the function.

const Component = ()=>{

const IMGPATH = "https://image.tmdb.org/t/p/w1280";
// const SEARCHAPI = "https://api.themoviedb.org/3/search/movie?&api_key=04c35731a5ee918f014970082a0088b1&query=";

const main = document.getElementById("main");
const form = document.getElementById("form");
const search = document.getElementById("search");

 const showMovies = (url) => {
    fetch(url)
      .then((res) => res.json())
      .then(function (data) {
        console.log(data.results);
        const el = document.createElement("div");
        const title = document.createElement("h3");
  
        const rank = document.createElement("h3");
        const image = document.createElement("img");
        const year = document.createElement("h3");
  
        image.src = IMGPATH + data.results[0].poster_path;
        el.appendChild(image);
  
        let date = new Date(data.results[0].release_date);
  
        rank.innerHTML = "Rating: &emsp;" + data.results[0].popularity;
  
        title.innerHTML = "Title: &emsp;" + data.results[0].title;
        year.innerHTML = "Release: &emsp;" + date.getFullYear();
  
        main.appendChild(el);
        main.appendChild(title);
        main.appendChild(rank);
        main.appendChild(year);
       });
    };
  
    return { showMovies };
}

export default Component;

Now you can use the function using Component().showMovies(SEARCHAPI + searchTerm)

Upvotes: 1

Related Questions