Real-Time Stock Price Tracker in Python

Key Takeaways

what is going on guys welcome back in this video today we're going to build a real-time stock price tracker web application in Python so let us get right into it [Music] alright so here is a motivational preview upfront this is what we're going to end up with this is the real-time stock price tracker and what we can do here is we can add some ticker symbols like for example AAPL or msft so apple and Microsoft or maybe something like Goldman Sachs uh or maybe something like uh let's add a fourth one let's go with uh Nvidia and what we have now here is we have some boxes they are in gray color and the color of these values here basically uh indicates and maybe we're going to change this one because uh the idea was that if you have more than two percent change here you're going to use a different color of red but I wanted this one to be more intense actually so we're going to rework that but what you can see here now is that the numbers are all red and the percentages are all negative because the stock price as it is right now is less than the opening price today and you can see that this constantly changes we have these updates here every 15 seconds and then the stock price if something has changed is updated and the color of the change basically indicates if the prices went up since the last refresh down or stayed the same so if you see a red color a red animation this basically means that the stock price decreased or fell and if you see so now all of them decreased and if you see a green color it means that the price went up and if it's gray uh nothing changed and the idea is that we can have positive values maybe we can look for something uh which stock could be positive today maybe we can go with some Bitcoin so Bitcoin USD I don't think so but yeah there you go Bitcoin is positive so this also works with uh cryptocurrencies you just need to know the correct ticker symbols for the Yahoo finance API but now you have this simple dashboard here and every 15 seconds you get an update on the prices you can also change this time here and of course we can remove here certain symbols I can then reload and the same symbols are going to be loaded so this is what we're going to build today all right so we're going to implement a real-time stock price tracking application in Python today and the idea is to implement it as a flask web application at least the back end the backend will communicate with the Yahoo finance API to get stock price information on demand and our front end if you want to call it that it is basically just HTML CSS JavaScript and jQuery but our front end will communicate with the backend to request information to it needs and a lot of the logic of this application will be in the front end the updating will be done in the front and the storing of the ticker symbols will be done in the front end and the animations obviously are going to be done in the front end the back end will just be used to communicate with the Yahoo finance API and to get to get the stock price information uh so we're going to start here by opening up the command line and installing the python packages that we're going to need today so pip or pip3 install flask pandas and Y Finance in my case all of them are installed already and the next thing that we want to do is we want to create a python file which we're going to call app.py and we're going to import the packages that we need so from flask we're going to import requests we're going to import render template we're going to import jsonify and flask of course itself so capital F flask and before that we're going to also import wide Finance s y f so as I said the back end will only be used for communication with the Yahoo finance API so we're going to have only two endpoints one for rendering the HTML file and the second one for getting the stock price information from the Yahoo finance API so we're going to say Here app equals flask then underscore underscore name underscore underscore template folder is going to be templates and then our two endpoints will be app dot routes is going to be the default route so just a slash the function is going to be index and what we're going to do here is we're going to return render template index.html so nothing fancy here this is all the index is going to be doing and then we're going to have a second endpoint app route you can call this whatever you like I'm going to call it get underscore stock underscore data and this endpoint here will only take post requests so methods is going to be equal to post and what we want to do here is we want to define a function get stock data and here we're going to get from the request we're going to get uh the ticker so we want to get the ticker that we're actually requesting the stock data for the stock price data for so we're going to say here ticker equals and then request we're going to get it as a Json object here and from this Json object we want to get the ticker field so the ticker key value pair to get the ticker symbol then we're going to say data equals Yahoo finance ticker sticker and from that when I get the historical prices periods doesn't actually matter because we're going to only look at today and yesterday or actually only at today um so history period equals uh one year and then we're going to get the last price here or actually we're going to get the data here as the history and then we're going to return here a dictionary object but we're going to jsonify this dictionary object and we're going to return two Fields the first field is going to be the current price of the stock or of the assets so current price is going to be equal to data ilock get the last position so negative one and get from this one the close price and the other field that we're going to pass here is going to be the open price for the opening price whatever you want to call it data ilock again negative one open so the idea is that in order to decide which colors to use we're going to compare the current price which is even if the markets are not closed yet it's going to be the close price here but the idea is to compare that price to the opening price of the day and to then see if it's uh less or more than that so to see what the change is here but this is also going to be part of the front end so this is all the back end is going to be doing and we're gonna say here finally if underscore underscore name underscore underscore equals and then underscore underscore Main underscore underscore then we're going to say app run debug equals true that is our backend this is our flask web application uh and of course we need two equal signs here there you go so in order for this to actually do something now we need to also have um an HTML file a JavaScript uh or not necessarily a file but we need some JavaScript code in that HTML file and the style sheet is optional but we're going to use it or actually it's not optional because we need to of course um add The Styling for the colors so we're going to say here new directory templates and inside of that we're going to have our index.html file and actually what I want to do here to save some time is I want to create let me just delete this here again I want to actually see new HTML file call it index and then I have the templates here already from pycharm we're going to call this your stock uh price tracker and here we can put whatever we like so here's going to be our front and coat so I'm going to add here a heading hello world for example to see that this actually works so we can actually go ahead here run this app open this in the browser and you can see we have Hello World here all right so this works uh fine now the actual logic will not be in HTML it will not be in CSS it will be in JavaScript so what we need to do here is we need to create a second directory outside of templates here so in the working directory and we're going to call this static and in static we're going to have a new Javascript file which we're going to call script.js and here we're going to put uh most of the logic that we're going to use in this video today so this is going to be all the front-end codes the animations the storing and the local storage and the updating in a regular time interval so what we want to do here in the HTML file is we want to actually use that script and we don't want to use that script uh we all we don't want to use just that script we also want to use jQuery so we're going to add three lines here in total the first one is going to link to a style sheet so link relation equals style sheets and the href so the actual path to that style sheet is going to be now we're going to use curly brackets here and we're going to say URL for and we're going to say static and we're going to say file name equals Style dot CSS and this is going to be in single quotations here and of course here we also now need to create a style sheet style.css then we're also going to say uh script source is going to be equal to now this is something I want to copy here from my prepared code this is just a Content delivery Network for jQuery if you don't want to download jQuery and save it locally you can just pass a link so that it loads jQuery from that link and this link is what I'm copying now into my clipboard so just that code jquery.com jQuery Dash 3.6.0. Min Point JS or dot Js um that is the script that we load here for jQuery and then we're going to load a second script and a source for that second script is going to be equal to curly brackets URL underscore 4. here again static and um and file name equals script.js so that is basically it and uh what we're going to have here by default without JavaScript in the HTML file is going to be a simple form so this form what it's going to do form action or actually we don't need an action we're going to just say form ID equals at ticker form the reason we don't want to have an action and a method here is because all of this will be done in JavaScript so this is going to be a form but the actual request is not going to be sent by submitting that form it's going to be sent by uh using JavaScript so JavaScript is going to react to button clicks and then it will send requests uh in in the JavaScript code um here what we want to have is want to have an input type text the ID of that input is going to be new Dash ticker the placeholder is going to be at ticker as a texture and this is required so this is something that has to be passed here and then we're going to have a button type equals submit is going to be at and that is it now what we also want to add here is we want to add the text for the timer so next update in whatever amount of seconds so p is going to have the ID timer here and it's going to say next update in then we're going to have a span here the span is going to have the ID counter it's going to be empty here because we're going to fill it with JavaScript seconds and then finally want to have a div box here the ID is going to be ticker tickers Dash Grit and here we're going to put all of our tickers so that is what we have by default the static HTML and now the rest will be introduced with JavaScript so on button click we're going to add new boxes to the grid so we're going to start here by initializing a couple of things first of all tickers is going to be Json dot parse and we're going to parse the local storage because the idea is we're not just going to keep track of the tickers in a temporary list we're going to take the tickers and we're going to store them in local storage in the browser so this is not the same as storing it in in a file at the server site we're doing is this in the browser so this is actually something that happens on the user side if this server is running somewhere in the cloud this will happen on my PC on the user PC so json.parse and we're going to say local storage and then dot get item and we want to get tickers or so we're going to add two pipes here or an empty list semicolon so we're going to take the tickers here either an empty list or what we have already in the storage and then we're going to say also last prices is going to be here empty and empty dictionary and then we're going to say also VAR counter our countdown timer and you can say how many seconds um here you can set the number to how many seconds uh you want to have in between the reload so I'm going to say 15 seconds here but you can also reload every 10 seconds or every minute so every 60 seconds I'm gonna go with 15 here uh just because I want to show you something in the video if I was using this here as my actual stock price ticker dashboard I would probably do something like 60 seconds I think that's enough because I'm not doing high frequency trading and if you're doing high frequency trading this is not the right tool for you so those are the variables here now we're going to create a function which we're going to call start update cycle and the idea of that function here is to update the prices we're going to Define that function down below so update prices and uh we're gonna say here also countdown so bar countdown is going to be equal to set interval and we're going to define a function here and this function we're going to say if or actually first of all uh we're going to start by decreasing the counter so counter minus minus is the same as saying in Python counter minus equals one but what we want to do here is want to say dollar is now jQuery dollar and the ID of that number was counter so this uh span actually this is uh this one here this span is the counter span so we want to take this and we want to set the text of that to counter and then what we want to do next is we want to say if the counter goes below zero so if it's actually less or equal to zero so if it reaches zero not if it goes below zero then what we want to do is want to update the prices again this is a function again that we have to implement first I'm going to update the prices and the counter will be reset to 15. so it will start again and all this will be done here every second so we're going to say here set interval 1000 so that we basically uh decrement the counter every second by one and then every 15 seconds all of this will repeat this is the start update cycle function now what I want to do next is we want to say here dollar we want to Target the document we want to say when a document is ready so basically when you load the page we're going to say here function curly brackets and in here we're going to say tickers that we have already loaded up here from the local storage or as an empty list for each of those stickers so tickers for each I'm going to say function which is going to take ticker as a parameter since we're doing for each add ticker to grit and this will be another function that we defined here in a second so add ticket to grid will basically take the ticker symbol gets the information and then it will put it as a HTML element inside of the inside of the web page right so it's going to put it inside of this ticker script um and then we're going to of course every time update the prices when we load the page now what we're going to do here now is we're going to say dollar at ticker form um remember we didn't specify here any method or action so we're going to handle this here in JavaScript now when this form is submitted so basically add ticker form submit we're going to have the function which takes e think this is event um we will say e prevent default to make sure that we can do um we can Define the behavior in a custom way we're going to say here VAR new ticker is going to be equal to dollar we Target now the element with the ID new ticker so new Dash ticker you can always look into the HTML file to see what that is this is of course the input type text here we take this new ticker symbol we get the content so we take the value of this we turn it to uppercase I don't know if that's even necessary but we're just going to do it here to be safe so we're going to take the content we prevent when someone clicks that submit button we prevent the default functionality happening what we do instead is we get the content of the input and we're now going to say if the tickers don't already include this so if um exclamation mark to say not so if tickers includes this new ticker if it's already part of the tickers list and and then we add an exclamation part in front of exclamation mark in front of it to say if it's not already part of the tickers then what we're going to do is we're going to say tickers push we're going to add the new ticker to the tickers list all right and then we're going to say local storage set item I'm going to update basically the tickers in the local storage by saying Json stringify and then tickers all right so basically this is what we do to make sure that next time we load the page here we get an uh the current version of the tickers here all right and then what we're going to do is we're going to say at ticker to grit again new ticker this is basically what we already did up here but again this function needs to be implemented so we don't have it yet add sticker to grid now after all this after this if statement here we're going to say dollar new Dash ticker we're going to basically clear this thing again so we're going to say value is again empty so that we can insert the next occur then we're going to say update prices so every time we actually add a ticker it's going to update the prices and again update prices is also not implemented yet so we're working with two functions here that we don't have implemented yet but you can think you can already imagine what they're going to do so update prices is going to just refresh the prices and do some animation and add ticker to grid will just take the ticker symbol and add it to the grid so we just assume that those will work later on when we're done with the code then we're going to say here dollar and then we're going to Target the ticker script when we click on it so on let me just write this like that on click and we're gonna have here uh specifically um in inside of the inside of the stickers grid here we're going to have boxes we're going to have individual ticker boxes for the individual stocks and inside of those boxes we're going to have buttons that we can click to remove the tickers uh from the local storage and this is what we want to handle here in the document ready part you want to say if someone clicks on something it has a class remove dash button and this is going to be a class this is not an ID because we can have multiple of those buttons what we're going to do here is we're going to associate this with a function and this function will basically say variable ticker to remove is going to be equal to we get now the element that was clicked so this and the element it was clicked will have data and the data will be the ticker the actual ticker that has to be removed so this is actually something that we're going to add when we add this to the grid so we're going to say add ticker to the grid we're going to add a remove button which will have this ticker and then we will be able to remove that by targeting the sticker symbol here so check it to remove removes the ticker then we're going to say tickers is ticker's filter and want to get all the tickers except for this one that has to be removed so t with an arrow here so T and T is not allowed to be so exclamation mark equals equals ticker to remove so this is not a equal to or greater than this just means T like a little bit like a Lambda expression we have the T and for the T we want to make sure that t is not equal to the ticker to remove so we basically just keep all the tickers that are not the ticker to be removed we remove the ticker and then we say local storage dot set item so basically we can copy this here we're just updating this into the storage and then finally we have here dollar and then um the ID dollar and then thicker to remove remove now my prepared code I have back ticks I'm not sure if this is necessary because we have um the hashtag and a dollar I'm just gonna do it here because I'm not that experienced in JavaScript so I'm gonna use backticks here maybe that's even necessary but what we do here is basically get the ticker to remove we get the actual um field that has the ID of that ticker if we remove that uh from from the page so actually we do it here like that um and that is what we're doing here the only thing we need to add to now in the document ready section is start update cycle so what we defined up here this update cycle will be started at the end here all right so now we're going to Define all these functions that we were constantly talking about or basically the two functions that we were constantly talking about the first one is going to be quite simple the add ticker to grid is just going to add HTML elements to the grid the second one is going to be more comprehensive because it will do all the logic and also all the animation so I'm going to actually go ahead here and we're going to say function add ticker to Grit it takes a ticker as a parameter and what it's going to do is it's going to Target the ticker grid so we're going to say here hashtag ticker Dash Grit and want to append to this grid now a new diff box so let's use backticks here again we're going to use a diff box and a diff box we'll have an ID the ID will be the idea of the ticker so we're going to use your dollar uh dollar ticker and then what we want to do is we want to say that the class of this this is for design purposes is going to be a stock Dash box and then what we want to do is we want to how do I best format this so that you can see this let me just add some blank lines here so in that div box we're going to have a heading so I'm going to say H2 and H2 is going to display the ticker the ticker symbol so just dollar ticker and after that we want to also have the price and the percentage change so p a paragraph is going to be ID equal to and then dollar curly brackets thicker and then Dash price so for example AAPL Dash price and this is going to be the ID and we're going to add the content of this in the update price function so we just add the HTML element but the actual content will be added by another function and then we're also going to say here p and then ID is going to be equal to hashtag and then uh or actually that is not going to be hashtag it's going to be dollar and ticker and let's call this just PCT for percentage change so PCT and we can close this off and in the end we also want to have a simple button and this button is going to be the remove button so we're going to say here button class equals remove dash BTN and here we now say data Dash ticker equals and we're going to add here a dollar ticker this is what we're targeting up here when we click on a remove button we get the data we get the ticker data ticker and then we know which one was actually clicked because this is not an ID we have multiple of those buttons um so yeah that's going to be that the text is going to be removed and that is basically it we just say button and diff now so like this there you go so for a little overview here we have a div box with a class stock box with the ID ticker inside of that we have a heading that displays the ticker symbol with a paragraph with the ID ticker price a paragraph with the ID take a percent and then we have a button that is a remove button with the data ticker all right so that is basically the ad ticker to grid button we just append such a new div box for every single ticker symbol now all the magic all the logic will now happen in this final function the update crisis function which is why we do it last so we used it a couple of times here remember we used it here we used it uh here here and here and now we're going to Define it so this is the function and we're going to see now that what we're going to do here is every time we call this function we're going to iterate over the ticker so tickers dot for each we're going to have the following function here the function is going to take the individual ticker symbol and what we're going to do here now is we're going to say dollar dot Ajax and we're going to actually make a request now to our backend so in here in the curly brackets we're going to say URL we're going to pass here slash get stock data this is the endpoint that we had in our flask application here this one so URL is slash get stock data the type of the request is going to be a post request so just post the data that we're going to pass is going to be just a ticker symbol but we're going to pass it as a dictionary so Json Dot stringify string stringify there you go and we're going to pass here a dictionary with the key ticker and the value the respective ticker symbol that was passed here as a parameter that we're currently working through then we have the content type this one is going to be application [Music] slash Json semicolon character set so charge set equals utf-8 and then the data type is going to be Jason all right so this basically sends a post request now to our backend to our flask application and what we want to Define here is what happens in the case of success and we do that here's another field in this Ajax dictionary here so we say after data type we have success colon what happens if we have success this is a function now and this function takes some data this is going to be to be the responses it's going to be the result of that function so it's going to be a Json object with current price and open price and what we want to do with all that is we want to say variable change percent so we calculate now the difference the percentage difference between the current price and the opening price so we say data current price minus data open price and we divide that by data open price and we take the result and we multiply it by a hundred or actually we yeah multiply by 100 like this uh what's the problem here there is no problem okay then we say a variable here is going to be color class and the color class the basic idea here is and this is what was not so good in the preview because I chose a tone of red to represent high or to represent large losses which was barely visible so we're going to change that here but the idea is that we have a color class and the color class is determined by the percentage change so if we have uh large increases in the price we're going to have so if the price uh Rises a lot jumps a lot we're going to have a strong green and if it just Rises a little bit we're going to have a a weaker green and then we're going to have gray for neutral and we're going to have red or strong red for losses and we're going to just create this color class here and then we're going to say if and then change percent is less than or equal to like this less than or equal to negative two then we're going to choose a strong red so I'm going to say color class and I chose here in my prepared code light red I think I'm going to go with dark red now so dark red is going to be the color class here then we're going to say else if I'm going to say change percent is below zero in this case it's going to be just red um then we're going to say else if change percent is less than or actually equal to zero if it's exactly zero nothing changed then we're going to say it's gray and let's copy this here color class is going to be if it's above um actually we have to say if it's less or equal to two percent then we're going to have just green and finally otherwise we're going to give it a dark green so color class is going to be dark green all right and this color class will determine the color of the box that we add and we're going to now say here after this after this um color definition we're gonna Target the individual parts of that ticker symbol rectangle or box so we're going to say here Target with back ticks hashtag dollar #dollar where's my dollar here's my dollar ticker price and we're going to say that the text is going to be um dollar dollar and then data current price to fixed two so that we can round it to two decimal places and then we can copy this we can do the same thing here with percent but we're going to do that here instead of data dot current price we're going to just say it right away change percent like this and we only need one dollar symbol here because of course this is dollar this is the actual dollar symbol that we want to see and this is the dollar that we need for jQuery and here we have a percentage so we don't need that but we're going to add a percentage sign in the end here and then finally we also want to add classes so we actually want to change the color here and what we want to do is we want to say let's start with the price here we're going to remove a class in the class we want to remove here is every class that it could have from before so I want to say here lights or actually what do we have here we have dark red red gray green and dark green so we remove all the classes that it could have and we add the color class so add class I'm going to add here to color class and we do the same thing for the percentage all right and then finally what we want to do is every 15 seconds when we update we want to see if the price has changed not since the opening price or not just if but how the price has changed not compared to the opening price but to the last price to the last refresh price and for this we're going to say flash class or you could also call this animation class if and then we say last prices ticker is larger than data current price if that is the case the flash class will be ret flash like this and all this will be defined in the CSS in a second here else if if the last prices ticker is less than data current price if that is the case I'm going to say flash class equals Green Flash and otherwise what we're going to do is we're going to say it equals gray flash so gray Dash Flash and afterwards of course we want to update the last price because now the new price is the last price so ticker is equal to data current price so last price is ticker is equal to data current price and then of course what we want to do is we want to do the animation so we target here with dollar um and then here backticks hashtag and then dollar again ticker at actually here at class flash class whatever we decided that the right class is here and then we say set timeout timeout function and this function we remove the class again so we just want to keep it there for one second so we say um again let me just copy this here we target the ticker again but we remove the class flash class this all right and of course this happens here for one second so 1000 milliseconds and that is basically it now we need some semicolons here and that is basically it now we just need to add the respective uh things to the uh to the style CSS file now let me just see if I am missing something here because I have the countdown let me just check in my prepared code if I'm doing something with it or if it is actually not important no actually I think this is I don't even know if we need that let me just remove this maybe it works without this as well so for the CSS file I'm going to be honest with you this is written by chatgpt the CSS file is always when I do a tutorial you can expect the CSS file if there is one to be written by chatgpt now I sometimes use chatgpt for a little help when I write the code but in general I write my code when I prepare the videos myself but CSS code definitely not so what I'm going to do here because I'm not interested in CSS at all is I'm going to copy uh the CSS code here I'm gonna go through it explain the individual things but I uh would recommend you to just pause the video and look at the code and write it uh from the screen I'm not gonna write it myself here because I really don't enjoy doing CSS so I'm going to just copy this here into my clipboard and that's the basic idea so this is just some basic uh styling here display Flex Flex wrap wrap for the ticker script so here again also just The Styling for the stock box and here we have some colors for the different color classes the only interesting thing actually here is this and I actually don't think that we need this one here red flash green flash and gray flash are the only classes here where we do have some logic in here and this is the transition basically so transition background color one second and then we have the different colors here that you can see on the left and here are the colors that we use now for uh actually we need to change that let me just we need to change it because we changed the names in the code so in the JavaScript we set that we have the class as dark red red gray green dark green and now we have light red so we need to say just red this is just red then we have dark red and the dark red is going to be a darker red so it's going to be something like maybe eight eight zero zero zero zero yeah then we're going to have just green and green is going to be just this maybe a little bit darker let's do BB and then dark green is going to be uh maybe six six there you go all right so this should work now and as I said this is the interesting part here so let me just scroll through it one more time one two three there you go all right and I think if I didn't make any mistakes this should already work now let's see if we have any bugs in here I'm going to open this in the browser and I'm going to add a ticker symbol AAPL I'm going to add it nothing happens great so I do have a bug here let's see what the console says do I send any requests here yes and I also get a response but for some reason nothing is added here okay I think I found two mistakes the first one here is that in the function add ticker to grid we have ticker grid instead of ticker's grid which is the correct ID and up here in the ready uh section we have ADD ticker to grid but we don't pass the ticker which is of course not correct so if we now run this this should work let's see let's add Apple and Microsoft and BTC Dash USD and Goldman Sachs and Nvidia there you go so you can see here basically every 15 seconds and of course every time I add a new ticker symbol as well but every 15 seconds this whole thing updates and you can see a color it's great if nothing has changed and it's red if the price has changed uh negatively since the last time green if it changed positively since the last time and the general color that we have here represents the percentage change since the opening price so yeah and of course I can remove some things here I can reload the page and the things are still here so yeah this is how you build a real-time stock price tracking application in Python so that's it for today's video I hope you enjoyed it and hope you learned something if so let me know by hitting a like button and leaving a comment in the comment section down below and of course don't forget to subscribe to this Channel and hit the notification Bell to not miss a single future video for free other than that thank you much for watching see you next video and bye