Skip to content

A responsive Note-Taking Web Application that allows users to create, edit, delete, and search notes. The app also includes light and dark theme toggling and stores notes using Local Storage, ensuring data persistence across sessions.

Notifications You must be signed in to change notification settings

arianimmen/Note-App-Practice

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

21 Commits
 
 
 
 
 
 
 
 
 
 

Repository files navigation

Note App Practice

Live Demo

A responsive Note-Taking Web Application that allows users to create, edit, delete, and search notes. The app also includes light and dark theme toggling and stores notes using Local Storage, ensuring data persistence across sessions.

🌟 Features

  • Responsive Design:

    • Optimized for both mobile and desktop screens.
  • Light/Dark Theme Toggler:

    • Easily switch between light and dark themes to suit your preferences.
  • Local Storage Integration:

    • Notes are saved in the browser's local storage, allowing data to persist even after the page is refreshed.
  • Add, Edit, and Delete Notes:

    • Full CRUD (Create, Read, Update, Delete) functionality for managing your notes.
  • Search Functionality:

    • Quickly search through your notes to find specific content.

🚀 Live Demo

Check out the live version of the app here.

Pictures

Screenshot from 2024-08-31 19-43-25 Screenshot from 2024-08-31 19-43-30 Screenshot from 2024-08-31 19-43-40 Screenshot from 2024-08-31 19-43-46

🛠️ Technologies Used

  • HTML5
  • CSS3
  • JavaScript (ES6+)
  • Local Storage API

🎨 Design

This project is based on a design from Figma. You can view the original design here.

📂 Project Structure

├── index.html            # Main HTML file
├── css/
│   ├── style.css         # Main CSS file
│   └── font.css          # Font styles
├── js/
|   ├── API.js            # Storage
|   ├── Ui.js             # Ui handling  
│   └── app.js            # Main JavaScript file
├── assets/
│   ├── images/           # Images and icons
│   └── sprites.svg       # SVG sprite sheet
└── README.md             # Project documentation

💻 Getting Started

To get a local copy up and running, follow these steps:

Prerequisites

  • A modern web browser (e.g., Chrome, Firefox, Edge)

Installation

  1. Clone the repo
    git clone https://github.com/arianimmen/Note-App-Practice.git
  2. Open the index.html file in your preferred web browser.

🤝 Contributing

Contributions are what make the open-source community such an amazing place to learn, inspire, and create. Any contributions you make are greatly appreciated.

If you have any suggestions or feature requests, please feel free to open an issue or fork the repository and submit a pull request.

About

A responsive Note-Taking Web Application that allows users to create, edit, delete, and search notes. The app also includes light and dark theme toggling and stores notes using Local Storage, ensuring data persistence across sessions.

Topics

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published