https://github.com/darkzarich/sheets-project-training

Vanilla JavaScript project, something similar to Google Sheets. With this project I decided to try to stay away from any libraries, frameworks, any other utils (excluding build instruments such as Webpack) and make something using only Vanilla JavaScript.
https://github.com/darkzarich/sheets-project-training

google-sheets javascript no-libraries oop-principles project sheets training vanilla-javascript webpack

Last synced: 14 days ago
JSON representation

Vanilla JavaScript project, something similar to Google Sheets. With this project I decided to try to stay away from any libraries, frameworks, any other utils (excluding build instruments such as Webpack) and make something using only Vanilla JavaScript.

• Host: GitHub
• URL: https://github.com/darkzarich/sheets-project-training
• Owner: Darkzarich
• License: mit
• Created: 2021-04-04T15:19:39.000Z (almost 4 years ago)
• Default Branch: master
• Last Pushed: 2021-05-17T02:18:17.000Z (over 3 years ago)
• Last Synced: 2024-11-18T07:23:11.206Z (3 months ago)
• Topics: google-sheets, javascript, no-libraries, oop-principles, project, sheets, training, vanilla-javascript, webpack
• Language: JavaScript
• Homepage:
• Size: 700 KB
• Stars: 0
• Watchers: 2
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# sheets-project-training

[Show me what it looks like!](https://gifted-galileo-6ef79d.netlify.app/)

**Vanilla JavaScript** project, something similar to Google Sheets.

With this project I decided to try to stay away from any libraries, frameworks, any other utils (excluding build instruments such as Webpack) and make something using only **Vanilla JavaScript**.

On top of app functionality and features I made a simple framework and built this app applying some rules I defined for my framework 

Framework features include:

- Component approach

- Component HTML render

- Components-state allowing rerenders on changes

- `Emitter`class implementing Observer pattern to allow connection between Components

- `Redux`-like store and a way to react to changes from components, also has a middleware to save changes to `localStorage`

- `EngineDOM` class which simplifies many DOM operations, inspired a lot by `JQuery.js`, uses method chaining as well

App features include: 

- Sheets auto draw

- Cell selection, group cell selection (with `Shift` key)

- Basic formula parsing and calculation

- Toolbar to change text styles inside Cells

- Rows and columns resizing 

- Saving any changes between refreshes

- Multiple sheets

- Routing