Question
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
Get Instant Access to Expert-Tailored Solutions
See step-by-step solutions with expert insights and AI powered tools for academic success
Step: 2
Step: 3
Ace Your Homework with AI
Get the answers you need in no time with our AI-driven, step-by-step assistance
Get Started