Quote from: jordimetil on Today at 12:09:10 AM

Quote from: DaveF on June 03, 2024, 11:09:28 AM

~

i understand your point, sorry i didn't show my intentions more clear. anyways, i want best BTC API to make live bitcoin price tracker for my website.

If you just want free api which allows you display crypto prices, use coingecko's free api (but there are some limitations) you can also pay for better one.

here is code
js

Code:

import React, { useEffect, useState } from 'react';
import './CryptoPriceTracker.css';
import Modal from 'react-modal';

const CryptoPriceTracker = () => {
const [prices, setPrices] = useState([]);
const [selectedCoin, setSelectedCoin] = useState(null);
const [search, setSearch] = useState('');

useEffect(() => {
fetch('https://api.coingecko.com/api/v3/coins/markets?vs_currency=usd')
.then(response => response.json())
.then(data => setPrices(data))
.catch(error => console.error('Error fetching prices:', error));
}, []);

const handleSelectCoin = (coin) => {
setSelectedCoin(coin);
};

const handleSearchChange = (event) => {
setSearch(event.target.value);
};

const closeModal = () => {
setSelectedCoin(null);
};

const filteredCoins = prices.filter((coin) =>
coin.name.toLowerCase().includes(search.toLowerCase())
);

return (
<div className={`crypto-price-tracker-container ${selectedCoin ? 'blurred' : ''}`}>
<h1 className="text-hackerGreen font-pixel">Crypto Price Tracker</h1>
<input
type="text"
className="search-input"
placeholder="Search for a cryptocurrency"
value={search}
onChange={handleSearchChange}
/>
<ul className="coin-list">
{filteredCoins.map((coin) => (
<li
key={coin.id}
className="coin-item"
onClick={() => handleSelectCoin(coin)}
>
<img src={coin.image} alt={coin.name} className="coin-image" />
<span>{coin.name}</span>
</li>
))}
</ul>
{selectedCoin && (
<Modal
isOpen={!!selectedCoin}
onRequestClose={closeModal}
contentLabel="Crypto Info"
className="crypto-modal"
overlayClassName="crypto-modal-overlay"
>
<button onClick={closeModal} className="close-button">X</button>
<h2>{selectedCoin.name}</h2>
<p>Symbol: {selectedCoin.symbol.toUpperCase()}</p>
<p>Current Price: ${selectedCoin.current_price.toFixed(2)}</p>
<p>24h Change: {selectedCoin.price_change_percentage_24h.toFixed(2)}%</p>
<p>Market Cap: ${selectedCoin.market_cap.toLocaleString()}</p>
</Modal>
)}
</div>
);
};

export default CryptoPriceTracker;

css

Code:

.blurred {
filter: blur(5px);
transition: filter 0.3s ease;
}

.search-input {
width: 100%;
padding: 10px;
margin: 10px 0;
border: 1px solid #39ff14;
border-radius: 5px;
background-color: rgba(0, 0, 0, 0.9);
color: #39ff14;
}

.coin-list {
list-style-type: none;
padding: 0;
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 10px; /* Add some space between the boxes */
}

.coin-item {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: 10px;
margin: 10px;
border: 1px solid #39ff14;
border-radius: 10px;
background-color: rgba(0, 0, 0, 0.9);
box-shadow: 0 0 10px #39ff14;
cursor: pointer;
width: 100px;
height: 130px;
transition: transform 0.3s;
text-align: center;
overflow: hidden;
}

.coin-item span {
font-size: 0.7rem; /* Increase font size */
text-align: center;
margin-top: 5px;
white-space: nowrap; /* Prevents text from wrapping */
overflow: hidden; /* Hides overflow text */
text-overflow: ellipsis; /* Adds ellipsis for overflow text */
width: 80px; /* Ensures the ellipsis is shown within the box */
}

.coin-item.selected,
.coin-item:hover {
transform: scale(1.1);
}

.coin-image {
width: 50px;
height: 50px;
}

.crypto-modal {
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background-color: rgba(0, 0, 0, 0.9);
border: 2px solid #39ff14;
border-radius: 10px;
padding: 20px;
box-shadow: 0 0 20px #39ff14;
width: 90%;
max-width: 500px;
box-sizing: border-box;
text-align: left;
}

.crypto-modal-overlay {
background-color: rgba(0, 0, 0, 0.75);
}

.close-button {
position: absolute;
top: 10px;
right: 10px;
background: none;
border: none;
color: #39ff14;
font-size: 1.5rem;
cursor: pointer;
}

.crypto-modal h2 {
margin: 0 0 10px;
font-size: 1.5rem;
}

.crypto-modal p {
margin: 5px 0;
}

/* Responsive adjustments */
@media (max-width: 768px) {
.coin-item {
width: 90px;
height: 120px;
}

.coin-item span {
font-size: 0.65rem;
width: 70px;
}

.coin-image {
width: 40px;
height: 40px;
}
}