Coding project (Stock Price Display)

Project Introduction

1. Pick a problem that can be solved with simple code.  Maybe this is a calculator, or an app to track and predict the outcome of the many upcoming elections in Canada and the US.  Don’t be too ambitious!  Don’t spend your life designing a slick graphical interface if you are relatively new to coding or python  The point of this is to demonstrate (or learn) skills, not to design an incredibly complex program.  

2. Flowchart the steps that your program will have to take to work through the problem.  Do this BEFORE you code anything!  This will help you plan your code.

3. Write the code.  Make sure that you are commenting your code as you go.

Debug the code.

With this project I have demonstrated my skills in all three skills along which I will prove in this blog post along with a code explanation and how to set a website up for yourself.

Pt. 1 Flowcharting

I came into this project with some superficial coding experience mainly focused in Game Development in Unity and Unreal Engine using the C# and C++ languages respectfully. This experience didn’t transfer in the best way towards website and program creation but my experience in creating UIs for video games really helped in creating the CSS file for my program. So with this in mind I thought I would create a UI focused program revolving around stock tickers. Once I had decided on this problem to solve I created this flowchart:

To expand some one of the notes on this Flowchart I’ve attached a link to my code here:

If the embedded code doesn’t work here is a link to the code for you to browse at your own leisure: https://replit.com/@joezhang27/Stock-ticker?v=1#main.py

Pt 2. Code Explanation and Analysis

Code filename: main.py Folder: N/A

This file is referred in my flowchart as the Backend. The first lines of code imports items from the yfinance and Flask packages; on that note for this code to work you must first Import the yfinance, Flask, and pandas packages. Moving onto the 4th line this is identifying where to find the html file called index. So for this code to work you must either change the code to your template folder or name the folder “templates”. The code after basically defines the terms used throughout the code including CurrentPrice or ticker. Lastly, the end code gives me ways to debug the program as it creates error messages that helps you find out the problems.

Code filename: index.html Folder: templates

This HTML code identifies the CSS file it’s name and folder. Also it adds buttons for “new ticker” and “add ticker” and “submit”. It also adds a timer that counts down from ten a important factor that will come up later.

Code filename: script.js Folder: static

Pt 1.

This snippet of the largest part of the code identifies the timer intervals that we covered in the HTML file. Also it states that tickers added go into the ticker grid identified in the HTML file as well. It also adds functionality to the buttons of add and remove ticker.

Pt. 2

This last part of the identifies what a “stock box” is a item important to the CSS file. Secondly, this part of the code identifies how the stock prices update and the color of the font that displays the percentage change throughout the day. Switching between dark red, red, grey, green, and dark green based on how much the percentage changes and in which way. And when the updates happen being 10 seconds in this instance.

Code filename Style.css Folder: Static

This CSS style code basically is the UI that is present on the website along with classifying all the colors and adding animations of red, green, and grey flashes based on if the prices changed and in which way once the prices are updated. Also in this code the sizes and appearances of the ticker boxes can be edited.

Conclusion

In conclusion, this project was a pretty cool challenge for me and has totally improved my coding skills and really helped me improve my problem solving skills as this project had a lot of errors along the way and solving those problems gave me a really good sense of satisfaction. If you choose to make this yourself changing the settings in the CSS and HTML files can really spice up your website.

Thanks for reading!