Javascript App - Speed Limit

Posted on with tags: web development / javascript

I am reading Eloquent Javascript book by Marijn Haverbeke. It is a fantastic book, and some people describe it as “a work of art”. It is probably the best programming book I recently read. The whole book is freely available on the website in HTML and PDF formats.

Here is a quote at the beginning of Chapter 1 written by the author. It reads more like a poem rather than a sentence from a programming book.

Below the surface of the machine, the program moves. Without effort, it expands and contracts. In great harmony, electrons scatter and regroup. The forms on the monitor are but ripples on the water. The essence stays invisibly below. - Master Yuan-Ma, The Book of Programming

When I am reading Chapter 18 HTTP and Forms, I find that I can easily write a javascript app showing a speed limit sign. The speed limit is controlled by an option in a dropdown control.

Speed Limit Sign App

image/svg+xml

Select Speed Limit:

How Does It Work?

The speed limit sign was created with Inkscape and OpenSignTool. The SVG file has 17 layers for different speed limit numbers from 5 MPH to 85 MPH.

When the page loads, the javascript program picks a random speed and turns on the SVG layer with that speed. When a user chooses a speed on the dropdown box, the program turns off the previous layer and turns on the chosen layer. You can view the code by right click the webpage and choose “View Page Source” menu.

Next step for the app is to add another dropdown control for file formats (SVG, EMF, PNG) and a download button for user to download a file to local computer.

I also referenced those two online articles when working on this blog post.

  1. Using Javascript With SVG by Peter Collingridge.
  2. Making SVGs Responsive with CSS by Sara Soueidan.