<div class="location">
  <h1 class="location-timezone">Timezone</h1>
  <canvas width="128" height="128"></canvas>
</div>
<div class="temperature">
  <div class="temperature-section">
    <h2 class="temperature-degree">0</h2>
    <span>F</span>
  </div>
  <div class="temperature-description">Description</div>
</div>
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  height: 100vh;
  display: flex;
  justify-content: center;
  flex-direction: column;
  align-items: center;
  background: linear-gradient(rgb(47, 150, 163), rgb(48, 62, 143));
  font-family: sans-serif;
  color: #fff;
}

.location,
.temperature {
  height: 30vh;
  width: 50%;
  display: flex;
  justify-content: space-around;
  align-items: center;
}

.temperature {
  flex-direction: column;
}

.temperature-section {
  display: flex;
  align-items: center;
  cursor: pointer;
}

.temperature-section span {
  margin: 10px;
  font-size: 30px;
}

.temperature-section h2 {
  font-size: 40px;
  user-select: none;
}
let long;
let lat;

let tempDesc = document.querySelector(".temperature-description");
let tempDeg = document.querySelector(".temperature-degree");
let locTime = document.querySelector(".location-timezone");
let tempSec = document.querySelector(".temperature-section");
let tempSpan = document.querySelector(".temperature-section span");

if (navigator.geolocation) {
  navigator.geolocation.getCurrentPosition((pos) => {
    long = pos.coords.longitude;
    lat = pos.coords.latitude;

    const proxy = "https://cors-anywhere.herokuapp.com/";
    const api = `${proxy}https://api.darksky.net/forecast/fd9d9c6418c23d94745b836767721ad1/${lat}, ${long}`;

    fetch(api)
      .then((response) => response.json())
      .then((data) => {
        console.log(data);
        const { temperature, summary, icon } = data.currently;

        tempDeg.textContent = temperature.toFixed();
        tempDesc.textContent = summary;
        locTime.textContent = data.timezone;

        let celsius = Math.floor((temperature - 32) * (5 / 9));

        setIcons(icon, document.querySelector("canvas"));
        tempSec.addEventListener("click", () => {
          if (tempSpan.textContent === "F") {
            tempSpan.textContent = "C";
            tempDeg.textContent = celsius;
          } else {
            tempSpan.textContent = "F";
            tempDeg.textContent = temperature.toFixed();
          }
        });
      });
  });
} else console.log("error");

function setIcons(icon, iconID) {
  const skycons = new Skycons({
    color: "#fff"
  });
  const curIcon = icon.replace(/-/g, "_").toUpperCase();
  skycons.play();
  return skycons.set(iconID, Skycons[curIcon]);
}
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. https://harryheman.github.io/skycons.js