api calls, currency conversion commit

src/App.js

@@ -10,11 +10,13 @@ function App() {
   return (
     <div className="App">
       <Navbar/>
+
       <Routes>
+        <Route path='/' element={<Home/>} />
         <Route path='/login' element={<Login/>}/>
         <Route path='/signup' element={<Signup/>}/>
       </Routes>
-      <Home/>
+
     </div>
   );
 }

src/Requests.js → src/CryptoRequests.js

@@ -3,12 +3,14 @@ import axios from "axios";
 const API_KEY = '4d100bb424mshaaaecf4bd1066f5p1b5cb0jsn7cc8632e6b51';
 const BASE_URL = 'https://coinranking1.p.rapidapi.com/coins';
 
-const api = axios.create({
+const crypto_api = axios.create({
   baseURL: BASE_URL,
   headers: {
     "x-rapidapi-host": 'coinranking1.p.rapidapi.com',
     "x-rapidapi-key": API_KEY,
   },
 });
 
-export default api;
+
+
+export default crypto_api;

src/ExchRate.js

@@ -0,0 +1,17 @@
+import axios from "axios";
+
+const API_KEY = '4d100bb424mshaaaecf4bd1066f5p1b5cb0jsn7cc8632e6b51';
+const BASE_URL = 'https://currency-converter-by-api-ninjas.p.rapidapi.com/v1/convertcurrency';
+
+const exchRate_api = axios.create({
+  baseURL: BASE_URL,
+  headers: {
+    "x-rapidapi-host": 'currency-converter-by-api-ninjas.p.rapidapi.com',
+    "x-rapidapi-key": API_KEY,
+  },
+  params: {have: 'USD', want: 'INR', amount: '1'},
+});
+
+
+
+export default exchRate_api;

src/components/CurrencyConvertor.jsx

@@ -0,0 +1,26 @@
+import React, { useEffect, useState } from 'react'
+
+const CurrencyConvertor = () => {
+
+    function CurrencyConverter() {
+
+    const [exchangeRate, setExchangeRate] = useState(null);       
+
+
+    useEffect(() => {
+        const fetchExchangeRate = async () => {
+          const response = await fetch( 'https://currency-converter-by-api-ninjas.p.rapidapi.com/v1/convertcurrency');
+          const data = await response.json();
+          setExchangeRate(data.rate);
+        }    
+        fetchExchangeRate();
+      }, []);
+    }
+  return (
+    <div>
+
+    </div>
+  )
+}
+
+export default CurrencyConvertor

src/components/Home.jsx

@@ -1,30 +1,69 @@
 import axios from 'axios'
 import React, { useState,useEffect } from 'react'
-import requests from '../Requests';
-import api from "../Requests";
+import requests from '../CryptoRequests';
+import crypto_api from '../CryptoRequests';
+import exchRate_api from '../ExchRate';
 
 const Home = () => {
     const [coins,setCoins]=useState([])
-
+    const [exchangeRate, setExchangeRate] = useState(null);     
+    const [price,setPrice]=useState(null)  
+
 
 
     useEffect(() => {
-      api
+      crypto_api
         .get("https://coinranking1.p.rapidapi.com/coins")
         .then((response) => {
-          setCoins(response.data.data.coins);
+          setCoins((response.data.data.coins).slice(0,10));
         })
         .catch((error) => {
           console.error(error);
         });
     }, []);
 
-    console.log(coins)
+    useEffect(() => {
+      exchRate_api
+        .get('https://currency-converter-by-api-ninjas.p.rapidapi.com/v1/convertcurrency')
+        .then((response) => {
+          setExchangeRate(response.data.new_amount);
+        })
+        .catch((error) => {
+          console.error(error);
+        });
+    }, []);
+
+    const convertDollartoRupees =(dollar)=>{
+      const result = dollar * exchangeRate;
+      return new Intl.NumberFormat('en-IN', { style: 'currency', currency: 'INR' }).format(result.toFixed(2))
+    }
+
+
     return (
-    <div>
+
+    <div class="container mx-auto py-8 px-8">
+  <table class="table-auto w-full ">
+    <thead>
+      <tr>
+        <th class="px-4 py-2 border border-white border-10 bg-purple-500 text-white">Rank</th>
+        <th class="px-4 py-2 border border-white border-10 bg-purple-500 text-white">Logo</th>
+        <th class="px-4 py-2 border border-white border-10 bg-purple-500 text-white">Name</th>
+        <th class="px-4 py-2 border border-white border-10 bg-purple-500 text-white">Shorthand</th>
+        <th class="px-4 py-2 border border-white border-10 bg-purple-500 text-white">Price</th>
+      </tr>
+    </thead>
+    <tbody>
     {coins.map((item)=>(
-      <p className='text-white'>{item.name}</p>
+      <tr class="bg-white">
+        <td class="border border-purple-500 border-5 px-4 py-2 text-center">{item.rank}</td>
+        <td class="border border-purple-500 border-5 px-4 py-2  "> <img className='h-8 w-8 mx-[40%]'src={item.iconUrl}/></td>
+        <td class="border border-purple-500 border-5 px-4 py-2 text-center">{item.name}</td>
+        <td class="border border-purple-500 border-5 px-4 py-2 text-center">{item.symbol}</td>
+        <td class="border border-purple-500 border-5 px-4 py-2 text-center">{convertDollartoRupees(item.price)}</td>
+      </tr>
     ))}
+    </tbody>
+  </table>
   </div>
 );
 }