DEV Community

200 OK
200 OK

Posted on

Build a UV Exposure Tracker in 15 Minutes with JavaScript

#api #javascript #tutorial #webdev

Skin cancer is the most common cancer worldwide, yet most apps still ignore UV data. Whether you're building a health tracker, a weather app, or a fitness platform — real-time UV index data with personalized safe exposure times makes your app genuinely useful.

In this tutorial, I'll show you how to build a UV exposure tracker using vanilla JavaScript and the UV Index & Sun Exposure API on RapidAPI.

What We're Building

A tracker that shows:

  • Current UV index with color-coded risk level
  • Health advice (sunscreen, shade, protective clothing)
  • Safe exposure time personalized by Fitzpatrick skin type
  • Vitamin D synthesis estimate
  • 3-day hourly UV forecast chart

No frameworks. Just HTML, CSS, and vanilla JavaScript.

Prerequisites

Step 1: Set Up the HTML

Create an index.html file:


html
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>UV Exposure Tracker</title>
  <style>
    * { margin: 0; padding: 0; box-sizing: border-box; }
    body { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; background: #0f172a; color: #e2e8f0; min-height: 100vh; padding: 2rem; }
    .container { max-width: 640px; margin: 0 auto; }
    h1 { font-size: 1.5rem; margin-bottom: 1.5rem; text-align: center; }

    .controls { display: flex; gap: 0.5rem; margin-bottom: 1.5rem; flex-wrap: wrap; }
    .controls input, .controls select, .controls button { padding: 0.6rem 1rem; border-radius: 8px; border: 1px solid #334155; background: #1e293b; color: #e2e8f0; font-size: 0.9rem; }
    .controls input { flex: 1; min-width: 80px; }
    .controls button { background: #f59e0b; color: #0f172a; font-weight: 600; border: none; cursor: pointer; }
    .controls button:hover { background: #d97706; }

    .uv-card { background: #1e293b; border-radius: 12px; padding: 1.5rem; margin-bottom: 1rem; }
    .uv-main { display: flex; align-items: center; gap: 1.5rem; margin-bottom: 1rem; }
    .uv-circle { width: 100px; height: 100px; border-radius: 50%; display: flex; flex-direction: column; align-items: center; justify-content: center; font-weight: 700; }
    .uv-value { font-size: 2rem; line-height: 1; }
    .uv-label { font-size: 0.75rem; margin-top: 4px; text-transform: uppercase; }
    .uv-details h3 { font-size: 1.1rem; margin-bottom: 0.25rem; }
    .uv-details p { font-size: 0.85rem; color: #94a3b8; line-height: 1.5; }

    .exposure-card { background: #1e293b; border-radius: 12px; padding: 1.5rem; margin-bottom: 1rem; }
    .exposure-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; margin-top: 0.75rem; }
    .exposure-stat { background: #0f172a; border-radius: 8px; padding: 1rem; text-align: center; }
    .exposure-stat .value { font-size: 1.5rem; font-weight: 700; color: #f59e0b; }
    .exposure-stat .label { font-size: 0.75rem; color: #94a3b8; margin-top: 0.25rem; }

    .forecast-card { background: #1e293b; border-radius: 12px; padding: 1.5rem; }
    .forecast-bars { display: flex; align-items: flex-end; gap: 4px; height: 120px; margin-top: 1rem; }
    .forecast-bar { flex: 1; border-radius: 4px 4px 0 0; position: relative; min-width: 8px; }
    .forecast-bar .time { position: absolute; bottom: -18px; left: 50%; transform: translateX(-50%); font-size: 0.6rem; color: #64748b; white-space: nowrap; }

    .hidden { display: none; }
    .loading { text-align: center; padding: 2rem; color: #64748b; }
  </style>
</head>
<body>
  <div class="container">
    <h1>UV Exposure Tracker</h1>
    <div class="controls">
      <input type="text" id="lat" placeholder="Latitude" value="40.7128">
      <input type="text" id="lon" placeholder="Longitude" value="-74.0060">
      <select id="skinType">
        <option value="1">Type I — Very fair</option>
        <option value="2" selected>Type II — Fair</option>
        <option value="3">Type III — Medium</option>
        <option value="4">Type IV — Olive</option>
        <option value="5">Type V — Brown</option>
        <option value="6">Type VI — Very dark</option>
      </select>
      <button id="checkBtn">Check UV</button>
    </div>
    <div id="results" class="hidden"></div>
    <div id="loading" class="loading hidden">Loading UV data...</div>
  </div>
  <script src="app.js"></script>
</body>
</html>
Enter fullscreen mode Exit fullscreen mode

Top comments (0)