Skip to content

Front-End-Only note-taking app that uses MVC architecture. Saves the user's notes on their browser so that notes can be revisited and re-edited later on. Uses JSDoc to generate documentation.

JohnGardiner93/Note-Keeper

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

65 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

Note-Keeper: A Note-Taking App

Visit live website here

Table of Contents

Description:

This app was created in order to practice MVC architecture. The result is a fully-functioning note-taking app that allows users to take and save notes to their browser. It is done completely with Vanilla JS, CSS, and HTML. It is entirely front-end. This app uses the user's browser's localStorage to store notes from previous sessions.

Main Screen
Note Edit

Use Cases:

User can enter text into a text area to take a note. The note can then be saved. It will be displayed below the input are alongside other notes. Notes will be shown in a uniform manner. Notes can be seen with more detail (via button or clicking the element). A modal window will then show the note in full detail. Notes can also be deleted.

Feature List:

✅ = Implemented | ⭕ = Not Complete

✅ Input field - text area
✅ New Note Button
✅ Note editing view
✅ Display notes in a fluid main view
✅ Click on note to show in more detail
✅ Delete notes either during editing or in main view
✅ Change the color of notes in edit notes view or in main view using a custom color picker
✅ Notes are saved to localStorage so that users can manage past notes
✅ Allow users to enter multi line text into notes
✅ Use JSDoc notation to document code


Installing This App

This app uses JSDoc for notation and documentation, but does note require 3rd party apps for actually running the application. It can be installed and run on any computer with a browser.

You can use your favorite local-server app/extension to run this code. Or, you can simply open "index.html" in the "src" folder to use the app.

Alternatively, this app is available Netlify for viewing and usage anywhere (see Github Project "About" section).

JSDoc Documentation:

JSDoc documentation can be found here.

About

Front-End-Only note-taking app that uses MVC architecture. Saves the user's notes on their browser so that notes can be revisited and re-edited later on. Uses JSDoc to generate documentation.

Topics

Resources

Stars

Watchers

Forks