0

I'm trying to create a movieApp with JavaScript and HTML. The logic is that using an API I get the data of the movies into a JavaScript file and use it to show them using createElements in a certain section of the HTML index file using its ID. I want to use an aHref link that shows the details of that specific movie. I don't know how to pass the parameters from JavaScript to the new HTML file that shows the specific details, named singleViewMovie.html.

Here's the replit where I'm working the project on: [] (https://replit.com/@Kanoopz/moviesWebModified#script.js)

The code is: index.html:

<!DOCTYPE html>

<html>
  <head>
    <title>Movies Site</title>
    <link rel="stylesheet" href="style.css">
  </head>
  
  <body>
    <div class="topnav">
      <a class="active" href="#">Movies Site</a>
      
      <div class="search-container">
        <form role="search" id="form">
          <input type="search" id="query" name="q" placeholder="Search..">
        </form>
      </div>
    </div>
  
    <div style="padding-left:16px">
    
    <section id="section"></section>
  </body>
    
  <script src="script.js"></script>
</html>

script.js:

const APILINK = 'https://api.themoviedb.org/3/discover/movie?sort_by=popularity.desc&api_key=41ee980e4b5f05f6693fda00eb7c4fd4&page=1';
const IMG_PATH = "https://image.tmdb.org/t/p/w1280";
const SEARCHAPI = "https://api.themoviedb.org/3/search/movie?&api_key=41ee980e4b5f05f6693fda00eb7c4fd4&query=";


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

const singleViewNameDiv = document.getElementById("movieNameSingleView");
returnMovies(APILINK)

function returnMovies(url)
{
  fetch(url).then(res => res.json()).then
  (function(data)
    {
      console.log(data.results);
        
      data.results.forEach
      (element => 
        { 
          const div_card = document.createElement('div');
          div_card.setAttribute('class', 'card');
            
          const div_row = document.createElement('div');
          div_row.setAttribute('class', 'row');
              
          const div_column = document.createElement('div');
          div_column.setAttribute('class', 'column');
              
          const image = document.createElement('img');
          image.setAttribute('class', 'thumbnail');
          image.setAttribute('id', 'image');
              
          const title = document.createElement('h3');
          title.setAttribute('id', 'title');
              
          const center = document.createElement('center');
        
          title.innerHTML = `${element.title}`;
          image.src = IMG_PATH + element.poster_path;

          //////////////////////////////////////////////////////////////////////////////////
          const aLink = document.createElement('a');
          aLink.setAttribute('href', 'singleViewMovie.html');
          aLink.innerText = 'Go to details';
          //////////////////////////////////////////////////////////////////////////////////
        
          center.appendChild(image);
          div_card.appendChild(center);
          div_card.appendChild(title);
          div_card.appendChild(aLink);
          div_column.appendChild(div_card);
          div_row.appendChild(div_column);
        
          main.appendChild(div_row);
        }
      );
    }
  );
}

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

    const searchItem = search.value;

    if (searchItem) 
    {
      returnMovies(SEARCHAPI + searchItem);
      search.value = "";
    }
  }
);

And singleViewMovie.html:

<!DOCTYPE html>

<html>
  
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <title>replitSingleMovieView</title>
    <link href="style.css" rel="stylesheet" type="text/css" />
  </head>
  
  <body style="background-color: #131720;">
    <!--//"TITULO PARA REGRESAR A INDEX.HTML"///-->
    <div>
      <a href="index.html">
        <h1>HOME</h1>
      </a>
    </div>

    <!--//"NOMBRE DE LA PELICULA"///-->
    <div id="movieNameSingleView">
      <hr/>
      <h3 style="color: white">movieName</h3>
      <hr/>
    </div>
  
    <br/>

    <!--//"IMAGEN DE LA PELICULA"///-->
    <div id ="imageSingleView" style="background-color: #151f30; padding-left: 20px;">
      <br/>
      <img width="550" src="spiderman.jpg" />
      <br/>
      <br/>
    </div>
  
    <br/>
    <br/>

    <!--//"DETALLES DE LA PELICULA CON EL NOMBRE, FECHA Y DESCRIPCION"///-->
    <div id="detailsSingleView">
      <hr/>
        <h4 style="color: white">movieName</h4>
        <h6 style="color: white">releaseDate</h6>
      
        <p style="color: white">movieDescriptionOneTwoThreeFourFiveSixSevenEightNineTenElevenTwelveThirteen</p>
      <hr/>
    </div>
  
  
  
    
  
    <!-- ---------------------------------------------------------------------------------
      This script places a badge on your repl's full-browser view back to your repl's cover
      page. Try various colors for the theme: dark, light, red, orange, yellow, lime, green,
      teal, blue, blurple, magenta, pink!
    -->
  
    <script src="script.js"></script>
    <script src="https://replit.com/public/js/replit-badge.js" theme="blue" defer></script>
  
    <!--
    --------------------------------------------------------------------------------------
    -->
  </body>

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

I want to pass the name of the movie, image path, and description to work with it in the singleViewMovie.html.

VLAZ
  • 26,331
  • 9
  • 49
  • 67
kanoopz
  • 1
  • 1

0 Answers0