🎬 Movie Guide App

A modern, responsive web application that allows users to search for movies and view detailed information including ratings, cast, plot, and more. Built with vanilla JavaScript and powered by the OMDb API.

🌟 Features

• 🔍 Movie Search: Search for any movie by title
• 📱 Responsive Design: Works perfectly on desktop, tablet, and mobile devices
• 🎭 Detailed Information: View comprehensive movie details including:
  • Movie poster
  • IMDb rating with star icon
  • Release year, runtime, and age rating
  • Genre tags
  • Plot summary
  • Cast information
• ⚡ Real-time Search: Instant results as you search
• 🎨 Modern UI: Beautiful gradient background with smooth animations
• ❌ Error Handling: Graceful error messages for invalid searches or API issues

🚀 Demo

The app loads with a default search for "Wednesday" to showcase its functionality. Simply enter any movie title in the search box and click "Search" to explore!

🛠️ Technologies Used

• HTML5: Semantic markup structure
• CSS3: Modern styling with Flexbox, Grid, and responsive design
• JavaScript (ES6+): Vanilla JavaScript with modern features
• OMDb API: External movie database for fetching movie information
• Google Fonts: Poppins font family for typography

📁 Project Structure

movieguide/
├── index.html          # Main HTML structure
├── style.css           # CSS styles and responsive design
├── index.js            # Main JavaScript functionality
├── key.js              # API key configuration
├── .gitignore          # Git ignore rules
└── README.md           # Project documentation

⚙️ Setup & Installation

Prerequisites

• A modern web browser
• OMDb API key (free from OMDb API)

Installation Steps

1. Clone the repository

   git clone https://github.com/Theesamkos/Movie-Guide-App.git
   cd Movie-Guide-App

2. Get your API key

   • Visit OMDb API
   • Sign up for a free API key
   • Check your email for the API key

3. Configure API key

   • Open key.js
   • Replace the existing key with your API key:

   const key = "YOUR_API_KEY_HERE";

4. Launch the application

   • Open index.html in your web browser
   • Or use a local server for better development experience:

   # Using Python
   python -m http.server 8000
   
   # Using Node.js (with http-server)
   npx http-server

🎯 How It Works

Core Functionality

1. User Input: User enters a movie title in the search input field
2. API Request: JavaScript makes a fetch request to OMDb API with the movie title
3. Data Processing: The app processes the JSON response from the API
4. Dynamic Rendering: Movie information is dynamically displayed using template literals
5. Error Handling: Appropriate error messages are shown for invalid searches or API issues

Code Flow

// Main search function
let getMovie = () => {
    let movieName = movieNameRef.value;
    let url = `https://www.omdbapi.com/?t=${movieName}&apikey=${key}`;
    
    // Fetch movie data and display results
    fetch(url)
        .then(response => response.json())
        .then(data => {
            // Display movie information or error message
        })
        .catch(() => {
            // Handle network errors
        });
};

API Integration

The app uses the OMDb API to fetch movie data:

• Endpoint: https://www.omdbapi.com/
• Parameters:
  • t: Movie title
  • apikey: Your API key
• Response: JSON object with movie details

🎨 Styling Features

• Gradient Background: Eye-catching dual-tone gradient
• Centered Layout: Perfect centering with CSS transforms
• Card Design: Modern card-based layout with shadows
• Responsive Grid: CSS Grid for movie information layout
• Interactive Elements: Hover effects and focus states
• Mobile-First: Responsive design that works on all devices

🔧 Customization

Changing Colors

Edit the CSS variables in style.css:

:root {
    --primary-color: #ffb92a;
    --secondary-color: #1e293b;
    --background-dark: #1c1917;
}

Adding Features

• Watchlist: Add local storage to save favorite movies
• Advanced Search: Include year, type, or plot search options
• Movie Trailers: Integrate YouTube API for trailers
• Reviews: Add user rating system

📱 Browser Support

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

🤝 Contributing

1. Fork the repository
2. Create a feature branch (git checkout -b feature/AmazingFeature)
3. Commit your changes (git commit -m 'Add some AmazingFeature')
4. Push to the branch (git push origin feature/AmazingFeature)
5. Open a Pull Request

📝 License

This project is open source and available under the MIT License.

🙏 Acknowledgments

• OMDb API for providing movie data
• Google Fonts for the Poppins font family
• Inspiration from modern web design trends

📞 Contact

Developer: Theesamkos
Repository: Movie-Guide-App

---

⭐ If you found this project helpful, please give it a star on GitHub!