notepad

a notepad application. designed and written by Mo A. (aka fefe33)

the application is designed to run on a local flask server which uses an sqlite3 database to store notes. IT SHOULD NEVER BE DEPLOYED IN A WEB ENVIRONMENT. the front end is written in CSS, HTML, and vanilla JS.

features

it has several features, including but not limited to:

• the ability to create, edit, update, and delete notes
• a read-only mode feature
• a simple way to style sections of text
• a basic calculator
• a simple syntax for representing data in pre-styled HTML tables

config/installation

1. install python3-venv by running sudo apt update&&sudo apt install python3-venv

2. create your virtual environment by running python3 -m venv Notepad-JS.

3. cd into the newly created directory and enter the virtual environment by running: cd Notepad-JS&&source bin/activate.

4. make sure the dependancy is installed by running pip install flask

5. run git clone https://github.com/fefe33/Notepad-JS

6. (optional) using the editor of your choice, go into the /cfg directory (in the program's root directory) and edit the config.txt file. change the value of database to the name of your choice (ending in .db). the default is the example database which just contains a sample note showcasing some of the applications features

7. cd into the program's root folder and run python3 app.py, then navigate to http://127.0.0.1/ in your browser.

usage

the app opens to the index page which (in the case that there are notes to be listed) lists previously created notes.

click the big purple 'new' button to make a new note

to edit existing notes, click the big green plus button

to view an existing note in read-only mode, click the yellow eye button

to update a notes name, click its name and press enter to commit the change. (async update)

to delete an existing note click the red X button

---

viewing/editing the document

when editing the document, new notes can be added by clicking the big green plus button

existing sections can be updated by clicking the section and editing via the text box

the dictionary is invoked via the clipboard button in the top right of the screen

the calculator is invoked via the +/- symbol on the right of the screen below clipboard button

---

using the dictionary

not currently implimented

using the calculator

the calculator is opened via the +/- symbol on the right of the screen when in edit or view mode. it supports some basic 1 and 2 input operations

---

basic styling

the basic syntax for styling block of text is as follows: !cmd[block_of_text]

**due to regular expression related issues, punctuation and newlines arent supported for styled content (but will be in the future)

here is a table of commands and their corrisponding styles:

command	style
!b	bold
!i	italic
!t	big title (3rem)
!tt	smaller title (2.7rem)
!u	underline
!h	highlight
!c	equiv to <code>

syntax for tables are as folows:

!table(title 1, title 2):[item 1, item 1 description, item 2, item 2 description, ...]

commas are escaped with \,. styles currently do not work within tables and will be printed as raw html.

titles should be put between the parentheses, the array provided after should provide values as they would fall into the array of titles.

if the number of items provided in the array following titles in the set of parantheses mod (%) the number of titles is greater than zero, a dashes ('-') are appended to the remaining empty cells at the end of the table