Second Version - v0.2.0

What's Changed

Bug Fixes

• Removing console.logs 👀
• Replacing Math.random with note.id as key prop.
• Fixing exampleNote's static date and time: Now whenever it's generated, the current date on user's device will be displayed instead of 00:00 - 01/01/23.
• Changing date format to DD/MM/YY.
• Search bar is no longer case sensitive.
• Displaying notes in chronological order (newest first).
• Fixing time's validation so when the hours or the minutes is less than 10 then add a 0 at start.
• Adding some focus styling for keyboard users and accessibility.

New Additions

1. Sorting Filters

• I've added 4 sorting filters which can help the user to sort notes according to their needs. The 4 options are:
  1. Date (Latest to Oldest)
  2. Date (Oldest to Latest)
  3. Alphabetically (A-Z)
  4. Alphabetically (Z-A)

2. Edit a saved note

• Users can now edit a saved note just like they would add a new note.

3. Error Handling for saved notes

• Added try...catch... to ensure user can still access the site even if the browser doesn't support localStorage.

4. Saving new note when Enter key is pressed

• User can now save new note on pressing Enter key. To add an extra space, hold Shift key and press Enter.

5. Focusing automatically on text input

• The focus will be on text input when the page is refreshed or visited for the first time.
• The focus will be sent back to text input when user saves a new note.
• The focus will be on the edit note text input when the edit key is clicked.

6. Saving user's theme preference

• User's theme preference (dark/light) will be saved in localStorage so when they visit the site again it should remain the same.

7. New error message pop

• Instead of showing the error in placeholder of new note, now an error popup will be displayed.

8. Adding text editing options

• Using ReactQuill library, users have some options to make their text a bit fancy e.g. bold, italic..

9. Adding new animations

• Added couple new animations when user creates a new note, deletes it or edit it.

---

Full Changelog: v0.1.0...v0.2.0

Initial Release - v0.1.0

Description

This is the first release of Notes App. This is a simple and easy to use application that allows you to add and remove notes. You can add as many notes as you want and they will be saved on your browser which means you can come back anytime to view them. You can also search for your notes from the search bar at the top and this app has a dark mode switcher too.

Components & Features

• Note

  • User can add notes using add button and delete notes using delete button.
  • User can see what time they've added their notes.
  • User can see the character limit when they are typing a new note.
  • If the user reaches max character limit, the character limit text will turn red.
  • If the user clicks the add button without adding any text in the textbox (leaving it blank) or added just spaces, the note will not be saved and will return and error telling the user to add some text before they submit a new note.
  • Notes are saved on local device/browser unless the user deletes it

• Search bar

  • User can search for a note using the search bar available on the top.

• Dark mode

  • User can switch the theme of this app using the dark mode button available at top right of the app.

Full Changelog: https://github.com/Saimcode/notes-app/commits/v0.1.0