kaohman / foto-finder

Basic JavaScript project to showcase understanding of vanilla JS fundamentals, DOM manipulation, and Object-Oriented Programming.

Foto Finder

Assignment

Mod 1 - Foto Finder

Summary

This was a one week independent project to wrap-up Mod 1. The functionality allows users to:

• Create photo cards with titles and captions;
• View, delete, and edit these cards;
• Favorite cards and view favorites;
• Filter and search by text; and
• Show more or show less content.

Built With

• HTML
• CSS
• Javascript

Contributors

Karin Ohman

Final Site Comp

foto-finder's Issues

Phase One: Building out the UI

• One input field at the top in order to search through photos
• Two input fields for the title and caption of the photo
• One input field to upload the photo
• One “Add to Album” button for adding the photo to the album so you see it on the page
• One View Favorites button to view all of your favorite photos.
• A section for all of the photos in the album to live

Extensions

• When the user clicks on the image, the user should be able to update the photo using the updatePhoto method.
• Include at least 3 different animations. Example: one for when a card gets created/deleted.

Recent photos

• The application should contain a button labeled Show more....
• When a user clicks on the Show more... button, the list should load all of the remaining photos.
• Once the remaining photos are loaded, the Show more... button should switch to a Show less... button.
• When a user clicks on the Show less... button, the list should switch back to being the first 10 photos only. This functionality should toggle back and forth based on that button click. Do not need to persist changes in between sessions.

Phase Three

• If the user does not have text in the Title or Caption input elements, or they have not selected a photo from the photos directory, then the “Add to Album” button should be disabled.
• If there are no photos in the album yet, then there should be an indication to the user to add photos, displayed in the empty photo section.
• The file selector should only allow image file types

Filter and search by text

• At the top of the page, include a text field labeled “Search”.
• As a user types in the search box, the list of photos should filter in real time to only display photos whose title or caption include the user’s text. The page should not reload.
• Clearing the search box should restore all the photos to the list. Do not need to persist changes in between sessions.

Refactoring

• Refactor HTML and CSS
• All functions are less than 10 lines
• There are no global variables aside from query selectors and an array for your photos
• There are no nested if/else statements
• Application refactors all for loops into the proper array prototype iteration method
• Uses logical operators instead of if/else statements where applicable
• Uses arrow functions, block scoped variables, and destructuring correctly.
• Application stores all photos in one array in local storage, instead of individually
• When ‘Filtering and Searching by Text’ and ‘Viewing Phtos’, photos that do not need to be shown on the dom should be completely removed from the dom, instead of only being hidden from view

Phase Two: Implementing the functionality

• When a user fills in the Title, Caption, selects an image file, and then clicks the “Add to Album” button, the photo should be added to the photo album.
• Each photo, when added to the album, is placed in a “card”, and each photo card should display:
• The photo
• The title of the photo
• The caption of the photo
• A button to mark the photo as a “Favorite” (counter on “View Favorites” button should reflect how many photos have been favorited)
• A button to “Remove” the photo from the album
• Each photo card should persist (in localStorage) and should be present upon reloading the page. The photo should be added to localStorage using the saveToStorage method defined in the Photo class.
• When a user clicks the title or caption of a photo in the list, that text should become an editable text field, pre-populated with the existing photo title or caption.
• The user should be able to “commit” their changes by pressing “Enter/Return” or by clicking outside of the text field.
• This change should be saved in localStorage using the updatePhoto method defined in the Photo class.
• When the user clicks on the “Favorite” button, the button should stay in the active (pink) state. This favorited state should also persist after a page refresh using the updatePhoto method defined in the Photo class.
• When the user clicks on the “Trash” button, the photo should be removed from the page. The photo should be removed from localStorage using the deleteFromStorage method defined in the Photo class.
• The application should be responsive and work equally well on desktop and mobile

Favorites

• The user should only see their favorites when they click on the View Favorites button. (consequently, the text on the button should then say View All Photos)
• Clicking on the View All Photos button, the user should be able to see all of their photo cards.
• When viewing favorites, search field should only search through the favorited photos. Do not need to persist changes in between sessions.