Skip to main content

movieReviewsApp: How to get the value (actual written text) from an input into a variable and display it somewhere else?

I made a html/javaScript app that get movie data from an API and displays it (index.html), when someone click the "see details" link from any movieCard theyre redirected to a new page (singleMovieView.html). I want to be able to write in an input/textarea, click a button and then, with createdElemenst of div, paragraps, h, etc, upload it into an empty div I made specially just for the reviews.

The singleMovieView.html display info of the particular movie and then, below, there are two divs; one for writing the review (textArea/input and button)and below that another div to display the pastReviews.

Heres the code:

  • 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');
          image.setAttribute('width', 250);

          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;

          let oneTitle = `${element.title}`;
          let twoImg = IMG_PATH + element.poster_path;
          let threeOverview = element.overview;
          let fourDate = element.release_date;

          //////////////////////////////////////////////////////////////////////////////////
          const aLink = document.createElement('a');
          aLink.setAttribute('href', 'singleViewMovie.html?oneTitle=' + oneTitle + '&twoImg=' + twoImg + '&threeOverview=' + threeOverview + '&fourDate=' + fourDate); //+ '&lastValue=#');
          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 = "";
    }
  }
);
  • singleViewMovie:
<!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;">
    <!--////////////////////"PRUEBA PARA VER CONTENIDO DE LOS PARAMETROS"////////////////////-->
    <div id ="forTests">
    </div>

    <!--////////////////////"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>

    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>

    <!--////////////////////"DIV PARA HACER REVIEWS"////////////////////-->
    <div>
      <h3 style="color: white">MAKE A REVIEW:</h3>

      <br/>

      <form id="newReviewsContent">  <!--<div id="newReviewsContent">-->
        <!--
        <input type="text" value="Username" id="userSpace">

        </br>
        </br>

        <textarea id="reviewSpace" rows="4" cols="50"></textarea>
        <textarea id="reviewBox" name="nameReviewBox" class="text" rows="4" cols="50"></textarea>
        -->

        <input type="text" placeholder="Review....." name="reviewBox" id="reviewBox"/>

        </br>

        <input type="submit" value="Add review"/>
      </form><!--</div>-->
    </div>

    <br/>
    <br/>

    <!--////////////////////"DIV MOSTRAR REVIEWS"////////////////////-->
    <div>
      <h3 style="color: white">PAST REVIEWS:</h3>

      </br>

      <div id="pastReviews">
      </div>
    </div>


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

  <script src="singleView.js"></script>
</html>
  • singleView.js:
let stringTitle = window.location.href;
let stringImage = window.location.href;
let stringOverview = window.location.href;
let stringDate = window.location.href;


let indexStartOne = stringTitle.indexOf('oneTitle=');
indexStartOne += 9;
let indexStartTwoForOne = stringTitle.indexOf('twoImg=');
indexStartTwoForOne -= 1;
//////////"VARIABLE QUE CONTIENE EL NOMBRE DEL TITULO"//////////
///////////////////////////////////////////////////////////////
let titleName = stringTitle.slice(indexStartOne, indexStartTwoForOne);


let indexStartTwo = stringImage.indexOf('twoImg=');
indexStartTwo += 7;
let indexStartThreeForTwo = stringImage.indexOf('threeOverview=');
indexStartThreeForTwo -= 1;
//////////"VARIABLE QUE CONTIENE LA URL DE LA IMAGEN"////////////
////////////////////////////////////////////////////////////////
let imageUrl = stringImage.slice(indexStartTwo, indexStartThreeForTwo);


let indexStartThree = stringOverview.indexOf('threeOverview=');
indexStartThree += 14;
let indexStartFourForThree = stringOverview.indexOf('fourDate=');
indexStartFourForThree -= 1;
//////////"VARIABLE QUE CONTIENE LA DESCRIPCION DE LA PELICULA"////////////
//////////////////////////////////////////////////////////////////////////
let descriptionDetails = stringOverview.slice(indexStartThree, indexStartFourForThree);

let indexStartFour = stringDate.indexOf('fourDate=');
indexStartFour += 9;
//////////"VARIABLE QUE CONTIENE LA FECHA DE LA PELICULA"////////////
////////////////////////////////////////////////////////////////////
let dateFormat = stringDate.slice(indexStartFour);



const singleViewTitleDiv = document.getElementById("movieNameSingleView");
const singleViewImageDiv = document.getElementById("imageSingleView");
const singleViewDescriptionDiv = document.getElementById("detailsSingleView");



const titleElement = document.createElement('h2');
const imageElement = document.createElement('img');
const overviewElement = document.createElement('p');
const dateElement = document.createElement('p');
const breakElement = document.createElement('br');



titleElement.innerHTML = "MOVIE: " + titleName;
titleElement.setAttribute('style', 'color: white');

imageElement.src = imageUrl;
imageElement.setAttribute('width', 600);

overviewElement.innerHTML = descriptionDetails;
overviewElement.setAttribute('style', 'color: white');

dateElement.innerHTML = "RELEASE DATE: " + dateFormat;
dateElement.setAttribute('style', 'color: white');



singleViewTitleDiv.appendChild(titleElement);
singleViewImageDiv.appendChild(imageElement);
singleViewDescriptionDiv.appendChild(dateElement);
singleViewDescriptionDiv.appendChild(breakElement);
singleViewDescriptionDiv.appendChild(overviewElement);

/*
http://127.0.0.1:3000/singleViewMovie.html?
oneTitle=
    Black%20Adam
&twoImg=
    https://image.tmdb.org/t/p/w1280/pFlaoHTZeyNkG83vxsAJiGzfSsa.jpg
&threeOverview=
    Nearly%205,000%20years%20after%20he%20was%20bestowed%20with%20the%20almighty%20powers%20of%20the%20Egyptian%20gods%E2%80%94and%20imprisoned%20just%20as%20quickly%E2%80%94Black%20Adam%20is%20freed%20from%20his%20earthly%20tomb,%20ready%20to%20unleash%20his%20unique%20form%20of%20justice%20on%20the%20modern%20world.
&fourDate=
    2022-10-19
*/

/////////////////////////////////////////////////////////
//////////"VARIABLES & FUNCIONES PARA REVIEWS"////////////
/////////////////////////////////////////////////////////


const numberReviews = 0;

const showReviews = document.getElementById("pastReviews");

const Form = document.getElementById("newReviewsContent");
const textArea = document.getElementById("reviewBox");

const button = document.querySelector('.button');

button.addEventListener
("click", (e) =>
  {
    e.preventDefault();

    numberReviews++;
    let reviewText = textArea.value;
    let headerText = "Review #" + numberReviews;
    let text = document.createElement('p');
    let header = document.createElement('h5');
    let newDiv = document.createElement('div');

    header.innerHTML = headerText;
    text.innerHTML = reviewText;

    newDiv.appendChild(header);
    newDiv.appendChild(text);
    showReviews.appendChild(newDiv);
  }
)



const divPastReviewSection = document.getElementById("pastReviews");
const newText = document.createElement('p');


newReview.addEventListener
('submit', e =>
  {
    e.preventDefault();

    const textReview = e.target.elements.content.vale;

    newText.innerHTML = textReview;
    divPastReviewSection.appendChild(newText);
  }
)
Via Active questions tagged javascript - Stack Overflow https://ift.tt/fEQJCwV
Labels:

Comments

Post a Comment

Popular posts from this blog

Prop `className` did not match in next js app

I have written a sample code ( Github Link here ). this is a simple next js app, but giving me error when I refresh the page. This seems to be the common problem and I tried the fix provided in the internet but does not seem to fix my issue. The error is Warning: Prop className did not match. Server: "MuiBox-root MuiBox-root-1" Client: "MuiBox-root MuiBox-root-2". Did changes for _document.js, modified _app.js as mentioned in official website and solutions in stackoverflow. but nothing seems to work. Could someone take a look and help me whats wrong with the code? Via Active questions tagged javascript - Stack Overflow https://ift.tt/2FdjaAW
Post a Comment
Read more

How to show number of registered users in Laravel based on usertype?

i'm trying to display data from the database in the admin dashboard i used this: <?php use Illuminate\Support\Facades\DB; $users = DB::table('users')->count(); echo $users; ?> and i have successfully get the correct data from the database but what if i want to display a specific data for example in this user table there is "usertype" that specify if the user is normal user or admin i want to user the same code above but to display a specific usertype i tried this: <?php use Illuminate\Support\Facades\DB; $users = DB::table('users')->count()->WHERE usertype =admin; echo $users; ?> but it didn't work, what am i doing wrong? source https://stackoverflow.com/questions/68199726/how-to-show-number-of-registered-users-in-laravel-based-on-usertype
Post a Comment
Read more

Why is my reports service not connecting?

I am trying to pull some data from a Postgres database using Node.js and node-postures but I can't figure out why my service isn't connecting. my routes/index.js file: const express = require('express'); const router = express.Router(); const ordersCountController = require('../controllers/ordersCountController'); const ordersController = require('../controllers/ordersController'); const weeklyReportsController = require('../controllers/weeklyReportsController'); router.get('/orders_count', ordersCountController); router.get('/orders', ordersController); router.get('/weekly_reports', weeklyReportsController); module.exports = router; My controllers/weeklyReportsController.js file: const weeklyReportsService = require('../services/weeklyReportsService'); const weeklyReportsController = async (req, res) => { try { const data = await weeklyReportsService; res.json({data}) console
Post a Comment
Read more