diff --git a/README.md b/README.md index 949b5e4..b33beb3 100644 --- a/README.md +++ b/README.md @@ -1,23 +1,20 @@ -# Crypto Currency Tracker +# Cryptocurrency Tracker with React JS, Material UI and Chart JS -## Featues Todo +## [Watch Full Tutorial on Youtube here](https://youtu.be/QA6oTpMZp84) -- [x] Design Similar to https://www.binance.com/en -- [x] Charts for historical data -- [x] carousel for trending coins -- [x] Market Capitalization | 24h Trading Volume | # of Coins -- [ ] Currency Object +[![crypto](https://user-images.githubusercontent.com/51760520/136682357-5d269bb9-0e36-4f26-a468-fb2963dd9468.png)](https://youtu.be/QA6oTpMZp84) -## Table Rows +## Demo +#### Here is a working live demo : https://crypto-hunter.netlify.app/ -- [x] Star | Coin | ID | Price | 24hChange% | Market Cap +## Built with -## Optional Features +- [React JS](https://reactjs.org/) +- [Material UI](https://v4.mui.com/) +- [Chart JS](https://reactchartjs.github.io/react-chartjs-2/#/) -- [ ] Firebase Authentication -- [ ] Add to Wishlist +## Made with ♥ By [Roadside Coder](https://www.youtube.com/channel/UCIPZVAwDGa-A4ZJxCBvXRuQ) -## Pics +[![Piyush Agarwal](https://avatars1.githubusercontent.com/u/51760520?v=3&s=144)](https://github.com/piyush-eon) -- Banner - https://www.freepik.com/free-vector/gradient-network-connection-background_12643219.htm#page=1&query=futuristic&position=3 +MIT © [Piyush Agarwal ](https://github.com/piyush-eon) diff --git a/public/banner.jpg b/public/banner.jpg deleted file mode 100644 index 7d7da67..0000000 Binary files a/public/banner.jpg and /dev/null differ diff --git a/public/gradient-network-connection-background.zip b/public/gradient-network-connection-background.zip deleted file mode 100644 index 5737b06..0000000 Binary files a/public/gradient-network-connection-background.zip and /dev/null differ diff --git a/src/components/CoinInfo.js b/src/components/CoinInfo.js index 87e15f3..126ae68 100644 --- a/src/components/CoinInfo.js +++ b/src/components/CoinInfo.js @@ -16,6 +16,7 @@ const CoinInfo = ({ coin }) => { const [historicData, setHistoricData] = useState(); const [days, setDays] = useState(1); const { currency } = CryptoState(); + const [flag,setflag] = useState(false); const useStyles = makeStyles((theme) => ({ container: { @@ -39,7 +40,7 @@ const CoinInfo = ({ coin }) => { const fetchHistoricData = async () => { const { data } = await axios.get(HistoricalChart(coin.id, days, currency)); - + setflag(true); setHistoricData(data.prices); }; @@ -62,7 +63,7 @@ const CoinInfo = ({ coin }) => { return (
- {!historicData ? ( + {!historicData | flag===false ? ( { {chartDays.map((day) => ( setDays(day.value)} + onClick={() => {setDays(day.value); + setflag(false); + }} selected={day.value === days} > {day.label}