Lab 4 — Web Apps

Christian Grewell

Published in

applab 2.0

3 min readMar 5, 2019

Believe it or not, you’ve been exposed to almost all of the basics you need to begin creating web apps.

The ‘cloud’ is mostly Javascript and tubes!

What are we going to build?

We’re actually going to make something useful now (an application to help us figure out the correlation between two arrays of numbers)

The goal is for us to demystify the interactions between JavaScript, the document-object-model used by web browsers and the additional benefits of using a library (e.g., React) when creating web apps. Next week when we dive into ReactJS, you’ll see how much easier this becomes when we only need to deal with Javascript!

Our Basic Application

Our (very) basic web application has the following features:

You can enter numbers to represent each variable
You can add those variables to arrays
You can clear the array
The correlation is displayed in ‘real-time’ at the bottom of the screen

Our first web app

This web app is extremely simple, but potentially useful! Don’t worry if you don’t understand everything in the code, dive in and try to understand how it’s working.

Try it out here: https://coffeetawk-simple.herokuapp.com/

Below is the (unstyled) user interface. It contains all of the bare necessities one would need in order to capture and observe correlations, but fails in a variety of usability tests!

Index.html

Here is the index.html file.

Let’s walk through what each section does.

<head>

<script type=”text/javascript” src=”corellation.js”></script> — links to our Correlation JS file. Putting this in the <head> tag as opposed to the <body> tag means it will load first.

<body>

Next we have embedded Javascript code between the <script></script>tags. This could easily (and should) be moved to an external .js file, but I wanted to show you HTML and JS in a single HTML file. This is common in older web applications, but not a good practice!

Let’s break this down:

We declare two variables (var1 and var2) and set them equal to an empty array.
We create a function expression named addData. This function takes no arguments but does create two variables (var1Output and var2Output) that are references to the HTML tags with the box1 and box2 ID respectively.
Next, we push the values of the HTML ID’s var1 and var2 into the var1and var2 arrays.
Lines 9 and 10 print out the var1 and var2 arrays onto our HTML page.
Lines 12 and 13 clear the values.
Line 14 is where we calculate the correlation and print to the page (we pass in var1 and var2 arrays). Notice that we call another function called getPearsonCorrelation and pass the two variables in). Can you find that function?

The rest of the <body> is comprised of the form element, our data table and the correlation result.

Correlation

Below is the correlation function. I’ve separated this into a stand-alone module that’s loaded in the head tag of our index.html file. This makes sense, as I like to have that .js file available in other parts of my app, and I like to take it around with me to help calculate correlations in other apps!

Conclusion

Go ahead and create a new folder, open VS code and create these 4 files:

index.html
style.css
correlation.js

Now, copy/paste the code above and get everything working. Once you do, move on to re-imagine this example in the context of your side project — for example, maybe you want something that looks much nicer (work on the .css) or you want to calculate something else. Use your imagination.