Crypto Price Tracker | HTML, CSS & JavaScript

Crypto Price Tracker with HTML, CSS & JavaScript

30 DAYS 30 PROJECT CHALLENGE

Day #24

Project Overview

The Crypto Price Tracker is a beginner-friendly project built with HTML, CSS, and JavaScript that displays cryptocurrency prices using a public crypto API. The project helps users view live market information without manually entering or updating cryptocurrency prices in the code. This project focuses on fetching data from an external API and presenting the returned information in a simple, easy-to-read interface. JavaScript handles the API request, processes the response, and updates the webpage with the latest cryptocurrency information.

Additionally, this project gives beginners hands-on experience with asynchronous JavaScript, API requests, JSON data, and dynamic DOM updates.

Key Features

Live Crypto Prices: It project fetches cryptocurrency price information from a public API instead of using fixed values. Therefore, the displayed prices can reflect the latest data returned by the API.
Public API Integration: JavaScript connects the application with an external cryptocurrency API, which gives beginners practical experience with APIs and shows how websites can use data from external services.
Dynamic Data Fetching: The application requests cryptocurrency information when the page loads or when the defined JavaScript logic runs.
Cryptocurrency Information: Tracker presents important cryptocurrency market information returned by the API in a simple interface. This keeps the focus on the current price data.
Asynchronous JavaScript: This project uses asynchronous data fetching so the browser can request information without blocking the rest of the page.
JSON Data Handling: It API returns structured JSON data, which JavaScript processes before displaying the required information.
Dynamic UI Updates: JavaScript updates the webpage after receiving the API response. Users can therefore see the latest information directly in the interface without manually editing the HTML.
Simple Price Display: The project presents cryptocurrency information in a clean and straightforward layout.
API Error Handling: The application can handle problems when the API request does not return the expected data, which helps prevent the interface from becoming confusing when a request fails.
Beginner-Friendly Structure: HTML handles the page structure, CSS controls the visual design, and JavaScript manages the API interaction. This clear separation makes the project easier to study and modify.
Easy to Extend: The application can be customized and expanded to display more information about cryptocurrencies, such as price changes in percentage, rank, and so on..

What You'll Learn

How to connect a JavaScript project with a public cryptocurrency API.
How to use fetch() for asynchronous API requests.
How to work with JSON data returned by an API.
How to access specific properties from API responses.
How asynchronous JavaScript works during data fetching.
How to update webpage content dynamically with JavaScript.
How to display API data inside HTML elements.
How to handle successful and unsuccessful API requests.
How HTML, CSS, and JavaScript work together in an API-based project.

HTML Code

HTML creates the basic structure of the Crypto Price Tracker and provides the elements where the cryptocurrency information appears. The main container keeps the tracker organized, while the heading introduces the purpose of the application.

The result area provides JavaScript with a location where it can insert the cryptocurrency data returned by the API. Finally, the page connects the stylesheet for the design and loads the JavaScript file so the application can fetch and display the required information.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
  <title>Crypto Price Tracker</title>
  <link rel="stylesheet" href="style.css" />
</head>
<body>

  <div class="crypto-container">
    <h2>Crypto Price Tracker</h2>

    <select id="cryptoSelect">
      <option value="bitcoin">Bitcoin</option>
      <option value="ethereum">Ethereum</option>
      <option value="tether">Tether</option>
      <option value="binancecoin">Binance Coin</option>
      <option value="ripple">Ripple</option>
    </select>

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

    <div class="result" id="result"></div>
  </div>

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

CSS Code

CSS controls the overall appearance and layout of the Crypto Price Tracker. The body handles the page alignment and background, while the main container creates the central card that holds the tracker content.

Next, the input, buttons, and result elements receive spacing, sizing, borders, and other visual properties to keep the interface clean. The result section also uses appropriate typography and spacing so the cryptocurrency information remains easy to read.

* {
  box-sizing: border-box;
  font-family: "Segoe UI", sans-serif;
}

body {
  min-height: 100vh;
  background: #042453;
  display: flex;
  justify-content: center;
  align-items: center;
}

.crypto-container {
  background: #ffffff;
  width: 320px;
  padding: 25px;
  border-radius: 14px;
  text-align: center;
  box-shadow: 0 20px 40px rgba(0,0,0,0.25);
}

h2 {
  margin-bottom: 15px;
}

select {
  width: 100%;
  padding: 10px;
  border-radius: 6px;
  border: 1px solid #ccc;
  margin-bottom: 10px;
}

button {
  width: 100%;
  padding: 10px;
  border: none;
  border-radius: 6px;
  background: #4f46e5;
  color: white;
  cursor: pointer;
}

.result {
  margin-top: 15px;
  font-size: 14px;
  font-weight: 600;
}

.error {
  color: red;
}

Javascript Code

JavaScript handles the main functionality of the Crypto Price Tracker. It sends a request to the cryptocurrency API using fetch(), waits for the response, and converts the returned data into JSON so the required cryptocurrency information can be accessed.

After the API returns the data, JavaScript selects the required values and updates the result elements on the page. The asynchronous flow allows the application to wait for the external data before displaying the result. Finally, the code handles API errors so the user receives a message when the request does not complete successfully.

const result = document.getElementById("result");

function getPrice() {
  const crypto = document.getElementById("cryptoSelect").value;

  result.innerHTML = "Loading...";

  fetch(
    `https://api.coingecko.com/api/v3/simple/price?ids=${crypto}&vs_currencies=usd,inr`
  )
    .then(res => res.json())
    .then(data => {
      const usd = data[crypto].usd;
      const inr = data[crypto].inr;

      result.innerHTML = `
        💰 <strong>${crypto.toUpperCase()}</strong><br>
        USD: $${usd}<br>
        INR: ₹${inr}
      `;
    })
    .catch(() => {
      result.innerHTML = `<p class="error">Error fetching price</p>`;
    });
}