Project 1 - Creating a candlestick chart in Javascript

Since I already took a few courses, it was time to put my knowledge into practical use by programming something using the skills I aquired from Ivan on Tech academy.

When I saw a candlestick chart in the web and found that it had been created in an easy way using the plotly.js Javascript library the idea of my project was born.

To make the project more challenging I added the calculation and drawing of three simple moving averages to the candlestick chart.

So basically the website I created is getting Binance market data via an API call and these data are used to draw a candlestick chart of a Binance market pair including three simple moving averages.

In the last part of my project I did a video documentation which might be useful for others taking the first steps in learning Javascript. I am also only a beginner in Javascript and although I think that I created a decent project there is still much room for improvements. It took me quite some blood, sweat and tears to create everything and I literally spend hours and hours figuring out how things work! Most of the time I used Google to find at least some similar code which would be helpful for my understanding and the project. But in the end I put all the pieces of this puzzle together.

As Ivan once said: “Programming is like LEGO for adults!”

Shoutouts to Ivo and Mauro for their guidance and very useful comments on my project and to Ivan, who gave me the strength to carry on with the enthusiasm he was showing in one of his webinars. Another shoutout to Fabrice for answering my questions and the likes in the forum.

Since I am German, I am not a native English speaker. Please keep this in mind when you are watching my videos. Sometimes my language is not as fluent as it should be. But I recorded each video without cutting it, so I had to start the recording over and over again whenever I was hesitating or did something wrong.

If you want to have a look at my project, here is the link to my GitHub repository:

https://github.com/Ouzo69/api-data-candlestick-chart

These are the Youtube links of my project documentation:

1.Introduction (8:00)

2. Reviews of CSS and HTML file (9:53)

3. Initialization and creating HTML content (11:09)

4. Defining API calls (11:43)

5. Processing API data (9:59)

6. Calculate SMAs and makePlot (10:13)

7. Helper functions and calls (9:10)

8. Live Demonstration (14:00)

And finally the Youtube link to my playlist containing all the 8 videos:

Link to the Youtube playlist “My first Javascript project”

If you don’t have much time you can simply watch the live demonstration to see what this project is all about and how it is working. If you have more time I would recommend to go through the code yourself and try to figure it out. Watching the corrensponding video may help to get some deeper understanding.

Please feel free to leave your honest feedback on my first project in Javascript.

10 Likes

Thank you for your kind words!

I can tell that a lot of work has been put in to this projects. From learning, coding, searching, to making a whole set of videos explaining your progress and actions. I am sure this thread will be very helpful to other students.

I am happy to see our academy has helped you start programming. :smile:

I am proud of you, and.I am looking forward to your next project. :heart:

1 Like

Cool good work :slight_smile:
What would be super interesting is to see if you can pool in also order-book data?

2 Likes

Hello Amadeo,

thank you for your comment. From a technical point of view this would be possible, because order book data are available on the Binance API as well. I already have an idea how to fit these data into the diagram. I will implement your proposal when I will do a future version of the project.

1 Like

@Ouzo69 strong work! I am still at the early stages of the academy and without a background in anything computer-related. I hope to do some learning like this.
Al

1 Like

Wow amazing work man. I just finished the javascript course, I am also a complete newbie to coding as JS was my first ever coding course. I am inspired my friend amazing work!!!