An unnamed client requested a stock market ticker to be installed in their office. I was responsible for programming the ticker.

Background

The offices would have two displays on opposite sides of its lobby. One is longer than the other, but they were to otherwise function similarly. On each display, the top portion would scroll through various stock indexes, while the bottom portion would show up to three client-specified indexes. All indexes were to update live from a server, and all errors were to handle themselves.

Development

I was put in charge of programming the front-end of the ticker; I had little part in the design of the ticker itself, though I did of course have to translate the design into code.

An unseen difficulty was simply spacing out the elements. I couldn’t just assign the index value, the change in value, and the percent value each set widths because this would inevitably leave indexes with lower values too much space. I couldn’t just let the widths be automatic to the text inside because this would cause all indexes to the right of one to move when it updates, causing the ticker to flinch and jolt left and right. So, I had to either only update indexes to the right of the screen or calculate the widths to keep them constant. Since the client wanted indexes to update live, I had to go with the more difficult latter approach. In the end, I set the padding to the right of each index so that, when its accompanied index changes, it changes size too, keeping everything spaced properly without the padding changing too far from its required size. This required a lot of trial-and-error, though.

I learned a lot through this project about how to work with servers, as this was my first major project that involved XHR. Error-handling and reconnecting to the server was a big hill for me, but with perseverance and a desire to learn, I in the end figured it out.