ECMA6 OOP With Classes, Basic Spreadsheet Generator

Introduction: ECMA6 OOP With Classes, Basic Spreadsheet Generator

About: Nowadays attempting creating small apps to dive into the world of programming and Software Development

This tutorial will handle JavaScript programming with Object Orientation and classes. It's not just a basic, boring "Hello World" tutorial, the end result of the program will be an offline app with User Interface that generates a spreadsheet and contains calculations (addition, subtraction, division, modulo, multiplication). It can be opened with Excel, Open (Libre) Office or Google Spreadsheet.

So my intention was to automate spreadsheet generation that can produce many calculations without a huge effort.

At the end of the instructable the app will be provided as zip.

Teacher Notes

Teachers! Did you use this instructable in your classroom?
Add a Teacher Note to share how you incorporated it into your lesson.

Step 1: What You Need for This Tutorial

  • A text or better a coding editor with syntax highlighting (e.g. sublime, emacs, visual studio code)
  • A browser with ECMA 6 support (Firefox, Chrome), maybe Edge (haven't tested yet)
  • A basic understanding how a progamming language work

Step 2: CSV Filestructure

CSV stands for Comma Seperated Values and at first you should now how this fileformat is structured.

If you open up this kind file with a normal text editor it looks like above.

A simple human readable text that each cell is separated by comma or semicolon, the carriage return (or simply enter) leads to the next row of the table.

Step 3: CSV Opened With a Spreadsheet Program (Excel, Open Office Calc)

If you open a csv with a spreadsheet program it should be look like above.

Step 4: The Diagram of the App

So we begin with the diagram that is showed on the top and start with the html file that contains a form with radio, checkbox and generate buttons

Step 5: HTML - Form

The form is for the human interaction process, containing the visual elements, (radio) buttons, checkbox. It will be accessed by the controller module.

Step 6: Require.js

At the bottom of the html form, the script tag links to the requirejs library that it is used for loading seperated class files. You could also download the require.js library and link it directly so that it runs offline. Afaik there is still no native module loading support in ECMA 6, but in the next releases it will be hopefully integrated.

Step 7: Import the Modules

As you can see in the diagram, there is an entity (define imports) for the modules loads.

Inside the script tag, the data-main is assigned by imports/class.js, which leads to the imports of the class files.

So the controller has now access to all of the defined classes and can instatiate them.

Step 8: Controller/UX Implementation

Now we take a look at the controller:

After input evaluations (radio button, checkboxes already checked, rastersize), the eventListener reacts by clicking the generate button:

  • it checks if the swap checkbox is checked
  • it reads the keyinput (mxn)
  • instatiation of the calc and filewriter module
  • the check which radio button is chosen
  • then assigning all of the evaluated inputs to the model instance
  • the res(ult) of the model will be written in a blob to provide the csv file

Step 9: The Spreadsheet Generator

The next is the calculator module that generates a variable sized spreadsheet (dependent on user input) as csv file.

The constructor inits the default values of the inputs. When calc() is called it generates a Matrix in a nested for loop, checks at the same time if the operands are swapped (commutativity) and if the mode of the operation it's an addition, subtraction or something other.

Step 10: CSV/Txt Filegenerator

The Filewriter constructor contains a filename string variable e.g. "calcTable.csv" and the downloadlink is generated via DOM.

setContent() stores the generated String from the calculation module into the Blob(), that can takes up a set of Strings as text or csv. The method createFile() generates a downloadlink of the blob, that represents as csv or text file.

Step 11: Run the App!

So if you open up autoCalcGUI.html with your browser you generate simply a calculation spreadsheet, by choosing operation, entering the rastersize (e.g. 123x456) and clicking the generate button, then suddendly a download link for the csv-table appears below.

Thanks to Chrome's V8 engine it can also calculate and generate huge spreadsheets 1000x1000 = 1000000 in a couple of seconds.

Update: try, catch when input is not valid

Have fun and the app is provided as zip.

Be the First to Share


    • Finish It Already Speed Challenge

      Finish It Already Speed Challenge
    • Arduino Contest 2020

      Arduino Contest 2020
    • First Time Author Contest

      First Time Author Contest