JSFiddle - React, Tailwind, and code Playground

by velo_ninja

HTML

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>DTN Local Weather Widget Example</title>

  <!-- Include DTN Local Weather Widget Library -->
  <script src="https://content-services.dtn.com/ui-widgets/local-weather-widget/local-weather-widget-1.0-latest.js"></script>
</head>

<body>

  <!-- Container for the Local Weather Widget -->
  <div class="widget" id="local-weather-widget" style="background: rgb(255, 255, 255); padding: 10px;"></div>

  <!-- Script to Configure and Initialize the Local Weather Widget -->
  <script>
    // Replace "YOUR_API_KEY_HERE" with your actual API key from DTN
    const apiKey = "YOUR_API_KEY_HERE";


		window.dtn.localWeather.createLocalWeatherWidget({
      "apiKey": "oViXqthDGFNVw3IvAsnKrFG1AcfPyA6b",
      "container": "#local-weather-widget",
      "units": "Imperial",
      "defaultLocation": {
        "postalCode": "68114"
      },
      "stations": [
        {
          "id": "KTPH",
          "displayName": "Station 1"
        },
        {
          "id": "KSNA",
          "displayName": "Station 2"
        }
      ],
      "showStationsSelect": true,
      "showPostalCodeInput": true,
      "showForecast": true,
      "showCurrentConditions": true,
      "showWeatherDetails": true,
      "callbacks": {
        "onStationChange": "",
        "onPostalCodeChange": "",
        "onWeatherChange": ""
      }                               
    });

  </script>

</body>

</html>