Crypto Market Update Code
HTML Code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Crypto Market Update</title>
<link rel="stylesheet" href="style.css">
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
</head>
<body>
<div class="container">
<header>
<h1>Market Update</h1>
<nav>
<button class="active">View All</button>
<button>Metaverse</button>
<button>Entertainment</button>
<button>Energy</button>
<button>NFT</button>
<button>Gaming</button>
<button>Music</button>
</nav>
<a href="#" class="see-all">See All Coins</a>
</header>
<table>
<thead>
<tr>
<th>#</th>
<th>Name</th>
<th>Last Price</th>
<th>24h %</th>
<th>Market Cap</th>
<th>Last 7 Days</th>
<th></th>
</tr>
</thead>
<tbody id="crypto-table">
<!-- Data will be added dynamically -->
</tbody>
</table>
</div>
<script src="script.js"></script>
</body>
</html>
CSS Code:
body {
margin: 0;
font-family: Arial, sans-serif;
background: #111;
color: #fff;
}
.container {
padding: 20px;
}
header {
display: flex;
align-items: center;
justify-content: space-between;
}
header h1 {
font-size: 28px;
}
nav {
display: flex;
gap: 10px;
}
nav button {
background: #222;
border: none;
padding: 8px 15px;
border-radius: 20px;
color: #fff;
cursor: pointer;
font-size: 14px;
}
nav button.active {
background: #2b6ef3;
}
.see-all {
color: #2b6ef3;
text-decoration: none;
font-size: 14px;
}
table {
width: 100%;
margin-top: 20px;
border-collapse: collapse;
}
thead {
border-bottom: 1px solid #333;
}
thead th {
text-align: left;
padding: 10px 5px;
font-size: 14px;
}
tbody tr {
border-bottom: 1px solid #222;
}
tbody td {
padding: 12px 5px;
font-size: 14px;
}
.positive {
color: #00c853;
}
.negative {
color: #ff1744;
}
.trade-btn {
background: #222;
border: 1px solid #555;
padding: 6px 12px;
border-radius: 20px;
cursor: pointer;
color: #fff;
}
.chart-cell {
width: 120px;
height: 40px;
}
JavaScript Code:
const data = [
{
rank: 1,
name: "Bitcoin",
symbol: "BTC",
price: "$56,623.54",
change: "+1.45%",
cap: "$880,423,640,582",
chart: [50, 55, 53, 58, 57, 59, 60],
color: "green"
},
{
rank: 2,
name: "Ethereum",
symbol: "ETH",
price: "$56,623.54",
change: "-5.12%",
cap: "$880,423,640,582",
chart: [60, 58, 57, 56, 55, 54, 53],
color: "red"
},
{
rank: 3,
name: "Tether",
symbol: "USDT/USD",
price: "$56,623.54",
change: "+1.45%",
cap: "$880,423,640,582",
chart: [52, 53, 52, 54, 55, 54, 56],
color: "green"
},
{
rank: 4,
name: "BNB",
symbol: "BNB/USD",
price: "$56,623.54",
change: "-3.75%",
cap: "$880,423,640,582",
chart: [58, 57, 56, 55, 54, 53, 52],
color: "red"
}
];
const tableBody = document.getElementById("crypto-table");
data.forEach((coin, index) => {
const row = document.createElement("tr");
row.innerHTML = `
<td>${coin.rank}</td>
<td>${coin.name} <span style="color:#777">${coin.symbol}</span></td>
<td>${coin.price}</td>
<td class="${coin.change.startsWith('+') ? 'positive' : 'negative'}">${coin.change}</td>
<td>${coin.cap}</td>
<td class="chart-cell"><canvas id="chart${index}"></canvas></td>
<td><button class="trade-btn">Trade</button></td>
`;
tableBody.appendChild(row);
// Draw chart using Chart.js
new Chart(document.getElementById(`chart${index}`), {
type: 'line',
data: {
labels: coin.chart.map((_, i) => i),
datasets: [{
data: coin.chart,
borderColor: coin.color,
borderWidth: 2,
fill: true,
backgroundColor: coin.color === "green" ? "rgba(0,200,83,0.2)" : "rgba(255,23,68,0.2)",
pointRadius: 0,
tension: 0.4
}]
},
options: {
responsive: true,
maintainAspectRatio: false,
plugins: { legend: { display: false } },
scales: { x: { display: false }, y: { display: false } }
}
});
});
