Make your first Electron project with time table generator
Tags: html, javascript, electron, jquery
Published: 2020-10-06 08:56:19

We'll create a time table generator app in electron framework. This app will be able to generate a timetable that can be exported as .xlsx and can be stored in the system.

##Dependencies
To get started, make sure you have installed electron, node js, and npm.

##Setting up the app
Open terminal and type npx create-electron-app time-table-generator. You will get output like this:

![Creating app using npx](https://dev-to-uploads.s3.amazonaws.com/i/pmxoqaoanmpu7wjink4i.png)

##index.html
To make a timetable, we need some information number of classes and the subject name. For that, we will create a label and select box like this:

![Taking data using select](https://dev-to-uploads.s3.amazonaws.com/i/wb430mj2q5njrxi1iw4z.png)

![In action](https://dev-to-uploads.s3.amazonaws.com/i/0fnyf2a5frf2dpw26nzq.png)

Now we need the subject names. For this, we'll generate input fields dynamically. This can be done by javascript. That's it, now we'll work in javascript file for generating time table.

##Creating table through javascript file
Now create a new javascript file. We need to add the subject names mentioned before in an array. Here's the way to do this:

![Adding subject name in array](https://dev-to-uploads.s3.amazonaws.com/i/mtfv3sna66dol06ivjpz.png)

**NOTE: This function is invoked when we click on '+' button for new input field to enter new subject name.**

![Input field for subject name](https://dev-to-uploads.s3.amazonaws.com/i/55ni74e4415wtyu9hw1p.png)

We'll store the above data in local storage(will later discuss why I used local storage to store data). Now we'll create a function which will generate the time table and display on the next page and to do that we will use:
<pre>window.location.replace("02.html") //to store in localstorage
localStorage.setItem("time", time)</pre>

<pre>var nClass = Number(localStorage.getItem("nClass")) // to get data from localstorage
for (var i = 1; i <= 5; i++) {
        html += "<tbody><tr><th>" + days[i-1] + '</th>' //days is array containing days of the week.
        for (let j = 1; j < nClass; j++) {
            if (j == nClass/2) {
                html += '<td>' + subjects[Math.floor(Math.random() * subjects.length + 0)] + '</td>' + '<td> Lunch </td>' + '<td>' + subjects[Math.floor(Math.random() * subjects.length + 0)] + '</td>'
            } else {
                html += '<td>' + subjects[Math.floor(Math.random() * subjects.length + 0)] + '</td>'
            }
        }
    html += "</tr></tbody>"
  }
  html += "</table>"
  document.getElementById("tt").innerHTML = html;</pre>

##Displaying table on next page
To display the table on the next page, we'll create a new HTML file and add that function name in on-load in body tag.
Now here comes the role of local storage, in order to get data from previous page we stored it in local storage. Now we can use that data stored to make table.

That's it, now start the app by typing in <code>npm start</code> in the terminal:

![Time table generator running](https://dev-to-uploads.s3.amazonaws.com/i/v5t0d3j3hg3oxgbys4j2.png)

![Timetable](https://dev-to-uploads.s3.amazonaws.com/i/oizceqvrwxcqu9qtr3st.png)

##Bonus
If you want to export that as .xlsx we'll use table2excel.js. For that, you need to install its dependencies. Open the terminal and type npm install bootstrap jquery popper.js xlsx file-saverjs. Make sure to include them in order(bootstrap, jquery then table2excel):

Now add this jQuery function:
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/086keq4stzygcsusdq2i.png)

You can play around and can add more features. This project can be found at: [time-table-generator](https://github.com/krillxox/time-table-generator).