Time Buttons - Copy this React, Tailwind Component to your project
<!DOCTYPE-html>-<html-lang="en">-<head>-<meta-charset="UTF-8">-<meta-name="viewport"-content="width=device-width,-initial-scale=1.0">-<title>Crypto-Bubbles-Visualization</title>-<link-rel="stylesheet"-href="style.css">-</head>-<body>-<div-class="header">-<div-class="time-buttons">-<button-class="time-btn-active"-data-period="1h">Hour</button>-<button-class="time-btn"-data-period="24h">Today</button>-<button-class="time-btn"-data-period="7d">Week</button>-<button-class="time-btn"-data-period="30d">Month</button>-<button-class="time-btn"-data-period="1y">Year</button>-</div>-<div-class="search-container">-<input-type="text"-id="search"-placeholder="Search-cryptocurrencies...">-</div>-</div>-<div-class="bubbles-container">-<div-class="loading">Loading-cryptocurrencies...</div>-</div>-<script-src="script.js"></script>-</body>-</html>-const-COINGECKO_API-=-'https://api.coingecko.com/api/v3';-const-bubblesContainer-=-document.querySelector('.bubbles-container');-const-searchInput-=-document.getElementById('search');-const-timeButtons-=-document.querySelectorAll('.time-btn');-let-cryptoData-=-[];-//-Define-min-and-max-bubble-sizes-const-minSize-=-50;-//-Minimum-bubble-size-in-pixels-const-maxSize-=-150;-//-Maximum-bubble-size-in-pixels-async-function-fetchCryptoData()-{-try-{-const-response-=-await-fetch(-`${COINGECKO_API}/coins/markets?vs_currency=usd&order=market_cap_desc&per_page=100&sparkline=false&price_change_percentage=1h,24h,7d,30d,1y`-);-const-data-=-await-response.json();-cryptoData-=-data;-renderBubbles(data);-}-catch-(error)-{-bubblesContainer.innerHTML-=-'Error-loading-data.-Please-try-again-later.';-console.error('Error:',-error);-}-}-function-renderBubbles(data)-{-const-period-=-document.querySelector('.time-btn.active').dataset.period;-const-searchTerm-=-searchInput.value.toLowerCase();-const-filteredData-=-data.filter(coin-=>-coin.symbol.toLowerCase().includes(searchTerm)-||-coin.name.toLowerCase().includes(searchTerm)-);-//-Find-the-min-and-max-percentage-values-for-scaling-const-percentages-=-filteredData.map(coin-=>-Math.abs(getPercentageChange(coin,-period)));-const-maxPercentage-=-Math.max(...percentages);-const-bubblesHTML-=-filteredData.map(coin-=>-{-const-percentage-=-getPercentageChange(coin,-period);-const-logoUrl-=-coin.image;-const-isPositive-=-percentage->=-0;-const-bubbleClass-=-isPositive-?-'positive'-:-'negative';-//-Scale-the-bubble-size-based-on-the-percentage-const-size-=-minSize-+-((Math.abs(percentage)-/-maxPercentage)-*-(maxSize---minSize));-return-`-<div-class="bubble-${bubbleClass}"-style="width:-${size}px;-height:-${size}px;">-<img-src="${logoUrl}"-alt="${coin.symbol.toUpperCase()}-logo">-<div-class="symbol">${coin.symbol.toUpperCase()}</div>-<div-class="percentage">${percentage.toFixed(2)}%</div>-</div>-`;-}).join('');-bubblesContainer.innerHTML-=-bubblesHTML;-}-function-getPercentageChange(coin,-period)-{-switch(period)-{-case-'1h':-return-coin.price_change_percentage_1h_in_currency-||-0;-case-'24h':-return-coin.price_change_percentage_24h-||-0;-case-'7d':-return-coin.price_change_percentage_7d_in_currency-||-0;-case-'30d':-return-coin.price_change_percentage_30d_in_currency-||-0;-case-'1y':-return-coin.price_change_percentage_1y_in_currency-||-0;-default:-return-coin.price_change_percentage_24h-||-0;-}-}-timeButtons.forEach(button-=>-{-button.addEventListener('click',-()-=>-{-timeButtons.forEach(btn-=>-btn.classList.remove('active'));-button.classList.add('active');-renderBubbles(cryptoData);-});-});-searchInput.addEventListener('input',-()-=>-renderBubbles(cryptoData));-fetchCryptoData();-setInterval(fetchCryptoData,-3600000);-/*-CSS-Reset-*/-*-{-margin:-0;-padding:-0;-box-sizing:-border-box;-}-body-{-background-color:-#ffffff;-color:-white;-font-family:-Arial,-sans-serif;-}-.header-{-padding:-1rem;-background-color:-#36454F;-display:-flex;-align-items:-center;-gap:-1rem;-flex-wrap:-wrap;-}-.time-buttons-{-display:-flex;-gap:-0.5rem;-}-.time-btn-{-padding:-0.5rem-1rem;-border:-none;-border-radius:-20px;-cursor:-pointer;-background-color:-#333;-color:-white;-}-.time-btn.active-{-background-color:-#008080;-}-.search-container-{-flex-grow:-1;-max-width:-400px;-}-#search-{-width:-100%;-padding:-0.9rem-1rem;-border-radius:-20px;-border:-none;-background-color:-#F0F0F0;-color:-rgb(0,-0,-0);-}-.bubbles-container-{-padding:-2rem;-display:-flex;-flex-wrap:-wrap;-gap:-1rem;-justify-content:-center;-}-.bubble-{-border-radius:-50%;-display:-flex;-flex-direction:-column;-align-items:-center;-justify-content:-center;-cursor:-pointer;-position:-relative;-animation:-float-5s-ease-in-out-infinite;-background:-transparent;-}-.bubble.positive-{-box-shadow:-inset-0-0-15px-3px-rgba(0,-255,-0,-0.7),-inset-0-0-30px-5px-rgba(0,-255,-0,-0.5);-}-.bubble.negative-{-box-shadow:-inset-0-0-15px-3px-rgba(255,-0,-0,-0.7),-inset-0-0-30px-5px-rgba(255,-0,-0,-0.5);-}-.bubble:hover-{-transform:-scale(1.2);-}-.bubble-.symbol-{-font-size:-0.9rem;-font-weight:-bold;-color:-rgb(0,-0,-0);-margin-top:-4px;-}-.bubble-.percentage-{-font-size:-0.65rem;-color:-rgb(0,-0,-0);-font-weight:-normal;-}-.bubble-img-{-width:-40px;-height:-40px;-object-fit:-contain;-border-radius:-50%;-}-.loading-{-text-align:-center;-padding:-2rem;-font-size:-1.2rem;-}-@keyframes-float-{-0%-{-transform:-translate(0,-0);-}-25%-{-transform:-translate(3px,--5px);-}-50%-{-transform:-translate(-3px,-5px);-}-75%-{-transform:-translate(-5px,--3px);-}-100%-{-transform:-translate(0,-0);-}-}-convert-this-into-react-js
