Building a Movie Tracking App using HTML, CSS, and JavaScript

After successfully completing my software engineering bootcamp, I decided to revisit the fundamentals of JavaScript. During my review, I rediscovered a web application I co-created with a classmate — MovieVerse. MovieVerse is a user-friendly platform that enables users to seamlessly explore a vast collection of movie posters, featuring a quick-view feature to display movie information, allowing users to decide whether to add them to their watchlist.

Creating this project allowed me to demonstrate my knowledge of JavaScript, and in this post, I will revisit the process of bringing MovieVerse to life, showcasing how I utilized HTML, CSS, and JavaScript.

Overview

MovieVerse is a single-page application composed of three main sections:

• A watchlist panel for adding and removing movies.
• A gallery of movie posters.
• A movie card displaying details about a selected movie.

When a user clicks on a poster, the movie card pops up, providing information such as the title, release date, description, and runtime. Users are also given the option to mark movies as “watched” or “liked.”

HTML to Create a Foundational Structure

The HTML provides the overall structure and content containers of the app. There are three key sections defined in index.html:

<section class="watchlist-container"></section>
<section class="movie-posters"></section>
<section class="movie-card"></section>

Each section uses semantic HTML5 elements and is positioned in a grid layout using CSS Grid.

CSS for Styling

index.css applies styling to create the visual appearances including:

• Background gradients and glow effects were strategically employed to captivate the user’s attention.
• The utilization of Flexbox and Grid for layout played a crucial role in effectively organizing content.
• Custom properties for colors and spacing were implemented to ensure a comfortable browsing experience on the page.

Additionally, transitions and hover effects were integrated to enhance interactivity, providing users with a more engaging and dynamic experience:

.title {
  /* Glowing text effect */
  text-shadow: 0 0 10px #fff, 0 0 20px rgba(131, 58, 180, 1);
}
.movie-posters {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
}
.watchbutton {
  transition: ease-in-out 0.3s;
}
.btn-two::after {
  transition: all 0.5s;
}

This promotes an engaging and responsive UI without frivolous JavaScript code.

Coding with JavaScript to Develop Functionality

The core of the application lies in its handling of interactivity and data logic. Event listeners were strategically implemented to respond to various user actions such as clicks, hovers, and double clicks.

To provide a clear distinction when removing an item from the watchlist, I opted for a double-click event, ensuring a deliberate action is taken. This deliberate choice enhances user experience and prevents accidental removals.

As demonstrated below, the click event serves a dual purpose. It is employed to toggle movie details and facilitate the addition of movies to the watchlist. This careful orchestration of event listeners ensures a seamless and intuitive user interaction.

poster.addEventListener('click', () => {
  // Show movie card
});

title.addEventListener('dblclick', () => {
  // Remove from watchlist
});

Fetching data from a local JSON server and utilizing the retrieved data to populate the page with the corresponding information.

fetch('/api/movies')
  .then(res => res.json())
  .then(movies => {
    
      movies.forEach(movie => {
      
        // Create poster  
        const poster = document.createElement('img');
        poster.src = movie.poster;
        // Add to gallery
        gallery.appendChild(poster);
      });
    });

Utilizing DOM manipulation, I dynamically update UI elements with the fetched data.

function createMovieCard(film) {

  movieCard.innerHTML = '';

  title.textContent = film.title;
  
  movieCard.append(title, description, buttons);
}

Data updates were facilitated through the use of PATCH requests. These requests were employed to modify a movie’s status, toggling a boolean statement to reflect attributes such as “watched” and “liked”.

// Add movie
fetch('/api/watchlist', {
  method: 'POST',
  body: {movieId: id}
});

// Remove movie 
fetch(`/api/watchlist/${id}`, {
  method: 'DELETE'
});

Result: A Working Movie Watchlist App

By leveraging HTML, CSS, and JavaScript, I was able to build an interactive movie tracker application with core functionality, including:

• Dynamic retrieval and rendering of movie data
• Real-time UI updates based on user interactions
• Seamless management of persistent watchlist data

The resulting web app is not only responsive but also delivers an immersive movie browsing experience, all while maintaining a streamlined and lightweight codebase. This knowledge base proved invaluable in my subsequent frontend development endeavors with React. Furthermore, this adaptable user interface can be repurposed for tasks such as adding items to a restaurant menu cart.

The full code for this project is available on GitHub. Let me know if you have any other questions!