https://github.com/bocaletto-luca/notepad

Notepad-JS is a professional, responsive, and feature-rich web-based note editor built with HTML5, CSS3, and JavaScript. It allows users to create, edit, load, and save notes locally without requiring external APIs. This app includes full file management (New, Open, Save, Save As) and a style customization toolbar for adjusting font, size, color ..
https://github.com/bocaletto-luca/notepad

bootstrap css3 file-manager html5 javascript local-storage notepad productivity text-editor web-app

Last synced: 2 months ago
JSON representation

Notepad-JS is a professional, responsive, and feature-rich web-based note editor built with HTML5, CSS3, and JavaScript. It allows users to create, edit, load, and save notes locally without requiring external APIs. This app includes full file management (New, Open, Save, Save As) and a style customization toolbar for adjusting font, size, color ..

• Host: GitHub
• URL: https://github.com/bocaletto-luca/notepad
• Owner: bocaletto-luca
• License: gpl-3.0
• Created: 2025-05-14T17:05:24.000Z (about 1 year ago)
• Default Branch: main
• Last Pushed: 2025-05-15T08:52:30.000Z (about 1 year ago)
• Last Synced: 2025-06-18T03:11:54.763Z (about 1 year ago)
• Topics: bootstrap, css3, file-manager, html5, javascript, local-storage, notepad, productivity, text-editor, web-app
• Language: HTML
• Homepage: https://bocaletto-luca.github.io/
• Size: 28.3 KB
• Stars: 4
• Watchers: 2
• Forks: 1
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

          
# 📝 Notepad - JS | Web App

#### Author: Bocaletto Luca

[![HTML5](https://img.shields.io/badge/HTML5-E34F26?style=flat-square&logo=html5&logoColor=white)](https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/HTML5)

[![CSS3](https://img.shields.io/badge/CSS3-1572B6?style=flat-square&logo=css3&logoColor=white)](https://developer.mozilla.org/en-US/docs/Web/CSS)

[![JavaScript](https://img.shields.io/badge/JavaScript-F7DF1E?style=flat-square&logo=javascript&logoColor=black)](https://developer.mozilla.org/en-US/docs/Web/JavaScript)

[![License: GPLv3](https://img.shields.io/badge/License-GPLv3-blue?style=flat-square)](LICENSE)

[![Open Source](https://img.shields.io/badge/Open%20Source-Yes-brightgreen?style=flat-square)]()

[![Responsive](https://img.shields.io/badge/Responsive-Yes-blue?style=flat-square)]()

[![Multi-Platform](https://img.shields.io/badge/Multi--Platform-Yes-blueviolet?style=flat-square)]()

[![Web App](https://img.shields.io/badge/Web%20App-Yes-orange?style=flat-square)]()

![Bootstrap](https://img.shields.io/badge/Style-Bootstrap-7952B3.svg)

Notepad-JS is a **fully functional, responsive, and user-friendly** web-based note editor. Designed for efficiency, it provides **full local file management** and **dynamic text styling** options, making it a powerful tool for anyone looking to write, edit, and store notes without any external dependencies.

Developed by **[Bocaletto Luca](https://github.com/bocaletto-luca)**.

---

## 📜 Features

✅ **Full File Management:** New, Open, Save, and Save As functionalities.  

✅ **Complete Local Operation:** No API or registration required.  

✅ **Customizable Text Styling:** Modify font, size, and color dynamically.  

✅ **Responsive UI:** Seamlessly adapts to different screen sizes using Bootstrap.  

✅ **Lightweight & Fast:** Runs entirely in the browser—no installation needed.

---

## 🏗 Technology Stack

| Language/Framework   | Purpose                                  |

|----------------------|------------------------------------------|

| **HTML5**            | Semantic structure                       |

| **CSS3 (Bootstrap)** | Styling & responsive design              |

| **JavaScript (ES6)** | Core functionality & file management     |

---

## 🚀 Installation & Usage

### 1️⃣ Clone the Repository

```bash

git clone https://github.com/bocaletto-luca/Notepad-JS.git

cd Notepad-JS

```

### 2️⃣ Open the Application  

Simply open the `notepad.html` file in your browser.

### 3️⃣ Using Notepad-JS

- **Type your notes freely.**

- **Use the File menu** to create, open, save, or export your notes.

- **Customize your text style** using the toolbar to change font, size, and color.

---

## 📖 Detailed Usage Guide

### 🗂 File Management

- **New Note:** Clears the current note with a confirmation prompt.

- **Open Note:** Loads a `.txt` or other text-based file from your device into the editor.

- **Save Note:** Saves the current note using its existing file name.

- **Save As:** Prompts for a file name and downloads the note as a text file.

### 🎨 Text Styling

- **Font Family:** Select from multiple font options.

- **Font Size:** Adjust the text size dynamically.

- **Font Color:** Choose a color for better readability.

### ⌨️ Keyboard Shortcuts

| Shortcut     | Action     |

|--------------|------------|

| **Ctrl + C** | Copy text  |

| **Ctrl + V** | Paste text |

| **Ctrl + S** | Save note  |

---

## 📸 Screenshots

![Notepad-JS Screenshot](https://via.placeholder.com/800x400?text=Notepad-JS+Screenshot)

*(Replace this placeholder with an actual screenshot of the application.)*

---

## 🔐 License

This project is licensed under the **GPL v3 License**. See [GPL v3](https://www.gnu.org/licenses/gpl-3.0) for full details.

---

## 🤝 Contact

For any questions or feedback, contact:

🧑‍💻 **Bocaletto Luca**  

📌 GitHub: [bocaletto-luca](https://github.com/bocaletto-luca)

---

✨ **Enjoy Writing with Notepad-JS!** ✨