/third-project-notes

Primary LanguageTypeScript

Notes app - OOP - TypeScript and LocalStorage

Check out the latest version here!

Tools

  • Vite
  • Fuse.js
  • Typescript
  • Bootstrap

User Stories

  • I can make a new note
  • I can delete individual notes
  • The contents persist even after reloading or closing the page
  • There is a max size for note titles and bodies
  • I can delete all notes, but need to confirm before it will happen
  • I can search notes by title and body contents
  • I can sort notes by title (ABC), date (creation or target), and color
  • The app fits well and looks good on any screen size ~

Under consideration

  • dev: separate listener functions from component files, component files should just handle markup and styling
  • change note storage to store each note individually?
  • sort: have option to choose which color will be first when sorting by color?
  • UI: allow editing note elements by double clicking on them in fullNote?

Bonus features?

  • x Hebrew/English UI toggle
  • x dark/light theme

Not planning to implement

  • BUG: target input date is displayed as mm/dd/yyyy on firefox on android and linux, displays appropriately on macos
  • UX/BUG: make sure all elements have the same visual indication of tab focus
  • UX: if new note form is closed while partially finished, save details
  • UX: save details of last deleted note so it can be recovered
  • standardize how styles are applied to elements, not just css/bootstrap classes, but - for example - how bootstrap classes are used to change border color on notes vs. the settings window
  • standardize tabIndex behavior over all elements
  • search: if I've added to the search bar until the results are empty, sometimes adding another character will again return a result (this has to do with Fuze.js' fuzzy search. It can probably sorted with the search options)
  • UI: get the plus icon to be centered in all browsers has proven beyond my limited knowledge and patience for now, I've settled for good enought on the browsers I use most.
  • UX: make sure it works identically in all browsers
  • dates: Check dates work in different locales

Acknowledgements:

fuse.js for fuzzy search

Implemented:

Components

  • Main Page
  • Note
  • Add Note, Form
  • Search Bar
  • Settings
  • sort by select, with arrow toggle to switch between ascending and descending

Data schema

{
title: string, // required
body: string, // required
target-date: date,
creation-date: date // required
color: string, // (5 options), required
id: string // hashed from Date.toString()
}

Tab index manipulation

  • When form is opened, find all elements with tabIndex >= 0
  • then save them to array [{element: element, oldIndex: element.tabIndex}]
  • forEach(element => element.index = -1)
  • when form is closed, forEach(element => element.index = element.oldIndex)

Form behaviour

  • when the newNote button is pressed:

    • if form is closed: open it with a new, empty note
    • if form is open, with a new note: close it
    • if form is open, with an old note being edited: replace with new note

  • when the editNote button is pressed:

    • if form is closed: open it with note details
    • if form is open, and same note's button is pressed: close form
    • if form is open, and a different note's button is pressed: repopulate form with new note details
    • if form is open, and newNote button is pressed: replace note details with new note

  • when clicking any other element outside the form: close it

Date input validation

    • if input date is less than current day + 1, reset to default on loss of focus
    • provide a popup or other message informing user of the requirements

  • if currentYear > inputYear: reset all

  • if currentYear === inputYear && currentMonth > inputMonth: reset all

  • if currentYear === inputYear && currentMonth === inputMonth && currentDay > inputDay: reset all

  • else date is valid

Language options

  • create text object to hold all strings

  • make sure all text still fits

  • add language toggle to settings

  • options: en-us, he

  • check for langPref on startup, if none found: fallback to browser default

  • when a language is chosen, pass the apropriate language object to all elements

  • check search

  • make xbutton responsive to direction change

  • fix full-note-bg position for rtl

  • fix TS errors in l10n.ts

  • fix colors and sortMethods for hebrew. langPrefStored called before initialization?

  • fix sort in hebrew. just not working

  • implement language toggle

  • save language preference on page close?

  • language toggle should always point in the direction of the current language

  • add function to reset all text content

  • language toggle background-color and color shouldn't change

  • show required-field-message in hebrew?