- Make the site
- Two input fields
- One for the title of the bookmark
- One for the URL that the bookmark should link to
- One button for creating the bookmark and adding it to the page
- A section for all of the created bookmarks; each bookmark should display:
- The title of the bookmark
- The URL of the bookmark (this should be clickable and link to the URL)
- A button to “Mark as Read”
- A button to “Remove” the bookmark
As a paired project, we did the entire first part together. This helped immensely with the workflow of the rest of the project. We knew and understood the naming conventions that were in place in the html and css, which made writing the JS easier due to not needing to search for what a certain element's class was.
- Basic Functionality
- The user should be able to input a title and URL into the appropriate fields
- When the user clicks on the button for creating the bookmark, it should be added to the bookmarks section
- When the user clicks on the “Mark as Read” button:
- A class of .read should be added to the bookmark
- If it already has the class of .read, it should be removed
- When the user clicks on the “Remove” button, the link should be removed from the page
- Additional Functionality
- If the user omits the title or the URL, the application should not create the link and should instead display an error.
- The application should be responsive and work equally well on desktop and mobile.
- The button for creating links should be disabled if there are no contents in the title or URL fields.
- The application should be able to keep count of the total number of links currently on the page.
- The application should be able to keep count of the total number of read and unread links currently on the page.
- Above and Beyond
- Add a “Clear Read Bookmarks” button which clears all the read bookmarks when clicked.
- The user should not to be able to add a URL that isn’t valid.
