lemonpocky / ghibli-app Goto Github PK

We need an HTML/CSS mockup that represents the real web page with static elements filled in, so that it's easier to visualize how to dynamically generate elements via JavaScript.

Acceptance Criteria: A webpage that represents the real app when a movie title is expanded, but is generated completely through HTML/CSS elements.

• style header/navbar
• style body/container elements

Create button handlers for various site functions in JavaScript:

• Get movie details
• Add to favorites
• Add to Watched list
• Sort list
• Search list

The complete functionality can't be implemented until the HTML code is finished, but having an idea of where things will go will speed up development in the future.

Acceptance Criteria: These button handlers are added to the JavaScript and can be called in a basic test webpage.

Use Google Slides to create a slideshow for our presentation. Use this template as a guide: https://docs.google.com/presentation/d/10QaO9KH8HtUXj__81ve0SZcpO5DbMbqqQr4iPpbwKks

Create a clean, concise README that clearly explains what the site is about and how to use it. The README should be in .md and use Markdown elements for readability.

Take a look at this article for some tips on how write a good README: https://bulldogjob.com/news/449-how-to-write-a-good-readme-for-your-github-project

Use fetch() to call the APIs from https://ghibliapi.herokuapp.com/ and https://www.omdbapi.com/ , so that the data can be parsed for the exact information we want.

Acceptance Criteria: The list of Ghibli movies from ghibliapi and their information from OMDB are displayed to the console in the browser.

• study how to use desired APIs

• link APIs

• construct call functions for APIs
  - [ ] Call the Studio Ghibli API for the list of movies

• extract pertinent data from those calls

• store preferences to localstorage
  - [ ] Favourites
  - [ ] Already Watched
  - [ ] Planning to Watch
  - [ ] Sorted preferences
  - [ ] (idea) Drag-and-drop sorting?

• write functions to dynamically populate containers in the HTML

• write search function

We need an HTML/CSS mockup that represents the real web page with static elements filled in, so that it's easier to visualize how to dynamically generate elements via JavaScript.

Acceptance Criteria: A webpage that represents the real app homepage, but is generated completely through HTML/CSS elements.

• add containers for elements
• build header/navbar
• link jss, style, etc.