README.md

gradeulator

a desktop grade-calculator

⚡ Installation

🎉 Update: Gradeulator was recently ported to a website, click here to check it out. 🎉

Gradeulator is in the final stages of the packaging process and will be available to download (soon™), but for now you can open gradeulator using node.

gradeulator requires nodejs (and aditionally npm). If you don't have it already you can download it here.
1. Fork (or clone) this repository
2. Clone the repository and extract the zip file
3. Using a terminal, cd into the file repository
4. Run npm install to install the dependencies (dependencies are listed below)
5. Run npm start to launch gradeulator

📂 Dependencies

This application is built using HTML/CSS and with Bulma

• Electron: (from their website) "is an open source library developed by GitHub for building cross-platform desktop applications with HTML, CSS, and JavaScript. Electron accomplishes this by combining Chromium and Node.js into a single runtime and apps can be packaged for Mac, Windows, and Linux."

➗ Calculating Grades

Gradeulator is essentially a grade calculator, It takes in inputs of numbers with grades & weights and outputs a final score. Heres the process of how I coded that into a desktop application.

Gradeulator was inspired by the use of constantly calculating grades using numerous grade calculator websites (my favourite being this one.)

1. Non-numeric Inputs
The first challenge of gradeulator was tackling the non-numeric inputs from the user. There were two solutions to this problem. The first solution I thought of was to create a function which goes through all the inputs and remove them if they are non-numeric. This would be done using JavaScripts built in methods. After a quick google search I found out the methods I needed (source: google):

The second solution was to restrict the inputs from the user with controlled keyboard inputs. In the final version of Gradeulator you are only able to enter numeric inputs from 0 - 9. All other inputs such as letters(a,b,c) and characters($^&) will not be registered into the form. (note: Upon further usage of gradeulator, this solution restricts the user from also using keyboard shorts cuts such as ctrl+a to select all or ctrl + -> to move the cursor)

To allow numeric input from 0 - 9, the onkeypress method onkeypress="return isNumberKey(event)" is inserted to call the IsNumberKey() method on every input field.

// this function is used to prevent users from entering non-numeric characters.
// this solution is much easier than going through random user inputs.
function isNumberKey(evt) {
    var charCode = (evt.which) ? evt.which : event.keyCode
    if (charCode > 31 && (charCode < 48 || charCode > 57)) {
        return false;
    } else {
    return true; 
    }
};

2. Organization of Grades
User grades and weightings are inputed and submitted via the calculate button. The Calculate Button is referenced from the DOM and initialized as a variable.
When the calculate button is clicked, the first function called is get_grades()

// this function collects all the grades from the input forms.
function get_grades() {
    var list = [];
    for (i = 0; i < all_form.length; i++) {
        list.push(all_form[i].value);
    }
    return list;
}

get_grades() collects all of the inputs from the inputs forms, appends them to a list and returns the list to the variable dirty_list (dirty in this context means a list that has not been cleaned)

Next, the grades are cleaned (cleaned means to remove unwanted spaces and no entry inputs)

// this function essentially gets rid of empty spaces and no entry inputs.
function clean_grades(list) {

    // this line gets rid of empty spaces
    clean_list = list.filter(Boolean);
    return clean_list;
}

Note: The clean_grades() function consists of just one method and it certainly does not have to be a function of its own, however the seperation of clean_grades() and dirty_grades() was convenient during the calculation process.

After the grades are extracted and cleaned, the list containing the grades can be represented with the image below.

The Image below is a potential sample list from index.js, The grades are the even numbers index (0, 2, 4) and the weightings are the odd numbers (1, 3, 5).

In the context of the image above, The grades are 90.5, 75, and 82.5. The weighting for each grade is 25%, 45%, and 30% respectively.

🔧 Build Customization

1.) App responsiveness

This app was designed with a mobile first approach. The application is responsive and you can resize the app to your liking.

Note: Electron allows you to set different starting sizes for your desktop applications, if you wish to change the app size follow the instructions below:
1. Navigate to and open main.js
2. Find and edit the createWindow function

function createWindow () {
    // Create the browser window.
    win = new BrowserWindow({
        width: 1200, 
        minWidth:500, 
        height: 650, 
        minHeight:500, 
        frame: true, 
        icon: "images/gradeulator.png"})
    win.setMenu(null);

3. You are now able to edit the minimum/maxium height/width.

❗ To-Do List

A list of components to (eventually) add.

• Fix list tabbing error (Fixed October, 9th, 2018)
• Implement app functions on a website (Site is up October, 23rd, 2018)

...
2018 Furqan17
Licensed under MIT