When you open Sarkaridev Notebook Maker. You will see:
-
Top Navigation:
- Logo: Sarkaridev official logo.
- App Title
- Notebook Name: You can update the "Notebook Name" by Clicking/Taping it.
- Notes Search: You can search notes inside a Notebook using note tags or by text in your notes content.
- Theme toggle: Change theme of the web app. Variants available: Dark/Light. Default is Dark.
- Menu: Contains Quick buttons for Add Note, Import Note, New Notebook, Import NoteBook, Export Notebook, Refresh NoteBook, Delete NoteBook and Quick Links to pages Updates, Help, About us, Disclaimer, Contact us, How to, Privacy Policy, Terms of Use and Conditions.
- Infinity Canvas: Default Notebook Name "My Notebook" with Default Note (first visit only). For creating your own Notebooks, you can delete the notebook or delete the note and rename the notebook.
-
Bottom Navigation:
- Status: The actions you do in the web app will show up here.
- Zoom Setting: In, out, reset buttons with percentage.
- Check out the video: Sarkaridev NoteBook Maker Basics
Goto "Menu" click "New Notebook".
Note: Make sure that export your existing Notebook before the above step.
Goto "Menu" click "Delete Notebook".
Note: Deleting the Notebook will also results in the deletion of the database.
Goto "Menu" click "Refresh Notebook".
Note: It will Refresh all your Notes in the Notebook without reloading the webpage.
-
Single Note Import/Export:
- Goto "Menu", click "Import Note". It'll import a Note (JSON file) into your current working Notebook and render along with other Notes.
- To export a note as JSON file, in the note header control section, click ""
-
Entire Notebook Import/Export:
- Goto "Menu", click "Import Notebook". It will populate the webapp with the imported Notebook content.
- Goto "Menu", click "Export Notebook". It will download a file with your described name in JSON format.
Goto "Menu", click "Add Note". It will inject a new note with default content.
Another method: Note header control section, click the "" to add a new note.
Note: Sometimes new note shift itself behind an existing note. Make sure to move/drag. The current default location for new note is screen's top left corner.
Note Tile/Window contains header, content area, scroll buttons, note tags.
- Note Tile: You can "Click/Tap" to drag it across the infinity canvas. A single note tile can not cover another.
-
Note Header: Contains "Note Title", and "Note Controls":
- - You can Refresh the note.
- - Add Note.
- - Open Edit Note Panel.
- - Open the Note in View Panel.
- - Download Note as JSON File.
- - Minimize the Note.
- - Delete Note
- Window Content Area: It will contain the content you write or add to your note. It's scrollable vertically.
- Scroll Buttons: Ease the process of scrolling top or bottom a note content area.
- Note Tags: Easily search your notes using note tags.
- Click icon from the Note Tile Header Controls. It will open the Edit/Editor Panel.
- Title: Change the note title (if you want).
- Tags: Add note tags for Notes Search Engine.
-
Toolbar:
- - You can copy the content of the editor area. Note: It will copy the content as HTML which can be pasted again using the button. It is helpful in case of something went wrong.
- - Undo.
- - Redo.
- - Paste copied content (HTML,CSS) of the Current/Other Notes. Note: To paste normal text (content) from outside sources directly paste it, in the editor area. Do not click the this button that time.
- - Text Bold.
- - Text Italic
- - Text Underline
- - Text Strikethrough
- Lists: You can create Unordered and Ordered.
- Size: You can changes font/text sizes - Small, Normal, Large, X-Large, XX-Large
- Font Family: You can choose from the defined fonts for your texts. Arial, Roboto, Noto Sans, Lexend, Segoe UI, Times New Roman, Courier New
- Format and Typos: You can structure your notes content using Format and Typos. Let's see common buttons: [ Title - H1 ], [ SubTitle - H2 ], [ Heading - H3 ], [ SubHeading - H4 ], [ Section - H5 ], [ SubSection - H6 ], [ Body - P ], Subscript, SuperScript, Quote, HR (Horizontal Line)
- Highlights: You can Highlight text and it's background colors.
- Alignments: You can align text or content [ Left, Center, Right ], and add Outdent or Indent
Note: The yellow line in the editor head represents unsaved content.
Multimedia in the Editor Panel:
- Hyperlink: Highlight a text or sentence in the editor. Click "Hyperlink" write or paste the url/link in the prompt. Hit Enter.
- Image: Select an image from your file system or OS.
- Table: Create responsive Table for tabular data.
- Carousel/Image Slides: Create image slideshows for better notes.
- Details: Hide/Show panel for your note content. Multi-Use. You can create "Table of Content", etc.
Carousel/Image Slides: Create image slideshows for better notes.
- Add images: Click/Tap the Carousel button from the Multimedia dropdown menu in the editor toolbar. or Click the + Add Images (Max 20) button.
- Section below the + Add Images (Max 20) will show selected images by you. You can remove or add vice-versa.
Details: Hide/Show panel for your note content. Multi-Use. You can create "Table of Content", etc.
- Goto "Editor Panel", toolbar section "Multimedia" dropdown menu - Click/Tap "Details".
- It will initiate a prompt that will ask for the "Title" of the details panel.
- From the "Media Controls" inside the details panel. You can toggle show/hide status which is along with "Delete" button.
- Write the text in the Todo input. Hit "Enter" or Click/Tap the "Add" button.
- Separate "Pending" and "Completed" Todo section for clarity.
- Drag functionality for each Todo sub panel todo items.
Note: Todo lists is for personal use only. You can "Done/UnDone" the todo list item from note tile, edit and view panel. You can't export it with your HTML note file.
Add Tabular content to your notes.
- Goto "Editor Panel", in the toolbar section from the "Multimedia" dropdown menu select "Table".
- An prompt will ask you Table Title (Caption Name), Rows Count, Columns Count, and Class. Note: Choose from defined classes basic, bordered or striped
- You will be able to add/remove more Rows and Columns from the table media-controls in the table container panel in your note content.
You can customize your note tile/window text and background colors.
- Note "Background" Color
- Note "Text" Color
- Note Tile/Window "Border" Color
- Note "Header Background" Color
- Note "Header Text" Color
Note: Changing the Note Header Text & Background colors applies to the "scroll buttons". The note-tags receives auto random text & background colors.
- In the Note Tile/Window Header Controls section, Click/Tap the "".
- It will open the "View Panel".
- You can "Search" note content and "Download" the note as HTML File to share using the "" button.
When you create a carousel/Image slides from the "Editor Panel". It will appear in the Note tile/window.
- Open "Carousel Panel" by "Clicking/Tapping" the "View" button which is inside the carousel container in the Note tile/window.
- Slide images using the "Right/Left" navigation buttons.
- Download the Carousel/Slideshow using the "" button.
- Once loaded, the app works without internet.
- You can Create,Read,Update,Delete (CRUD) Notes and Notebooks.
- Complete Privacy: Your Notebooks will remain in your browser till you delete "Notebook".
- A set of features to play with.. (The Limit is Your Creativity).