Skip to content

chachaa10/note-vanilla

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

11 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

📝 Notes App

Welcome to the Notes App! This simple yet effective application helps you keep track of your thoughts, ideas, and important information. Create, edit, search, and delete notes with ease.

✨ Features

  1. Create Notes: Quickly jot down new notes with a title and body.
  2. Edit Notes: Modify existing notes to update your information.
  3. Delete Notes: Remove notes you no longer need.
  4. Search Functionality: Easily find specific notes using the search bar.
  5. Local Storage: Your notes are saved directly in your browser's local storage, so they persist even if you close the app.
  6. Responsive Design: Enjoy a consistent experience across different screen sizes.
  7. Date Tracking: See when each note was created and last updated.

🚀 How to Use

  • Open the App: Simply open index.html in your web browser.
  • Add a New Note: Click the big "➕" button at the bottom right corner.
  • Enter Note Details: Type your note's title in the "modal-title" area and the body in the "modal-body" area.
  • Save/Close: Click the "Close" button to save your new note or update an existing one. If both the title and body are empty when closing, the note will be deleted.
  • Edit a Note: Click on any note in the list to open it in the modal for editing.
  • Delete a Note: When editing a note, click the "Delete" button to remove it.
  • Search Notes: Use the "Search notes..." input field at the top to filter your notes by title or body content.

🛠️ Technologies Used

  • HTML5: For the basic structure of the application.
  • CSS3: For styling and layout, making the app visually appealing.
  • JavaScript (ES6+): For all the interactive functionality, including note management, local storage interaction, and DOM manipulation.

📁 Project Structure

├── index.html
├── css/
│ ├── reset.css
│ └── style.css
├── js/
│ └── main.js
└── assets/

✍️ Author

This Notes App was crafted with care and code!