Cryptocurrency Price Tracker JavaScript, API

👤 Sharing: AI 
```javascript
<!DOCTYPE html>
<html>
<head>
  <title>Cryptocurrency Price Tracker</title>
  <style>
    body {
      font-family: Arial, sans-serif;
      background-color: #f4f4f4;
      margin: 0;
      padding: 0;
      display: flex;
      justify-content: center;
      align-items: center;
      min-height: 100vh;
    }

    #container {
      background-color: #fff;
      padding: 20px;
      border-radius: 8px;
      box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
      width: 400px;
      text-align: center;
    }

    h1 {
      color: #333;
    }

    #price-container {
      margin-top: 20px;
      font-size: 18px;
      font-weight: bold;
    }

    #loading {
      margin-top: 20px;
      font-style: italic;
      color: #777;
    }

    #error {
      margin-top: 20px;
      color: red;
    }

    select {
      padding: 8px;
      font-size: 16px;
      border-radius: 4px;
      border: 1px solid #ccc;
      margin-bottom: 10px;
    }

    button {
      padding: 10px 20px;
      font-size: 16px;
      background-color: #007bff;
      color: white;
      border: none;
      border-radius: 4px;
      cursor: pointer;
    }

    button:hover {
      background-color: #0056b3;
    }
  </style>
</head>
<body>

  <div id="container">
    <h1>Cryptocurrency Price Tracker</h1>

    <select id="currency-select">
      <option value="bitcoin">Bitcoin (BTC)</option>
      <option value="ethereum">Ethereum (ETH)</option>
      <option value="litecoin">Litecoin (LTC)</option>
      <!-- Add more cryptocurrencies as needed -->
    </select>

    <button id="update-button">Update Price</button>

    <div id="price-container">
      <span id="currency-name"></span> Price: $<span id="price"></span>
    </div>

    <div id="loading">Loading...</div>
    <div id="error"></div>
  </div>

  <script>
    const currencySelect = document.getElementById('currency-select');
    const priceContainer = document.getElementById('price-container');
    const currencyNameElement = document.getElementById('currency-name');
    const priceElement = document.getElementById('price');
    const loadingElement = document.getElementById('loading');
    const errorElement = document.getElementById('error');
    const updateButton = document.getElementById('update-button');

    const apiUrl = 'https://api.coingecko.com/api/v3/simple/price'; // Use CoinGecko or another API
    // API Documentation: https://www.coingecko.com/en/api/documentation

    async function getCryptoPrice(currency) {
      loadingElement.style.display = 'block';
      errorElement.textContent = ''; // Clear any previous errors

      try {
        const response = await fetch(`${apiUrl}?ids=${currency}&vs_currencies=usd`);

        if (!response.ok) {
          throw new Error(`HTTP error! Status: ${response.status}`);
        }

        const data = await response.json();

        if (data[currency] && data[currency].usd) {
          return data[currency].usd;
        } else {
          throw new Error('Could not retrieve price data.');
        }

      } catch (error) {
        console.error('Error fetching price:', error);
        errorElement.textContent = `Error: ${error.message}`;
        return null; // Indicate an error occurred
      } finally {
        loadingElement.style.display = 'none';
      }
    }


    async function updatePrice() {
      const selectedCurrency = currencySelect.value;

      const price = await getCryptoPrice(selectedCurrency);

      if (price !== null) {
        currencyNameElement.textContent = selectedCurrency.toUpperCase();
        priceElement.textContent = price;
        priceContainer.style.display = 'block'; // Make the price visible
      } else {
        priceContainer.style.display = 'none';  // Hide the price if there's an error
      }
    }

    // Initial Price Update (On Load)
    updatePrice();

    // Update Price on Button Click
    updateButton.addEventListener('click', updatePrice);

    // Optional: Update price automatically every X seconds
    // setInterval(updatePrice, 60000); // Update every 60 seconds (1 minute)

  </script>

</body>
</html>
```
👁️ Viewed: 12

Comments