Skip to content

rodrigonyam/movie-app

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

1 Commit
 
 
 
 
 
 
 
 

Repository files navigation

Celebrate! Cinema Movie App

A comprehensive web application for Celebrate! Cinema that enables members to:

  • Book tickets for upcoming movies at theater locations statewide and nationwide
  • Rent or buy movies for pickup at locations or streaming online
  • Browse theater locations with amenities
  • Search and filter movies by genre
  • Manage bookings with an intuitive interface

Features

🎬 Movie Booking

  • Browse currently showing movies
  • Search movies by title
  • Filter by genre (Action, Comedy, Drama, Horror, Sci-Fi, Romance)
  • Select theater location (statewide or nationwide)
  • Choose date, time, and number of tickets
  • Multiple ticket types: Adult, Child, Senior, Student
  • Real-time price calculation

🎥 Rent & Buy Movies

  • Extensive library of movies available for rent or purchase
  • Two delivery options:
    • Stream Online: Instant access to watch anywhere
    • Pick Up: Reserve at your nearest theater location
  • Flexible pricing for rental (48-hour access) or permanent purchase

🏢 Theater Locations

  • Multiple locations across Michigan (Statewide)
  • Nationwide expansion in major cities
  • Detailed theater information including:
    • Number of screens
    • Premium amenities (IMAX, Dolby Atmos, 4DX, etc.)
    • Complete addresses
  • Filter theaters by location type

📱 Responsive Design

  • Fully responsive layout for desktop, tablet, and mobile devices
  • Mobile-friendly navigation
  • Optimized touch interactions
  • Adaptive grid layouts

Getting Started

Installation

  1. Clone or download this project
  2. Open the folder in your preferred code editor
  3. Open index.html in a web browser

No build process or dependencies required - this is a pure HTML, CSS, and JavaScript application!

File Structure

movie-app/
│
├── index.html          # Main HTML structure
├── styles.css          # All styling and responsive design
├── script.js           # Application logic and interactivity
└── README.md          # This file

Usage

Booking Tickets

  1. Navigate to the "Now Showing" section
  2. Browse available movies or use search/filter
  3. Click "Book Now" on your chosen movie
  4. Select theater, date, time, and ticket quantity
  5. Confirm your booking

Renting or Buying Movies

  1. Go to the "Rent or Buy" section
  2. Choose between "Stream Online" or "Pick Up" tab
  3. Click "View Options" on any movie
  4. Select either Rent (48-hour access) or Buy (permanent)
  5. Choose delivery method (stream or pickup)
  6. Complete your transaction

Finding Theaters

  1. Click on "Theaters" in the navigation
  2. Use filter buttons to view:
    • All Locations
    • Statewide (Michigan locations)
    • Nationwide (locations across the US)
  3. View detailed information about each theater

Sample Data

The app includes sample data for:

  • 6 Theater Locations: 3 statewide (MI) and 3 nationwide
  • 6 Now Showing Movies: Various genres with ratings
  • 6 Rental/Purchase Movies: Available for both stream and pickup

Customization

Adding More Theaters

Edit the theaters array in script.js:

{
    id: 7,
    name: "Your Theater Name",
    location: "City, State",
    address: "Full Address",
    type: "statewide" or "nationwide",
    screens: 12,
    amenities: ["IMAX", "Reclining Seats"]
}

Adding More Movies

Edit the movies or rentalMovies arrays in script.js:

{
    id: 7,
    title: "Movie Title",
    genre: "action",
    rating: 8.5,
    runtime: "120 min",
    poster: "image-url",
    description: "Movie description"
}

Changing Colors

Edit CSS variables in styles.css:

:root {
    --primary-color: #e50914;  /* Main brand color */
    --secondary-color: #ff6b6b; /* Accent color */
    /* ... more variables */
}

Technologies Used

  • HTML5: Semantic structure
  • CSS3: Modern styling with Grid and Flexbox
  • JavaScript (ES6+): Dynamic functionality
  • Font Awesome: Icons
  • Unsplash: Sample images (placeholder)

Browser Compatibility

  • Chrome (recommended)
  • Firefox
  • Safari
  • Edge
  • Mobile browsers

Future Enhancements

Potential features for future versions:

  • User authentication and account management
  • Payment processing integration
  • Seat selection interface
  • Movie trailers and reviews
  • Email confirmation system
  • Loyalty rewards program
  • Advanced filtering (by rating, release date)
  • Social sharing features

License

This project is for demonstration purposes. Feel free to use and modify for your own projects.

Support

For questions or support, contact Celebrate! Cinema customer service.


Enjoy your movie experience with Celebrate! Cinema! 🍿🎬

About

No description, website, or topics provided.

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published