trbachmann / tb-foto-finder Goto Github PK
View Code? Open in Web Editor NEWApplication to save photos to an album
Application to save photos to an album
Functional Expectations
Comp Recreation
HTML - Style and Implementation
CSS - Style and Implementation
JAVASCRIPT - Style and Implementation
Your entire application will consist of one HTML page or template. You will have two javascript files:
A photo.js file that contains a Photo class.
Photo methods must include, but are not limited to:
constructor
saveToStorage
deleteFromStorage
updatePhoto
A main.js file that contains all dom related javascript.
Data Model
An photo has an id, title, caption, file, and a favorite property.
The id should be a unique identifier.
title and caption are strings.
file is a URL string.
Use this method in order to convert a blob object into a URL.
favorite will be a boolean.
Each photo should be created as an instance of the Photo class.
Important Note:
For this project, you will need to open your application using a server. You’ll learn more about servers next mod, but for the purposes of this project, instead of doing open index.html, you will need to run python -m SimpleHTTPServer in your project directory. Then go to localhost:8000 and you should see your app there!
This phase is all about setting up the user inputs and general structure of the page. The page will not be very interactive in this phase.
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.
Bonus: If the user clicks on the image, the user should be able to update the photo using the updatePhoto method.
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
Let’s improve the user experience in this phase.
Filtering and Searching by Text
We want the user to be able to search through all of their photos easily.
Recent Photos
The application should only show the ten most recent Photos on page load.
Viewing Favorites
Finally, let’s let our user be able to view only their favorites.
Extensions
Work through these in order:
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.