🎬 Movie List Manager - My First JavaScript DOM Project

A beginner-friendly project showcasing DOM manipulation with vanilla JavaScript! 🚀

Features • Setup • Usage • Code Examples • Learning Points • Future Ideas

🎯 Features

• ✨ Add movies to your watchlist instantly
• 🗑️ Remove movies with one click
• 🎨 Clean, responsive interface
• ⚡ No page reloads - everything happens dynamically!

🛠️ Implementation

Tech Stack

• HTML - For structuring the content
• CSS - For styling and animations
• JavaScript - For DOM manipulation and interactivity

Key Components

HTML Structure

<div id="movie-list">
  <ul>
    <!-- Movies get added here dynamically -->
  </ul>
</div>

CSS Styling

.delete {
  float: right;
  background: red;
  padding: 6px;
  border-radius: 4px;
  cursor: pointer;
  color: white;
}

🚀 Setup & Installation

1. Clone the repository:

git clone https://github.com/Suniksha12/movie-list-manager.git

2. Navigate to project directory:

cd movie-list-manager

3. Open index.html in your browser:

# For macOS
open index.html

# For Windows
start index.html

📖 Usage

Adding a Movie

1. Type movie name in input box
2. Click "Add" or press Enter
3. Movie instantly appears in list

Removing a Movie

• Click the red "delete" button next to movie
• Movie is instantly removed

💻 Code Examples

Adding Movies

addForm.addEventListener('submit', function(e) {
    e.preventDefault();  // Stop the form from refreshing
    
    // Get movie name from input
    const value = addForm.querySelector('input[type="text"]').value;
    
    // Create new elements
    const li = document.createElement('li');
    const movieName = document.createElement('span');
    const deleteBtn = document.createElement('span');
    
    // Add the movie
    movieName.textContent = value;
    deleteBtn.textContent = 'delete';
    
    // Put it all together
    li.appendChild(movieName);
    li.appendChild(deleteBtn);
    list.appendChild(li);
});

🎓 Learning Points

DOM Manipulation

• Creating elements dynamically
• Removing elements from page
• Updating content without reloads

Event Handling

• Form submission events
• Click events
• Preventing default behaviors

Code Organization

• Clean code structure
• Readable formatting
• Effective commenting

🌈 Future Ideas

• Local storage persistence
• Movie ratings system
• Sorting functionality
• Movie categories
• Search feature

🎨 Project Screenshots

💡 Key Features

Instant Updates

• Real-time DOM updates
• No database required
• Smooth animations

Clean Design

• User-friendly interface
• Professional animations
• Fully responsive layout

🤝 Contributing

Feel free to use this project as a learning resource! If you have any improvements:

1. Fork the Project
2. Create your 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.

---

Made with ❤️ and lots of JavaScript learning

Happy Coding! 🚀