Labels

How to Build a Simple Crypto Price Tracker (HTML, CSS, JavaScript Tutorial)

Crypto Price Tracker

If you’re like me, you probably open your exchange app a dozen times a day to check the price of Bitcoin, Ethereum, or even Dogecoin 🐶. But what if I told you that you could build your own simple crypto price tracker in under 30 minutes using just HTML, CSS, and JavaScript?

Now, let’s be real: this is a just-for-fun project. It’s not meant to replace your trading app or give you professional market insights. But it’s a great way to learn how to fetch data from an API and display it on a web page — a skill you’ll use a lot as a developer.

🔧 What You’ll Need

  • Basic understanding of HTML, CSS, and JavaScript.

  • A code editor (I recommend VS Code).

  • A web browser (Chrome, Firefox, Edge, etc.).

  • 30 minutes of curiosity and caffeine ☕

🗂 Step 1 – Project Setup

Create a new folder called crypto-tracker. Inside it, create three files:

  • index.html

  • style.css

  • script.js

🖼 Step 2 – The HTML (index.html)

This is our web page’s structure. Add the following code:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Crypto Price Tracker</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <h1>Crypto Price Tracker</h1>

  <select id="coinSelect">
    <option value="bitcoin">Bitcoin</option>
    <option value="ethereum">Ethereum</option>
    <option value="dogecoin">Dogecoin</option>
  </select>

  <button onclick="getPrice()">Check Price</button>

  <p id="price">Select a coin to see the price</p>

  <script src="script.js"></script>
</body>
</html>

This gives us a dropdown to select a coin, a button to fetch its price, and a placeholder to display the result.

🎨 Step 3 – The CSS (style.css)

Let’s make it look less boring:

body {
  font-family: Arial, sans-serif;
  text-align: center;
  background: #f5f7fa;
  padding: 50px;
}

h1 {
  color: #333;
}

button {
  padding: 8px 15px;
  margin-top: 10px;
  cursor: pointer;
  background: #4CAF50;
  color: white;
  border: none;
  border-radius: 5px;
}

#price {
  font-size: 20px;
  margin-top: 20px;
}

⚡ Step 4 – The JavaScript (script.js)

Here’s where the magic happens. We’ll use the free CoinGecko API (no signup required) to fetch prices in real time.

async function getPrice() {
  const coin = document.getElementById("coinSelect").value;
  const url = `https://api.coingecko.com/api/v3/simple/price?ids=${coin}&vs_currencies=usd`;

  try {
    const response = await fetch(url);
    const data = await response.json();
    document.getElementById("price").innerText = 
      `1 ${coin} = $${data[coin].usd}`;
  } catch (error) {
    document.getElementById("price").innerText = "Error fetching price!";
  }
}

When you click the button, the script fetches the latest USD price for the selected coin and displays it.

🧪 Step 5 – Test It Out

  1. Open your index.html in a browser.

  2. Pick a coin (Bitcoin, Ethereum, or Dogecoin).

  3. Click Check Price.

  4. Boom 🚀 — you’ve got real-time prices!

🌟 Bonus Ideas

If you want to take it further:

  • Auto-refresh the price every 30 seconds.

  • Add more coins from the CoinGecko API.

  • Convert prices into different currencies (EUR, GBP, etc.).

  • Make the UI prettier with TailwindCSS or Bootstrap.

🎉 Conclusion

And there you have it! You just built your own crypto price tracker in under 30 minutes. Is it going to replace your Binance or Coinbase app? Nope. But it’s a fun little project that teaches you about APIs, DOM manipulation, and working with JSON — all very handy skills for any web developer.

If you enjoyed this, stick around — I’ll be posting more tutorials, snippets, and guides on web development and crypto.

👉 Have an idea for the next tutorial? Drop it in the comments!

Labels:

Comments

Post a Comment

Popular Posts