https://github.com/sarahabuirmeileh/stickynoteapplication

A dynamic web-based solution for managing multiple notes across customizable boards.
https://github.com/sarahabuirmeileh/stickynoteapplication

Last synced: 9 months ago
JSON representation

A dynamic web-based solution for managing multiple notes across customizable boards.

• Host: GitHub
• URL: https://github.com/sarahabuirmeileh/stickynoteapplication
• Owner: SarahAbuirmeileh
• Created: 2024-11-21T17:49:10.000Z (12 months ago)
• Default Branch: main
• Last Pushed: 2024-12-28T08:18:16.000Z (11 months ago)
• Last Synced: 2024-12-28T09:18:50.782Z (11 months ago)
• Language: JavaScript
• Homepage: https://sticky-notes-app11.netlify.app/
• Size: 258 KB
• Stars: 1
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

          
# Sticky Notes Application✨ 

The Sticky Notes application is a dynamic web-based solution for managing multiple notes across customizable boards. Built entirely with front-end technologies, it provides a user-friendly interface for creating, organizing, and managing notes. No authentication or back-end services are required, making it lightweight and accessible. 

 

👉 [Poduction version of app](https://sticky-notes-app11.netlify.app) 

 

## Let's take a tour on the application features 🚀 

 

### 1. Board Management: 

![image](./images/Board%20Management.png) 

- Create multiple boards with unique id, names. 

- Easily switch between boards using a navigation menu. 

 

### 2. Note Creation: 

![image](./images/Note%20Creation.png) 

- Create sticky notes on any board. 

- Display creation date at the bottom left of each note. 

- Show an "edited at" timestamp when notes are modified. 

 

### 3. Note Management: 

![image](./images/Note%20Management.png) 

- Drag & Drop: Rearrange notes by dragging and dropping. 

- Resizing: Adjust note size by dragging the bottom-right corner. 

- Color Customization: Change note colors using a button that appears on hover. 

 

### 4. Text Editing: 

![image](./images/Text%20Editing.png) 

- Edit notes directly by clicking on the text area. 

 

### 5. Note Deletion & Archiving: 

![image](./images/Note%20Deletion%20&%20Archiving.png)

- Delete notes by moving them to an archive (trash). 

- Access archived notes via a button in the bottom-right. 

- View and manage deleted notes separately from active boards. 

 

### 6.  Search Functionality: 

![image](./images/Search%20Functionality.png) 

- Search bar in the header for instantly filtering notes by text content. 

 

## Used Technologies💻 

1. HTML, CSS ans JavaScript. 

2. LocalStorage: For data persistence without back-end services. 

 

## Installation and Run⚙️ 

To get started with the Sticky Notes application, follow these steps: 

1. Clone the repo: 

   `git clone https://github.com/your-repo/sticky-notes-app.git`

 

2. Open the project folder and launch the app by opening the index.html file in your web browser. 

 

## Acknowledgement🤝 

This application is a collaborative project by the great PowerOfGirls Team (Majd Tamimi, Rand Haymouni, Sarah Abu Irmeileh, Mais Arafeh). Special thanks to all contributors for their hard work and dedication to delivering a user-friendly note management experience. 

 

This project is the result of three months of intensive training provided by the PSEU at Sada Company, All thanks and appreciation for their efforts.