A very light Google keep clone.
Clone this repo. Run npm install.
To start it up run npm run dev.
Develop your code in the provided files or add new ones.
Develop a very limited google keep clone.
A user should have the possibility to click a button in order to add a note. Once the button is clicked, a new note appears and the focus is set inside the header of the note and the content of the header is selected ready to be edited.
The body of a note can also be edited by clicking on it and just typing away.
When a new note is created a random color from a few preset colors is chosen and used as the background color.
The user has a button that allows them to change the note color to any of the presets.
The user has a button to delete a note.
All notes are persisted to localStorage instantly when editing, title, body, and color. When the page loads the notes are loaded from localStorage and displayed.
See the attached recording for a reference implementation.
- Allow the user to select any color using a color picker in addition to the predefined colors.
- Persist the notes to json-server.
- Icons used are hero icons, copied from their website as svgs
- The title and body are not inputs but actual html elements with a property of
contenteditableset on them. Look into this on mdn.