Assignment: Using HTML and JS
Exercise.html
<html>
<head>
<title>Fetching API</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>
<body>
<table id="Coins20">
<tr>
<td>Rank</td>
<td>Name</td>
<td>Ticker</td>
<td>New Coin</td>
</tr>
</table>
<script>
$(document).ready(function(){
fetch("https://api.coinpaprika.com/v1/coins")
.then(response => response.json() )
.then(coins => {
for(let i = 0; i < 20; i++){
let coin = coins[i];
$('#Coins20').append(
`<tr>
<td>${coin.rank}</td>
<td>${coin.name}</td>
<td>${coin.symbol}</td>
<td>${coin.is_new}</td>
</tr>`
)
}
});
})
</script>
</body>
</html>
Additional(Not yet working): I’ve done this in a test project before for an interview (WebSockets instead of APIs) Unfortunately, I failed, but I learned a lot.
IDK if this would work but I started off with this then pass the props onto the App.js and import the CoinTable.jsx there as well. coins can be destructured as well into other components
CoinTable.jsx
import React from 'react'
export default function CoinTable({coins}) {
return (
<>
<p>{coins}</p>
</>
)
}
export const getServerSideProps = async () => {
const res = await fetch(`https://api.coinpaprika.com/v1/coins`)
const coins = await res.json()
return {
coins
}
}
I would love to hear feedback and corrections! 
some feedback
But I did it, LOL