JavaScript Calculations and Bootstrap

Grade Calculator

the task

This project was undertaken as part of one of my major negotiated tasks for my third and final year at the University of Winchester. The aim of the task was to explore a project of our own choosing to a prototype level. This project required me to try a number of different methodologies and required me to be creative and experimental with my solutions.

One of my aims for this semester was to become more proficient in JavaScript to complement my skills in HTML and CSS, therefore, I knew I wanted to chose a task that required me to push my skills and knowledge.

empathise

I started by analysing what it was I needed from the grade calculator. I identified that I needed the ability to enter in my module grades and my module’s weighting. Not all previous grade calculators I had used gave the ability to add more rows which was one of the reasons I decided to create my own, therefore I knew I wanted to add this feature. I often wanted to test different scenarios of grades, therefore I wanted to ability to be able to reset the inputs and clear all the data previously entered.

research

To gain an idea of current layouts and features, I researched other grade calculators. All the calculators followed a simple column and row layout which I knew would be suitable for my design; however the grade calculators I researched often lacked in any visual design, therefore I wanted to ensure my grade calculator was not only functional but also can a brighter and more exciting design than my “competitors”.

initial designs

After deciding the features that I wanted to include in my grade calculator, I created low, mid and high-fidelity wireframes. I only required one page for my website to be able to work out the grades for my users; however I needed to create wireframes for both desktop and mobile. I went with a mobile-first approach when designing my grade calculator. Mobile design is arguably the most difficult due to being the smallest design, it will only have the essential features.

Using my mobile design I was able to expand the features and give the elements more space when designing for desktop while still ensuring all the essential features were included. The main focus of my low-fidelity wireframes was designing the layout, content placement, navigation and functionality. For my low-fidelity sketches I sketched the different elements on paper for both mobile and desktop.

developed designs

I then used my sketches to produce mid-fidelity wireframes. After developing my skills using Sketch from my skiing app project, I chose to use Sketch again. Using different hues of grey, I was able to show subtle contrasts between elements before the colours had been added. This allowed me to visualise my app and how my users would navigate it before adding any imagery or colour. I used my wireframes to test the structure with other users, including other University students, who were not familiar with the design and gained valuable feedback on my design. This suggested an explanation under the title and before the inputs would be beneficial to understand the purpose of the calculator. I took onboard this feedback and included it in my final outcome.

final designs

Using Sketch, I created my final high-fidelity designs. I designed my website to be responsive so the layout of my page grows and shrinks based on the resolution of the screen, as opposed to designing an adaptive website which would be like having two completely different web sites, one designed to fit on your phone the other designed to fit on your desktop. This was because I knew it would be faster to develop and Google currently recommends a responsive design pattern.

development

The grade calculator was coded using Bootstrap, making use of it’s design templates for typography, forms, buttons and navigation. I chose to use Bootstrap because I initially wanted to focus on the functionality of the calculator before the visual design.

My main reason for using Bootstrap was the speed at which I would be able to develop the front-end of the website. Bootstrap allowed me to use pre-styled components, which allowed me to focus on the functionality of the website before blending my own CSS to style the website to my final designs. I utilised Bootstrap’s Grid System to build the website layouts of all shapes and sizes using a series of containers, rows, and twelve columns to layout and align my website’s content.

Choosing the technology

JavaScript has the ability to perform arithmetic operations including addition (+), division (/), and multiplication (*) which I knew were necessary for the grade calculator, for example I required the addition operator to produce the sum of the weights of the grades. I also chose JavaScript because it is a dynamic programming language that makes up one the core web technologies, and hence I wanted to gain experience in. JavaScript has been a relatively easy language learn due to the syntax being close to English.

element's ID

The first stage of writing the arithmetic operators was finding the elements that had the ID attributes of each of the grade percentages and the weightings. To reduce time needed to write the JavaScript, I shortened the variables down using for example ‘gradeone’ became ‘g1’.

Using the getElementById() method it returned the element that has the ID attribute with the specified value. I had to ensure all the IDs were unique or else using the getElementById() method it would only return the element with the ID that came first in my code. I then attributed the elements to variables which were used to store the data values.

the calculation

Using previous knowledge, and backing it up with research I found the overall weighted grade is equal to the sum of the product of the weights (w) in percent (%) times the grade (g), and when using my element IDs looks like:

Weighted Grade = (weight1×g1 + weight2×g2 + weight3×g3 + weight4×g4 +...) / (w1 + w2 + w3 + w4 + ...)

initial prototype

To practise using JavaScript and how to find elements that had certain ID attributes, perform arithmetic operations, and output a figure. I used my courses weighted grades as an example to work with. I was able to take the inputted grade percentages, and using predetermined weightings that I had written within the JavaScript, I was able to find my overall grade from my second year. A live prototype can be found here.

This allowed me to practise and understand how to get data from an element within my code and how the innerHTML property sets the HTML content of an element (document.getElementById(“x”).innerHTML = “n”; Where x is the ID of the element being set and n is the content being set).

problems and solutions

An issue when writing my arithmetic operators was the outputted grade percentage when rounded to no decimal points was 0% when it should have been 58%; however after gaining feedback from my lecturer I learnt an additional ‘+’ is needed between variables to show they are positive integers.

reset and add rows

The next features I included were the ability to reset the input fields for each of the forms and the ability to add more rows after the initial five rows which are first shown to the user when they visit the website.

Each time the user click the ‘add row’ the ‘idnum’ increments by one which in turn changes the styling of the next form from ‘display: none’ to ‘display: block’ using conditional statements. Using ‘if’ I was able to specify a block of code to be executed if a specified condition was true for example if the display style of ‘x’ is ‘none’, change the display to ‘block’ when x is the ID of an element. I then used an else to specify a block of code to be executed, if the same condition was false.

final outcome

My final outcome is a functioning grade calculator that can be used to work out your overall grade using your percentages and weightings. Users can also add more rows and reset the input fields before entering new data. The final outcome has a clean and simple visual design which doesn’t take away from the functionality. This final outcome is currently hosted at here.

Evaluation and Time Management

Overall, I’m very pleased with the final outcome and I and other students have used my calculator to work out their progress with their University Degree. After this projected I aimed to develop my skills in jQuery because it can be used to reduce the length of code and hence faster to develop compared to JavaScript for example document.getElementById(‘x’); can be reduced to $(‘#x’); using jQuery. I used my weather app project as a opportunity to develop my skills. My use of jQuery can be found here; however, I still aim to improve my skills in using jQuery to make effects and animation on my website.

This project was completed over twelve weeks (18th January - 3rd April) during which I set myself deadlines when I needed to be at a certain stage. For example by week six (18th February) I set myself the aim to have completed my final designs to give myself time to code my grade calculator while coding my weather app at the same time. Also needed to leave time during the last few weeks to collect together my work and display it in my printed and online portfolio. To help keep on top of all my deadlines I used my digital calendar, Todoist (a to do list and task manager), and a Gantt Chart. All three tools allowed me to finish my projects on time.