JavaScript Frameworks
⇨ Angular.js ⇨ Node.js with Edge.js

Angular.js
Client-side MVC apps
⇨ Rail Departure Board ⇨ Car History

Rail Departure Board

Departure Board


This Angular.js-based web app securely retrieves and parses live multi-layered JSON data from the National Rail Darwin API, to provide personalised train running info for my morning and evening commutes.

The data is displayed in a responsive Bootstrap 3-based page which shows expected departure times/platforms and whether the previous trains left on time.

A link to the source code is available at Codepen.
Please note that availability and accuracy of the data is dependent on third party services.

Car History

In this example, Angular.js was used to create a searchable & sortable library of my personal car history. The dataset model is separate from the controller, and is retrieved using JSON.

Thanks to Angular's data binding, keyword search can be combined with the sortable functionality - so for example, you can choose to only view cars with a 1.8L engine in order of their 0-60 times.

Sort by:

Search for:

  • {{car.name}}

    {{car.specs}}


Node.js with Edge.js
Using server-side JS to manipulate a SQL database from an HTML form

The brief:

Build a signup form for an email newsletter using Node.js.

The process:

On the client side, there is an HTML form which performs a JS function when submitted. This function appends the form value to the site URL as part of the query string.

On the server-side, there is a listening Node server. When the server receives the query string, it extracts the email address and generates the current date and time.

Using Edge.js, the script inserts the user-submitted data as an entry in a SQL database. The server then sends a welcome email using Nodemailer and writes a confirmation message which is displayed to the user.

An "unsubscribe" feature is also present which uses form data to update the relevant database entry with an "unsubscribed" flag.

View source code:
Client HTML Client JS Server JS