sarah-you / mywatchlist

A web application designed for anime enthusiasts to explore the latest top 25 anime shows.

myWatchList

a web/mobile application for anime-lovers who want to learn more about the current top 25 anime shows.

AJAX-project

A dynamic HTML, CSS, and JavaScript project using REST API.

I am an avid binge-watcher of all kinds of shows. However, I understand the struggle of sifting through endless recommendations and feeling overwhelmed. Information overload is real. I spend a good amount of time browsing the app to find the best one and eventually get drained and overwhelmed from the decision making. In order to minimize this issue, I created a simple web/mobile-friendly application for anime lovers who want to see the current top 25 most popular anime and get more information about them. You can discover your new favorite anime in just a few clicks!

Tech Stack

Jikan API

App Overview

myWatchList Wireframe (Figma)

web view

mobile view

🚧 This project is currently a work in progress 🚧

Features available at the moment:

• User can view the top 25 shows
• User can click on each listing and see more detailed information about each show
• the top 25 shows continues to update as the REST APIs data updates
• User can add a show to myList

Features currently WIP:

• User can remove a show from myList

mywatchlist's Issues

Issue 2: User can add a show to their watchlist

⚙️ Feature

User can add a show to their own watchlist

📐 Functionality

When user is browsing through the list of shows, user can click on each of the show listings and click the 'add' button to add that show to 'My List'

🖼️ Wireframe

✅ Task List

• Set webpage display to mobile view size

• HTML: add div wrapping main-page with
  <div data-view="main-page-list" id="main-page-list">

• HTML: add a div below the main anime-list page
  <div data-view="my-list" id="my-list" class="hidden">

• JS: inrenderList function, $modalAddBtn, add setAttribute('type', 'submit')

• JS: query select each view using getElementById for main-page and my-list

• JS: viewswap function for each of the pages
  

• Create data.js file
  

• JS: 'click' event listener for the '+Add' button on the modal of each listing and in the code block, add viewswap(my-list) -- refer to image above for code

• JS: save the selected list item to local storage
  

• JS: render the selected show's <li> to the 'my-list' page with the same modal functions (copy $ol event listener openModal function)

• JS: On my-list page's modals, $modalAddBtn.setAttribute('class', 'hide-add modal-btn');

• CSS: rule set for .hide { display: none;}

• the page should look pretty much the same as the list page, except only selected list items

• when list item is clicked, the same modal should pop up as the ones in the listings

• CSS: media queries to make it responsive for desktop

• confirm that the design for both mobile and desktops match the one on live reloader

Clean Up

• Remove all console logs.
• Remove all commented out code.
• Remove all CSS properties that have no effect.
• Check all code for proper formatting and indentation.
• Confirm that there are no errors in the console while using the application.
• Confirm that all previous functionality still works without errors.
• Confirm that the user interface looks natural on both mobile and desktop screens.
• Create GIFs of the feature being used on both mobile and desktop screen sizes for inclusion in Pull Request.

Issue 1: User can view top 25 animes

⚙️ Feature

• User can view Top 25 animes of 2023
• User can view detailed information on each anime listing
• User can watch YouTube trailer clips of the anime
• User can access shortcut links to go watch the show

📐 Functionality

User can scroll through a selection of shows and click on ones that interest them and read more about them

🖼️ Wireframes

Wireframe screenshot(s) of what the app should look like when it is complete.

✅ Task List

Commit checklist for tasks needed to complete the feature.

HTML

• h2 MyWatchList
• h3 Top 25 Anime List 2023
• Div Container for page (1 row, 1 col-full) > each list item (25 rows)> wrap each line of text content

JS

• Create DOM tree for all data being pulled in from API & assign them accordingly
• Add 'click' Event Listener for each List (See More )
• Modal (class="hidden"), Modal Div
• DOM inside Modal = title, rating, scored by, genre, eps, duration, synopsis, trailer, watch now
• Add 'click' Event Listener for 'close' button inside the modal
• If user clicks close button, modal = hidden; should be displaying anime list

CSS

• headings -- font-family: righteous (Google Fonts)
• paragraph/text -- font-family: Montserrat (Google Fonts)
• Logo #FB4D3D & Header (background: #FFFFFF)
• Background #F0F0F0
• modal -- hidden { display: none }
• media queries rule set for desktop

CLEAN UP

• Remove all console logs.
• Remove all CSS properties that have no effect.
• Check all code for proper formatting and indentation.
• Confirm that there are no errors in the console while using the application.
• Confirm that all previous functionality still works without errors.
• Confirm that the user interface looks natural on both mobile and desktop screens.
• Create GIFs of the feature being used on both mobile and desktop screen sizes for inclusion in Pull Request.

Issue 5: User can remove a show from their watchlist

⚙️ Feature

What capability will users have when this feature is merged?

📐 Functionality

A description of how the application will work from the perspective of the user.

🖼️ Wireframes

Wireframe screenshot(s) of what the app should look like when it is complete.

✅ Task List

Commit checklist for tasks needed to complete the feature.

• ...
• ...
• Make sure that click targets are either <a> or <button> elements.
• Make sure that all click targets show a cursor: pointer when hovered with the mouse.
• Clean Up
  • Remove all buttons and placeholders that do not serve the functionality of the feature.
  • Remove all console logs.
  • Remove all commented out code.
  • Remove all CSS properties that have no effect.
  • Check all code for proper formatting and indentation.
  • Confirm that there are no errors in the console while using the application.
  • Confirm that all previous functionality still works without errors.
  • Confirm that the user interface looks natural on both mobile and desktop screens.
  • Create GIFs of the feature being used on both mobile and desktop screen sizes for inclusion in Pull Request.

Issue 4: User can remove their own comments about the show on their watchlist

⚙️ Feature

What capability will users have when this feature is merged?

📐 Functionality

A description of how the application will work from the perspective of the user.

🖼️ Wireframes

Wireframe screenshot(s) of what the app should look like when it is complete.

✅ Task List

Commit checklist for tasks needed to complete the feature.

• ...
• ...
• Make sure that click targets are either <a> or <button> elements.
• Make sure that all click targets show a cursor: pointer when hovered with the mouse.
• Clean Up
  • Remove all buttons and placeholders that do not serve the functionality of the feature.
  • Remove all console logs.
  • Remove all commented out code.
  • Remove all CSS properties that have no effect.
  • Check all code for proper formatting and indentation.
  • Confirm that there are no errors in the console while using the application.
  • Confirm that all previous functionality still works without errors.
  • Confirm that the user interface looks natural on both mobile and desktop screens.
  • Create GIFs of the feature being used on both mobile and desktop screen sizes for inclusion in Pull Request.

Issue 3: User can add their own comments about the show on their watchlist

⚙️ Feature

User can add their own comments or notes about each of the show on their My List

📐 Functionality

After the user has added a show to their My List, they will be taken to their My List. Inside the My List page, there will be a textarea where user can input commentaries and save it for each show.

🖼️ Wireframes

✅ Task List

Commit checklist for tasks needed to complete the feature.

• set the live reloader screen to mobile display
• within the list wrap div (so appendchild to $listWrap), create a div for comment section
• within the comment div, create heading, textarea, and button (SAVE)
• placeholder text for textarea: delete comment by removing all text and clicking SAVE.
  to edit, click the comment box section and make your changes! Make sure to hit SAVE
• for textarea and button formatting, refer to (http://jsfiddle.net/GwheP/)
• to save the comments, create a new property in data.js file inside data obj {comments: [];)}
• check that the local storage updates with the new array added
• create a 'click'event listenerfor SAVE button so that once user clicks save, local storage stores the user input in the textarea (as is)
  
• create a 'click'event listenerfor textarea box:
• the logic should work so that user can click the textarea at any given time and see their comment and update it (editing or removing all text) and hit save and the local storage updates to the newest comment
• on layout.css file, set media query rule so that on mobile, comment section is below the show and desktop, comment section is right side of the list

Clean Up

• Confirm that comment works by saving and removing content and saving again
• Remove all console logs.
• Remove all CSS properties that have no effect.
• Check all code for proper formatting and indentation.
• Confirm that there are no errors in the console while using the application.
• Confirm that all previous functionality still works without errors.
• Confirm that the user interface looks natural on both mobile and desktop screens.
• Create GIFs of the feature being used on both mobile and desktop screen sizes for inclusion in Pull Request.