📊 Mini Excel JS

---

📑 Table of Contents

• 📊 Mini Excel JS

  • 📑 Table of Contents

  • 🌐 Live Demo

  • 📖 Description

  • ⚙️ System Requirements

  • 🔍 Verify Installation

  • 🚀 Project Installation

    • 1️⃣ Clone the repository
    • 2️⃣ Open the project

  • ▶️ Run the Project

  • 🧠 Project Architecture

    • 📦 Core Modules

      • Spreadsheet Engine
      • Formula Processor
      • Column Management
      • Clipboard Interactions

  • ✨ Features

  • 🧮 Example Formulas

  • 🛠 Technologies Used

  • 📁 Project Structure

  • 🔥 Best Practices Implemented

  • 🎯 Project Goal

  • 📄 License

---

🌐 Live Demo

🔗 https://alobuuls.github.io/mini-excel-js/

---

📖 Description

Note

Mini Excel JS is a spreadsheet-inspired application built with HTML, CSS, and Vanilla JavaScript.

The project recreates core spreadsheet functionality directly in the browser, allowing users to edit cells, calculate formulas, select columns, copy data, and dynamically update values without using external libraries or frameworks.

---

⚙️ System Requirements

Before running the project, make sure you have:

• 🌐 A modern web browser (Chrome, Firefox, Edge, Safari)
• 📦 Git (optional)

---

🔍 Verify Installation

Check that Git is installed:

git --version

---

🚀 Project Installation

1️⃣ Clone the repository

git clone https://github.com/alobuuls/mini-excel-js.git

cd mini-excel-js

2️⃣ Open the project

Important

No dependencies or package installation are required.

You can simply open:

index.html

or run the project using Live Server in Visual Studio Code.

---

▶️ Run the Project

Open the index.html file directly in your browser.

---

🧠 Project Architecture

Note

The application is built using Vanilla JavaScript and follows a state-driven approach for managing spreadsheet data.

📦 Core Modules

Spreadsheet Engine

Responsible for:

• Cell rendering
• State management
• Data synchronization
• Dynamic updates

Formula Processor

Handles:

• Formula parsing
• Mathematical operations
• Cell references
• Automatic recalculation

Column Management

Manages:

• Column selection
• Bulk editing
• Data clearing
• Spreadsheet interactions

Clipboard Interactions

Controls:

• Copy functionality
• Keyboard shortcuts
• User productivity features
• Data extraction

---

✨ Features

• 📦 Dynamic cell editing
• ➗ Excel-style formulas
• ⚡ Automatic calculations
• 📋 Full column selection
• ⌨️ Copy values with CTRL + C
• 🧹 Clear columns using Backspace
• 🔄 Reactive updates
• 🧠 In-memory state management
• 📊 Spreadsheet-like experience
• 🚀 Lightweight implementation without frameworks

---

🧮 Example Formulas

=A1+B1
=A1*10
=B2-C1

---

🛠 Technologies Used

Technology	Purpose
HTML5	Structure
CSS3	Styling
JavaScript (ES6+)	Functionality
DOM API	DOM Manipulation
Event Listeners	User Interactions
Arrays & Objects	Data Management
Clipboard API	Copy Operations

---

📁 Project Structure

mini-excel-js/
├── index.html
├── main.js
├── styles.css
├── img/
│   ├── preview.png
│   └── excel-img.png
└── README.md

---

🔥 Best Practices Implemented

• Separation of responsibilities
• Dynamic DOM rendering
• State-driven architecture
• Formula abstraction
• Reusable functions
• Event delegation concepts
• Clean code structure
• Spreadsheet data modeling
• Maintainable JavaScript logic
• Lightweight implementation

---

🎯 Project Goal

Practice and strengthen advanced JavaScript concepts through the creation of a spreadsheet-like application:

• DOM Manipulation
• Event Handling
• State Management
• Dynamic Rendering
• Formula Parsing
• Spreadsheet Logic
• Arrays & Objects
• Data Synchronization
• User Interaction Design
• Front-End Architecture

---

📄 License

This project is intended for educational and portfolio purposes.

Created by Alondra Francisco Onofre.