annuhpark / met-seum

Web application for aesthetes that want to browse & archive famous artworks from the Metropolitan Museum of Art.

MET-seum

Front-end application for aesthetes that want to browse & archive famous artworks from the Metropolitan Museum of Art.

Technologies Used

• HTML5
• CSS3
• JavaScript (ES5/ES6)
• Metropolitan Museum of Art Public API using XMLHttpRequest

Live Demo

Try the application live at https://annuhpark.github.io/MET-seum

Features

• User can search for an artwork.
• User can see details of an artwork.
• User can save an artwork to their favorites list.
• User can view favorites list.
• User can view details of an artwork from favorites list by clicking on each image.
• User can remove an artwork from their favorites list.

Stretch Features

• User can create additional archives within their favorites list.

Preview

Getting Started

1. Clone the repository.

   git clone [email protected]:annuhpark/MET-seum.git
   cd MET-seum

2. Install all dependencies with NPM.

   npm install

met-seum's Issues

Feature: User can search for an artwork. #1

⚙️ Feature

What capability will users have when this feature is merged?

User can search for an artwork.

📐 Functionality

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

Users can search for a specific artwork that meets the search criteria.

🖼️ 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.

• Add a div[data-view="search-form"] to the HTML.
• Ensure that the form looks nice on both mobile-sized and desktop-sized screens.
• Make all both dropdown list and search input of the search required.
• Listen for 'submit' event on the search form.
• Verify that artwork is saved to local storage along with the rest of the data model on page reload.
• Make sure clicking 'search' leads to another page with ONE artwork that matches that search result.
• Remove all CSS styling that had no affect or was otherwise unnecessary.
• Test all functionality again in a private browsing session.
• Fix all errors.
• 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.

Feature: User can save an artwork to their favorites list. #3

⚙️ Feature

What capability will users have when this feature is merged?

User can save an artwork to their favorites list.

📐 Functionality

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

User can save a particular artwork into their "favorites" archive.

🖼️ 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.

• Add a div[data-view="favorites"] to the HTML.
• Ensure that the form looks nice on both mobile-sized and desktop-sized screens.
• Have the heart button directly take the user to the favorites page and the 'liked' entry must be there.
• Put the values of the liked artwork into a new object.
• Add the nextEntryId to the object.
• Increment the nextEntryId on the data model.
• Prepend the new object to the entries in the data model.
• Reset the image preview's `src' attribute.
• Reset the form inputs.
• Verify that new entries are saved to local storage along with the rest of the data model on page reload.
• Verify that each new entry receives an incrementing entryId.
• Have the folder icon button at top left take the user to the favorites page.
• 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.

Feature: User can remove an artwork from their favorites list. #5

⚙️ Feature

What capability will users have when this feature is merged?

User can remove an artwork from their favorites list.

📐 Functionality

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

User can take one of the artwork entries from their favorites list and remove it from the list.

🖼️ 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.

• Add a click target (use unlink icon from font awesome) for deleting an entry to the entry form that only appears if the user is editing an entry.
• Show a confirmation modal when the user clicks the Delete Entry click target.
• Hide the modal if the user clicks Cancel.
• Remove the entry from the data model and the entry's DOM tree from the page if the user clicks Delete.
• Show the Favorites list if the user clicks Delete.
• 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.

Feature: User can view their favorites list. #4

⚙️ Feature

What capability will users have when this feature is merged?

User can view their favorites list.

📐 Functionality

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

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 favorites list stays the same after refreshing.
• Make sure folders icon goes to favorites page.
• Click on the image of each favorites entry to get the details of selected artwork.
• 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.

Feature: User can see details of an artwork. #2

⚙️ Feature

What capability will users have when this feature is merged?

User can see details of an artwork.

📐 Functionality

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

After an artwork is returned that fits the user's search criteria, the user can see specific details about that artwork.

🖼️ 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 details of each artwork is showing with each search.
• Make sure that the search results are removed after the user navigates to the main page.

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.