CyberCoin-Project

My 1st Front-end Portfolio Project from Pursuit 9.4 Class Module 2.
A website where you can see the live updates of Cryptocurrencies datas.

My website deployed on Netlify: https://cybercoin-project.netlify.app/

How it works

The main home page.

On the top of the page, you can see the navigation bar.

The navigation bar on the left top corner.

The navigation bar on the right top corner.

• CyberCoin - To the main page.
  
• Live - Shows the top 100 ranking coins live price update page.
  
• Search - To searh and view the chart of the desired coin.
  
• Home - To the main page.
  
• Resource - Website's data informations, such as API, Bootstrap, etc.
  
• About - Short biography of Me and the link to my GitHub as well as this project repository.
  
• Top - Go to the top of the page.
  
• Bottom - Go to the bottom of the page.
  

And in the center of the page, you can see the "Quick Guide on the navigation bar".

Live

The code is set up to run every 3 seconds.

The data table.

It's organized by its Ranking number, Coin name, current Price, Market Cap, Volume in 24hrs and Change Percentage in 24hrs. All in USD
It changes the color. To BLACK if the price remains the same, to GREEN if the price went up, and to RED if the price went down from previos to current value.

And sometimes you will see the numbers turning to Red or Green even though it looks like there's no change on the price. That is because the api data that it's been given to us, it gives us the number with 18 Decimals Numbers!

Search

In the beginning it's empty since nothing was searched.

Showing empty search.

Then, when you search it, it logs the chart from top to bottom, meaning the second search it will be on the bottom of the first one.
And it logs up to 5 charts. If you search it more then five, it will erase the first chart on the list and add the new one on the bottom.

The search result showing charts (zoomed out to view a few charts).

Ideas for Future Implementations

• Add the pagination on the bottom to list the table view up to 25 rows.
• Add a function to show more details about the coin when the user clicks on the table row.
• Get the images of the each cryptocurrencies and display it successfully besides of its name.
• Add "favorite" icon, so the user can quickly view the one's that it's interested.
• Add a feature to compare prices between coins.
• etc.