Giter Site home page Giter Site logo

kebin20 / movie-watchlist Goto Github PK

View Code? Open in Web Editor NEW
0.0 1.0 0.0 55 KB

You can search your favourite movies and add them to your personal watchlist. Data is provided by the OMDb API and the data stored is in localStorage

Home Page: https://kebin20.github.io/movie-watchlist/

HTML 23.44% CSS 41.35% TypeScript 35.21%

movie-watchlist's Introduction

movie-watchlist

You can search your favourite movies and add them to your personal watchlist. Movie data is provided by the OMDb API and the data stored will be in localStorage

This app is a very good practice of displaying relevant info onto the HTML webpage using an API and the async/await function, coupled with try and catch.

Challenges:

  • Struggled with displaying multiple movies after clicking search for the specified movie. Was able to display just one only before. However, I realised that I needed to somehow loop over the multiple imdbIDs into the fetch function to obtain the specific data needed for each of the movies.

Interesting thing to note is that you can't use a forEach or map for async.

  • 24/10 New challenge faced: Difficulty in accessing the data/value solved by a promise otuside the scope. This data is needed so that I can push the selected movie into a global array after clicking the watchlist button. Will need to figure out how to solve this. SOLVED: Set a global variable and pushed the data array into it from getMoviesHtml function in the movie object.

Continued Development:

- To enable users to store the selected movie into their personal watchlist using localStorage. The CSS and HTML setup will need to be done for the watchlist.html along with populating the js code.

- Make the remove button work in order to remove the movie items from the DOM and from the Array.

Future Implementation:

- Implemented Typescript

  • Make it so that when you press the add button, a tick + added element will appear

  • Make a light/dark mode toggle

  • Add a loading screen

  • Recreate this using React and specifically only for games

movie-watchlist's People

Contributors

kebin20 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.