/ALFT-M6L2-End-of-Program-Project-Starter-Code

Primary LanguageHTML

Capstone Project: AMC's Ticket App

Oh no! AMC's app developer QUIT! Their app needs updating ASAP.

Can you help them to update their app?

Project Requirements

Task 1: Movie Poster Image

  • Add at least 3 movie posters to the HTML (find readily available image choices linked below)

Task 2: Movie Poster Resize

  • Once you have the movie poster images in your HTML, use CSS to make the posters the same size and use flexbox to align them horizonatally across the page. Make sure each move poster has a unique border.

Task 3: Movie Reviews

  • Create an array of movie reviews for each movie.
  • Create a new function, let's call it displayMovieReviews.
  • Inside the displayMovieReviews function:
    • Select the movieReviews div element using document.querySelector('.movieReviews').
    • Clear the content of the movieReviews div by setting its innerHTML to an empty string.
    • Use a for loop to iterate over the movie reviews array.
      • For each review in the array:
      • Create a new

        element using document.createElement('p').

      • Set the textContent of the

        element to the review text.

      • Append the

        element to the movieReviews div using the appendChild method.

    • Add a click event listener to each movie image. Inside the event listener function:
    • Find the index of the clicked movie in the array of movies.
    • Call the displayMovieReviews function, passing the movie reviews array for the clicked movie as an argument.

Task 4: Cost Calculation

  • When the user clicks on the "Calculate Total" button, calculate the total cost based on the number of tickets entered into the input fields:
  • Create a variable named child and set it equal to the number a user types into the input field with the class numberChild multiplied by the price of a child ticket ($8)
  • Create a variable named adult and set it equal to the number a user types into the input field with the class numberAdult multiplied by the price of a child ticket ($12) *Create a variable named total and set it equal to the variable adult + the variable child

Task 5: Checkout

Use conditionals to display different messages depending on total cost in the div with the class totalCost:

  • If total is less than 0 display, "You cannot select a negative number"
  • If total is equal to 0 display, "You did not select any tickets"
  • If total is more than 0 display, "Your total cost is" + the cost

Bonus

Add other features that display knowlege beyond those taught in class. Max bonus is 3 additional points.

Task 1 Movie poster image options:

Thank you for your help. If you are successful, you will be paid $1,000,000. Please expect payment to be delayed and to arrive on 5/15/2121.