Answered step by step
Verified Expert Solution
Link Copied!

Question

1 Approved Answer

I need help correcting the main.js file. I included the requirements. Other completed files below. Functional requirements: Write a JavaScript application that allows the user

I need help correcting the main.js file. I included the requirements. Other completed files below.

Functional requirements:

Write a JavaScript application that allows the user to enter one movie title along with a rating.

The rating should be an integer from 1 to 5, with 5 being a good movie and 1 a bad movie.

After the user enters the text for these 2 fields, they should click a button labeled Add Movie.

(In the click method, the two text fields should be cleared so the user can add another movie.)

When the user clicks that button,

if the title field is empty, or if the rating is not an integer between 1 and 5, a pop up (alert) should warn them that the data was not correct and no movie data should be saved for that movie.

Otherwise, if the movie information is valid, a new movie object should be created, and stored in an array. Use a Constructor Function to create the movie object.

A second button on the screen, labeled show movies should result in all the movie titles, with their rating, being displayed in a list.

Implementation requirements:

In a separate JS file, movie.js, define a constructor function, Movie, which is used to define an object to hold the movie information. The resulting objects should:

  • Have a property to hold the movie title (this is set when the constructor is called)
  • Have a property to hold the rating (this is set when the constructor is called)
  • Have a method to validate if the two fields are valid. (the title field is not empty, and the rating is an integer between 1 and 5). It returns true or false, it does not use an Alert.
  • Have a .toString() method that returns this objects title and rating as a single string

In a separate JS file, main.js, write the code to handle the 2 button click events.

  • One event creates a new object, calls that objects validate function, and if that returns true, it adds that movie object to the array. (Using push to add the movie to the array is an easy way, you dont have to keep track of array pointers.) If validate returns false, the object is not added to the array, and the code shows a pop-up telling the user the data was not good. (JS has automatic garbage collection, no need to try and delete this bad object.)
  • The other button event cycles through each object in the array, and using each objects .ToString() method, it lists all the movies out to the HTML page. (You can use simple string concatenation, or a
      that you add
    • to, or a table, .. whatever you like.

    When all this works, go back through this document carefully and mark off each required item to make sure you have implemented all the functionality mentioned anywhere in this doc. Zip your 4 files (you need a CSS file) and 1 partner should submit. (Notice you do not have to put your code in GitHub this week, but you can if you like.)

    index.html

    HTML 5 Web Storage
    INPUT



    Title:

    Rating (1-5):


    OUTPUT



    main.js

    window.addEventListener("load", init);
    function init(){
    if(typeof(Storage)!=="undefined"){
    display();
    var button=document.getElementById("saveMovie");
    button.addEventListener("click",saveInfo);
    }
    else{
    }
    }
    function saveInfo(){
    var movieName=document.getElementById("title").value;
    var movieRating=document.getElementById("rating").value;
    localStorage.setItem("movieName",movieName);
    localStorage.setItem("userRating", movieRating);
    display();
    }
    function display(){
    var rightBox=document.getElementById("useroutput");
    var theMovie=localStorage.getItem("movieName");
    var theRating = localStorage.getItem("userRating");
    if (theRating==undefined){
    rightBox.innerHTML = "";
    }
    else {
    rightBox.innerHTML = "OUTPUT

    " + theMovie + " " + theRating;
    }

    movie.js

    class Movie {
    constructor(title, rating) {
    this.movieTitle = title;
    this.movieRating = rating;
    }
    toString() {
    return `${this.movieTitle} ${this.movieRating}`;
    }
    }
    function MovieValidate(){
    let myMovie = new Movie();
    myMovie.movieTitle = document.getElementById("title").value;
    myMovie.movieRating = document.getElementById("rating").value;
    if(myMovie.movieTitle = ""){
    return false;
    }
    else if(myMovie.movieRating < 1 || myMovie.movieRating > 5 || myMovie.movieRating == ""){
    return false;
    }
    else{
    return true;
    }
    }

Step by Step Solution

There are 3 Steps involved in it

Step: 1

blur-text-image

Get Instant Access to Expert-Tailored Solutions

See step-by-step solutions with expert insights and AI powered tools for academic success

Step: 2

blur-text-image_2

Step: 3

blur-text-image_3

Ace Your Homework with AI

Get the answers you need in no time with our AI-driven, step-by-step assistance

Get Started

Recommended Textbook for

Objects And Databases International Symposium Sophia Antipolis France June 13 2000 Revised Papers Lncs 1944

Authors: Klaus R. Dittrich ,Giovanna Guerrini ,Isabella Merlo ,Marta Oliva ,M. Elena Rodriguez

2001st Edition

3540416641, 978-3540416647

More Books

Students also viewed these Databases questions