Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/stephenombuya/spreadsheetapplication
A simple, interactive spreadsheet web application built using HTML, CSS, and JavaScript. This app allows users to create, modify, and organize data in a grid-like format, mimicking a basic spreadsheet interface.
https://github.com/stephenombuya/spreadsheetapplication
css3 functional-programming html5 javascript
Last synced: about 1 month ago
JSON representation
A simple, interactive spreadsheet web application built using HTML, CSS, and JavaScript. This app allows users to create, modify, and organize data in a grid-like format, mimicking a basic spreadsheet interface.
- Host: GitHub
- URL: https://github.com/stephenombuya/spreadsheetapplication
- Owner: stephenombuya
- License: apache-2.0
- Created: 2024-11-06T16:34:55.000Z (about 2 months ago)
- Default Branch: main
- Last Pushed: 2024-11-06T17:08:14.000Z (about 2 months ago)
- Last Synced: 2024-11-06T17:39:41.961Z (about 2 months ago)
- Topics: css3, functional-programming, html5, javascript
- Language: JavaScript
- Homepage:
- Size: 14.6 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# **Spreadsheet Application**
A simple, interactive spreadsheet web application built using HTML, CSS, and JavaScript. This app allows users to create, modify, and organize data in a grid-like format, mimicking a basic spreadsheet interface.
### **Table of Contents**
- Project Overview
- Features
- Technologies Used
- Installation
- Usage
- Contributing
- License
### **Project Overview**
- This Spreadsheet Web App aims to provide an easy-to-use interface for managing and organizing data. It features a grid layout where users can enter data into cells, format rows and columns, and perform simple mathematical operations.
- The app is designed for basic data entry, offering features like adding/removing rows, columns, cell styling, and basic data validation.
### **Features**
1. **Grid Layout**: A flexible and dynamic grid where users can enter data.
2. **Add/Remove Rows and Columns**: Easily modify the grid by adding or removing rows and columns.
3. **Cell Formatting**: Format text, change colors, and apply borders to cells.
4. **Basic Calculations**: Support for basic arithmetic operations like addition, subtraction, multiplication, and division across rows and columns.
5. **Save/Load Data**: Option to save data in the browser or load it back when the app is reopened.
6. **Responsive Design**: The layout adjusts to different screen sizes for better usability on mobile and desktop devices.
### **Technologies Used**
- **HTML**: Used for the structure of the app and the grid layout.
- **CSS**: For styling and responsiveness.
- **JavaScript**: Used to handle interactivity, such as adding/removing rows/columns, performing calculations, and saving/loading data.
### **Installation**
1. Clone the repository
```
git clone https://github.com/stephenombuya/SpreadsheetApplication
```
2. Navigate to the project directory
```
cd spreadsheet-web-app
```
3. Open the index.html file in your browser
- You can open the index.html file directly in any modern web browser. There's no need for a server setup since it's a client-side application.
```
open index.html
```
### **Usage**
- **Create a Spreadsheet**: When you open the app, it will load a default 10x10 grid.
- **Add Data**: Click on a cell and start typing to add data. Press Enter to move to the next row, or Tab to move to the next column.
- **Add/Remove Rows/Columns**: Use the buttons at the top of the grid to add or remove rows and columns.
- **Perform Calculations**: Type a simple formula (e.g., =A1+B2) to calculate values in the grid.
- **Save Data**: You can save the current data locally using the "Save Data" button, and reload it anytime.
- **Responsive Layout**: The grid adjusts automatically to fit different screen sizes, making it easy to use on both desktop and mobile devices.
### **Contributing**
Contributions are welcome! If you'd like to improve this project, feel free to fork the repository, make your changes, and submit a pull request. Here's how to contribute:
1. Fork the project
2. Create a new branch (git checkout -b feature-name)
3. Commit your changes (git commit -am 'Add feature')
4. Push to the branch (git push origin feature-name)
5. Open a pull request
- Please make sure your code adheres to the existing coding style and includes relevant tests where applicable.
### **License**
This project is licensed under the Apache Commons License - see the [LICENSE](https://github.com/stephenombuya/SpreadsheetApplication/blob/main/LICENSE) file for details.