This app was made as my first project for Get Coding NL.
As an ADHDer, I sometimes struggle to find the right organizational tools to keep life in order. So what better project was there to do than my very own notes app?
I tackled this project with creativity and freedom in mind. I wanted to make something straightforward and easy to use, but more exciting than your run-of-the-mill notes app. And so Totes was born.
Read on to find out how to make the most of your note-making experience. I hope you enjoy using it as much as I did creating it!
Using Totes McNotes is easy! Just follow these instructions and you'll be a pro in no time.
- Click the "new note" button on the home page to create a note.
- Add a title, fill your note with whatever's on your mind. Use the toolbar to modify your font .
- Use the colour picker above to change the note's colour. Try it out now!
- Marvel at the pretty colours
- Click "create"
- Congratulations, you've made your first note! High five!
Screen.Recording.2023-04-15.at.9.15.02.PM.mp4
Once a new note is created, it will appear on the home page.
If your notes start piling up in the grid, feel free to sort them using the drop down menu in the header.
You can edit a note by clicking on it. The edit page adds the option to delete the note if you no longer have any use for it.
All notes in Totes are stored in a dragon's stomach deep in the pacific ocean for safe keeping.
Just kidding.
This app utilizes your browser's local storage. This means your notes are saved to this browser and this browser alone.
When you delete a note, it moves into the "recently deleted" section.
Once you're in "recently deleted" you can select notes and either delete or restore them. But beware-- once a note is deleted from this section, there's no way to get it back.
Be careful!
I was hoping you'd ask that question! Here's what you want to do:
- Open Totes McNotes in the browser holding the desired notes.
- Click "export" on the main page.
- Head to your downloads folder and find a file called "totes mcnotes".
- Save that file to external storage, such as a flash drive.
- Open Totes in the browser you wish to move to.
- Click the import button and select the "totes mcnotes" file from your external storage device.
- Success!
Don't worry about duplicate notes. Totes will fix that up for you during the import process.
Note: this will not bring recently deleted notes. Should it? Let me know! (contact details below)
Totes McNotes has 2 different "modes" -- Grid and Canvas.
Grid is the default mode for Totes. It organizes your notes in...well...a grid. Every time you create or save a note, it will appear in the top left-most corner of the grid for ease of access. The sort menu can be used to rearrange them based on certain criteria.
This is the part where I had the most fun during creation. It was a big challenge that really paid off, because it is the mode that embodies the energy that Totes McNotes really wants to get across.
Put simply, canvas mode gives you the freedom to drag and drop your notes wherever you want on the cork board. The little plus sign in the top left of each note is your edit button.
You can also drag notes into the trash bin at the bottom of the screen. Double click on the bin to open your recently deleted notes!
Apart from this, everything works just like in grid mode.
Screen.Recording.2023-04-17.at.10.09.14.PM.mp4
Note: At the moment, Canvas mode is not fully functional on touch screens.
- HTML
- CSS
- Javascript
- Quilljs for this sweet text editor
- Google Fonts
- Chris Courses on Youtube for the canvas tutorials.
Also a huge thanks to Jack Harrhy, my coach at Get Coding. Without Jack, this app would likely not exist.
If you made it to the end, congratulations! Your prize is a healthy dose of self satisfaction. Can you feel it? Now go make some notes. Put them out into the world and let them fly, or whatever it is that notes do.
Enjoy!
-Jordan Parrott