Quicknotes is a simple browser extension built to take notes quickly end efficiently, meant to act like a sort of digital post-it.
The main structure is in the index.html file, basically a body composed by an unordered list with a button to add new element and another one to erase all the list. There is of course a script tag for the interactive part (more on that later).
The style.css file is written to give to the extension a post-it look: since the extension opens directly in the navigation bar there are some minimum sizes for width + height plus some padding for every element added to the list to keep it clean and readable. Beside that, there is some style for the buttons, a general one and a specific one to keep their function recognizable. Of course, all colors and fonts used for the different elements are included in this file.
The real juice of the extension is in the todo.js script, that includes all the functions that handle its behavior:
- all the different elements are selected using the getElementById() function;
- the element behavior is handled with the addEventListener() function;
- to make sure that the stored list is saved across browser session, it was used the localStorage property
- the function addTask() allows, after opening a prompt for the user, to add a new element to the list using the function createElement() and to write its content with the functions createTextNode() and appendChild(). The elements are listed starting from the most recent one, thanks to the function insertBefore()
- every item of the list is provided with the deleteItem() function, that allows the user to remove a specific element thanks to the remove() function, after asking for his confirmation with the confirm() function
- just in case there is need to erase all the notes in one quick click, the deleteAll() function (included in the DELETE ALL button) ask for confirmation by the user before cleaning completely all the local storage
The manifest.json file is the one that allows the browser to indentify the folder as an extension: includes metadata like the title, the version number and the description, the icons used and the behavior of the extension in the action{} property.
Lastly, icon.png is the default extension icon while in the icons folder is included just the little "x" icon to remove elements from the list. I've included it in a folder just in case of future icon additions.
That's it, I hope you enjoy it!