Skip to content

Latest commit

 

History

History
85 lines (56 loc) · 2.98 KB

README.md

File metadata and controls

85 lines (56 loc) · 2.98 KB
Raw

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.