Giter Club home page Giter Club logo

movie-watchlist's Introduction

Movie Watchlist

"Movie Watchlist" is a solo project aimed at practicing RESTful API implementation. It is a movie watchlist app built using vanilla JavaScript, HTML, and CSS.

Live Demo

You can view the live demo of the "Movie Watchlist" app here.

Project Overview

The "Movie Watchlist" project is part of Scrimba's Frontend Career Path. It consists of two main pages, index.html and watchlist.html. The index.html page serves as the search page where users can search for movies using the Open Movie Database (OMDB) API with the title they enter, and it displays the search results. The watchlist.html page displays the movies that the user has added to their watchlist, which are saved in the local storage of the browser.

Requirements

The "Movie Watchlist" project has the following requirements:

  1. Two Pages: The project must have two pages - index.html and watchlist.html.

  2. Search Page: The index.html page serves as the search page where users can search for movies using the OMDB API with the title they enter, and it displays the search results.

  3. Add to Watchlist: The index.html page must have a button that allows users to "add to watchlist", which saves the movie data to the local storage of the browser.

  4. Watchlist Page: The watchlist.html page loads and displays the movies that the user has added to their watchlist from the local storage of the browser.

Technologies Used

The "Movie Watchlist" app is built using the following technologies:

  • Vanilla JavaScript: For implementing the logic and functionality of the app.
  • HTML: For structuring the web pages.
  • CSS: For styling and layout.

Features

The "Movie Watchlist" app includes the following features:

  1. Movie Search: Users can search for movies by entering a movie title in the search field and clicking the "Search" button.

  2. Search Results: The app displays search results, including movie title, year, and poster.

  3. Add to Watchlist: Users can add movies from the search results to their watchlist by clicking the "Add to Watch

Skills Acquired & Topics Researched

During the development of the "Movie Watchlist" project, the following skills and topics were acquired and researched:

  1. REST API: Implementation of a RESTful API in JavaScript to fetch movie data from the OMDB API.

  2. Web Storage API: Usage of the Web Storage API in JavaScript to store and retrieve movie data in the local storage of the browser.

movie-watchlist's People

Contributors

hinedy avatar

Stargazers

 avatar  avatar  avatar  avatar

Watchers

 avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.