Movie Watchlist

The requirements:

How does the app work?

The user picks movies from the OMDb (Open Movie Database) API to add movies to a personal watchlist on a separate page of the app.

Process

• Consult Figma design files
• Create draft of README file
• Create .gitignore file and check that meta tag is included
• Create Github repository
• Work on HTML, CSS and JS files
• Check final code and accessibility
• Finalize README file
• Publish live URL

Cool code snippets

.search-btn {
  background-color: transparent;
}

Resources:

Youtube video: Using localStorage in JavaScript

freeCodeCamp article: How Web Storage Works

Medium article: WCAG 2.2 AA Guide, etc. 2023

a11yproject.com checklist

MDN about input type="search"

Kevin Powell: expanding search bar with CSS only

Smashing Magazine: A Complete Guide To Accessible Front-End Components

Medium: Search Box Part 1

Web Dev Simplified: How to create a search bar in JavaScript

Map an object to an array

JavaScript Map

Canva movie posters