https://github.com/gz30eee/notes-web-app

A simple and fully responsive Notes App built with HTML, CSS, and JavaScript. It allows users to create, edit, and delete notes, with data stored in local storage for persistence.
https://github.com/gz30eee/notes-web-app

crud-operation frontenddevelopment javascriptnotesapp localstorage responsive-web-design todo webapp

Last synced: 2 days ago
JSON representation

A simple and fully responsive Notes App built with HTML, CSS, and JavaScript. It allows users to create, edit, and delete notes, with data stored in local storage for persistence.

• Host: GitHub
• URL: https://github.com/gz30eee/notes-web-app
• Owner: GZ30eee
• License: mit
• Created: 2024-03-10T10:55:51.000Z (11 months ago)
• Default Branch: master
• Last Pushed: 2024-12-27T18:10:04.000Z (about 1 month ago)
• Last Synced: 2024-12-27T19:18:29.618Z (about 1 month ago)
• Topics: crud-operation, frontenddevelopment, javascriptnotesapp, localstorage, responsive-web-design, todo, webapp
• Language: CSS
• Homepage: https://gz30eee.github.io/Notes-Web-App/
• Size: 8.79 KB
• Stars: 1
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
![image](https://github.com/user-attachments/assets/ad3a9b1f-8755-4ee5-8a72-0655d0542d61)

# Notes App in JavaScript

This is a simple and fully responsive Notes App built using HTML, CSS, and JavaScript. The app allows users to create, update, and delete notes, with all data stored in the browser's local storage.

## Features

- **Add New Note**: Easily create a new note with a title and description.

- **Edit Note**: Update the details of an existing note.

- **Delete Note**: Remove notes from the app.

- **Responsive Design**: The app is fully responsive, making it work well on both desktop and mobile devices.

- **Local Storage**: Notes are stored in the browser’s local storage, ensuring they persist even after closing the app or refreshing the page.

- **Date Display**: Each note has a date attached, formatted as `Month Day, Year`.

## Tech Stack

- **HTML**: Structure of the app.

- **CSS**: Styling and responsive design.

- **JavaScript**: Functionality for adding, editing, deleting, and displaying notes.

- **LocalStorage**: Used to store notes on the client side.

## How to Use

1. **Add a Note**: Click the "Add new note" button to open the popup where you can enter a title and description for the note. Once you're done, click "Add Note" to save it.

2. **Edit a Note**: Click the "Edit" option in the note settings to update the note’s content.

3. **Delete a Note**: Click the "Delete" option in the note settings to remove a note.

4. **Responsive Layout**: The app adjusts itself for different screen sizes, ensuring a smooth experience across devices.

## Getting Started

1. Clone this repository to your local machine:

   ```bash

   git clone https://github.com/GZ30eee/Notes-Web-App.git

   ```

2. Navigate to the project folder:

   ```bash

   cd notes-app

   ```

3. Open `index.html` in your browser to start using the app.

## Screenshots

![image](https://github.com/user-attachments/assets/8ec89103-3e66-46d8-9721-6e0cff597844)

![image](https://github.com/user-attachments/assets/79ee4c95-320f-4554-9ded-7f2766b77b62)

## License

This project is open-source and available under the [MIT License](LICENSE).