jesschuck / mynotes

The project is an exciting web application that enables users to create, modify, and remove notes in a highly interactive way.

My Notes

The project is an exciting web application that enables users to create, modify, and remove notes in a highly interactive way. With the help of HTML, CSS, and JavaScript, the application incorporates various useful features, including viewing notes in a text box format and saving data through local storage (localStorage). The primary objective of this project is to provide users with a straightforward and user-friendly way to manage their notes efficiently.

As an example, users can quickly jot down important points from a meeting or make a to-do list and access it from anywhere with an internet connection. They can also edit or delete their notes with just a few clicks.

The web application is designed to be intuitive and easy to use for everyone.

Overview

The web application features an "Add Note" button that creates a new note when clicked, thanks to the addNewNote function. Each note comes with options for editing and deletion, providing a flexible user experience. To streamline the process, a "Remove All Notes" feature has been included, enabling users to delete all existing notes on the page quickly.

Data persistence is ensured through the use of localStorage, which stores the notes, allowing users to access them even after closing the application. Moreover, users can utilize Markdown to write their notes, making it easy to format text, add images, and organize information.

Build with:

• 
• 
• 

Color Documentation

Color	Hexadecimal
Background color	#b393bb
Notes color	#808fd8
Add/Clear button	#808fd8

What I learned:

1. DOM Manipulation:

The intensive practice of creating, modifying, and deleting DOM (Document Object Model) elements has provided a deep understanding of interacting with the HTML page structure.

2. Data Persistence with localStorage:

Using localStorage to store and retrieve data locally in the browser has improved my understanding of how to maintain data consistency between user sessions.

3. Client-Side Event Interaction:

Implementing features such as adding, editing, and deleting notes involved handling client-side events such as button clicks, text input, and other interaction events.

4. Real-Time Editing:

Implementing the ability to edit notes in real-time, toggling between a text view and an editing area, solidified knowledge of content update dynamics in the user interface.

5. Bulk Element Removal:

Adding the functionality to remove all notes required efficient manipulation of HTML elements in bulk, providing insights into handling collections of elements and optimizing removal operations.

License

This project was based on the "50 Projects In 50 Days - HTML, CSS & JavaScript" course from Udemy.