Skip to content

Latest commit

 

History

History
61 lines (42 loc) · 2.4 KB

README.md

File metadata and controls

61 lines (42 loc) · 2.4 KB

Zen Notes - Your Friendly Note-Taking App

It doesn't get more simple than this. Save any and all thoughts, ideas, and recipes in one app: Zen Notes

🔗Live Link: https://zen-note.netlify.app/ Netlify Status

Features 💫

  1. User can make a note
  2. User can make some text bold / underlined
  3. User can copy all text with the click of a button
  4. User can see the list of notes made by the user
  5. User can create a new note and can switch between notes

Bonus Features

  1. User can clear entire note to edit note
  2. User can update a note with changes in text, bold or underlined
  3. User can select text and copy it
  4. Multiple Color Themes as per user selection using 'Paint Icon'
  5. User can delete a note by clicking on the 'delete' button

App Design and Flow 💫

  • Click on '+' button on home page creates a pop-up for creating a note

  • A pop-up window on creating a note with features as follows:

    • user can add a title and description for the new note
    • app handles errors for blank text and description
    • user can select a text and bold, underline, or copy a section of text in the description using respective buttons
    • user can copy the entire text in the description using the 'Copy All' button
    • user can clear text/description using the 'Clear' button
    • add the entire note using the 'Add Note' button
  • Added notes can be previewed as a list card on the home page. Users can switch between notes here.

  • On click of a particular note card, a pop-up window appears for updating the note card

    • user can select text and use 'copy' to copy the selected text
    • user copies the entire text in the description using the 'Copy All' button
    • user can make changes in the title and description text in an editable window
    • user can make changes in bold, underline after text selection, and update all changes on click on 'Update Note'
    • app handles errors for blank text and description if blank values are updated by user

Technologies Used 🛠️

  1. Vanilla Javascript
  2. HTML
  3. CSS

Connect with the Makers