Skip to content

Latest commit

 

History

History
187 lines (139 loc) · 4.38 KB

README.md

File metadata and controls

187 lines (139 loc) · 4.38 KB

🎬 Movie List Manager - My First JavaScript DOM Project

HTML CSS JavaScript

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

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

Screenshot 2024-10-20 022700

🎯 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
  1. Navigate to project directory:
cd movie-list-manager
  1. 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

Movie List Interface
Movie List Interface

💡 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! 🚀