Stock Ticker Bar

This was one of my first projects as a developer for moneymorning.com. So the ticker started out being just for the 3 big indexes (Dow Jones, NASDAQ and S&P). When I took over the task we wanted to do two things, add the capability to see how the stocks associated to that story were performing and second we wanted to move the calls to the API we were using from the front-end to the backend so that we were not exposing our API token.

So to move this from a front end call to a backend call was pretty easy. I just needed to get the correct endpoint from the front end code and use wp_remote_get function to pull in the information, then instead of using js to fill in all of the appropriate elements I simply filled them in on the backend.

Now the cool part of the project was pulling in the posts associated stocks and making that call. To do this we already had a custom taxonomy for stocks so I pulled in the symbol from that particular stock. The endpoint that was provided was pretty convenient and I could  just feed in the stock symbol to the endpoint and that stocks information would be returned as a json object.

ticker-bar

 

I went ahead and showed something like this on each post page, then on other pages like the front page, archive pages ect. I would just show the original ticker bar with the main 3 index’s.

ticker-bar

default ticker
This is the ticker that will be displayed when no stocks are associated to the story or it isn’t a post page.

Now the hard part was the visual scrolling across all the different tickers. The tickers could have different widths depending on the information that was pulled. I thought it might be a good idea to make the boxes fixed widths but then it looked odd for the boxes that had less content in them. I have to give some credit to one of the other developers in the office who gave me some ideas and code to get it working the way it does now but we still had to hide the whole feature on mobile because of the difficulties with responsiveness. You’ll also notice (if you click on the picture directly above) that on certain stories that if you scroll all the way to the right there is a large gap between the last ticker and the arrows.

Overall this was a pretty fun task, that taught me a little bit of making API calls in wordpress and some nifty js tricks…