Junior Web Developer

Stock Watcher with jQuery and AJAX

December 18, 2018

Made with: jQuery | Bootstrap

Project Summary:

A real time app to watch a portfolio of stocks.

Source Files | Live Demo

Input a selection of stock symbols and the app will display them in neatly laid out cards:

Information refreshes every 10 seconds.

Since each stock occupies half the screen (in medium to large viewports) you can use the app to compare two companies in the same industry at a time, like WMT and TGT, or FCAU and F.

How Does It Work

The app uses jQuery's getJSON method to get information from free API. The getJSON function is wrapped in a function that executes at once and then executes again every 10 seconds via a setTimout() function.

The page styling is done using Bootstrap 4's card class for the individual stock information.

If the user doesn't input a selection of stock symbols the program will load the default portfolio which is hard coded in the stocks.js file. If you want to modify the default portfolio just edit the stocks.js file


If you want to track different KPI's you need to go to the iextrading API and find the endpoints that contains the information you want to track. In my case, the KPI's I have enabled by default: latest price, price change, p/e ratio, dividend yield, ytd change and market cap, are all in either the Quote or the Key Stats endpoints. Just fork the repository and make the changes you want to make.


If you fork this repository and make changes, make sure to preserve the attribution to verbatim:

Data provided for free by IEX. View IEX’s Terms of Use.

tech jquery bootstrap

© 2019 Crafted with Metalsmith and deployed to a DigitalOcean VPS.