A minimalist note-taking web app build by the minimalist, for the minimalist. This web app is created using only HTML, CSS, and Vanilla JavaScript. No libraries or frameworks were used.
You can check the project by the clicking the link below:
There are two ways you can get a copy of my repository and choose which one you prefer.
Option 1: Clone the repo
- Open the Git Bash and type this:
git clone https://github.com/mohammedasker/NoteApp.git
- Press Enter key. Your local clone will be created.
Option 2: Download the Zip file
-
Under the repository name, click Clone or download
-
Click the Download ZIP. A download will start and be saved on your Download folder.
Here's what the user can do with the app.
-
A user can create a new note by writing on a textarea. (When a user click "Save" button with an empty box, it will throw "Please Write Something" message)
-
When a user finish writing a content and clicked a "Save" button, it will spawn a saved note below.
-
A user can edit the saved content by clicking the edit ":" button on the right side of the note. When the sign is tick mark "✓", it indicates that the saved content is editable and when the sign is colon mark ":", it indicates that the saved content is not editable.
-
A user can delete the saved note by clicking the delete "x" button.
-
A saved note is stored in the local storage and you can tell when a message reading "Changes saved" appears on the screen. When a page is refreshed or closed the tab, the saved notes is still there.
As a beginner programmer, there are a lot of things that can be improved to make this project better and here I list the following points which needs to deal with:
-
When a note is created, it should be not editable by default. You'll notice the button on the right is tick mark "✓" and yet it still editable. Consequently, when you delete the note when it is tick mark, the blank page is editable as well.
-
If you look carefully both in my CSS code and the app itself, you'll see that the textarea and note lists are not perfectly aligned together and they're off by few meters on the right side of the screen. There's got to be better way to do it without manually tweaking the code until it looks better. (If you still don't get the problem yet, I'll attach a photo below shortly).
-
When clicking the edit button, only one of them is toggling tick to colon marks and vice-versa. It should have worked on all the notes.
Current version: 1.0.1
- 1.0.0 (04/10/2019)
- 1.0.1 (07/10/2019)
- @MohammedAsker - Idea & Initial work
This project is licensed under the MIT license.