<div class="top-bar">
      <div>
        <div class="location">San Francisco</div>
        <div class="date" id="date">Monday, September 7</div>
      </div>

<button id="weatherToggle">
        Change Weather
      </button>
    </div>

</div>

<div class="condition" id="condition">
          Mostly Sunny
        </div>

<div class="feels-like">
          Feels like
          <span id="feelsLike">70</span>°
        </div>

</div>

<div>
          <small>Humidity</small>
          <strong id="humidity">62%</strong>
        </div>
      </div>

<div>
          <small>UV Index</small>
          <strong id="uv">5 Moderate</strong>
        </div>
      </div>

</div>

</div>

* {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  width: 100%;
  min-height: 100%;

font-family:
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    Arial,
    sans-serif;
}

body {
  background:
    linear-gradient(
      135deg,
      #78b8eb,
      #b7dcf6
    );
}

/* APP */

.weather-app {
  min-height: 100vh;

display: flex;
  align-items: center;
  justify-content: center;

padding: 30px;
}

/* CARD */

.weather-card {
  width: min(
    720px,
    94vw
  );

overflow: hidden;

border-radius: 28px;

background:
    linear-gradient(
      145deg,
      rgba(255,255,255,0.30),
      rgba(255,255,255,0.12)
    );

border:
    1px solid
    rgba(255,255,255,0.35);

backdrop-filter:
    blur(22px);

box-shadow:
    0 30px 80px
    rgba(31,78,121,0.25);

color: white;
}

/* TOP BAR */

.top-bar {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;

padding:
    28px 30px 0;
}

.location {
  font-size: 24px;
  font-weight: 650;

letter-spacing:
    -0.5px;
}

.date {
  margin-top: 5px;

font-size: 13px;

color:
    rgba(255,255,255,0.68);
}

/* BUTTON */

button {
  padding:
    9px 14px;

border: 1px solid
    rgba(255,255,255,0.30);

border-radius:
    20px;

color: white;

background:
    rgba(255,255,255,0.13);

cursor: pointer;

transition:
    background .2s,
    transform .2s;
}

button:hover {
  background:
    rgba(255,255,255,0.25);

transform:
    translateY(-2px);
}

/* WEATHER SCENE */

.weather-scene {
  position: relative;

height: 220px;

overflow: hidden;
}

/* SUN */

.sun {
  position: absolute;

width: 100px;
  height: 100px;

left: 21%;
  top: 52px;

border-radius: 50%;

background:
    radial-gradient(
      circle at 35% 35%,
      #fffbd7,
      #ffd95c 55%,
      #ffb51b
    );

box-shadow:
    0 0 25px
      rgba(255,224,99,.8),

0 0 65px
      rgba(255,192,48,.5),

0 0 120px
      rgba(255,190,80,.3);

animation:
    sunFloat
    5s
    ease-in-out
    infinite;
}

@keyframes sunFloat {

0%,
  100% {
    transform:
      translateY(0)
      scale(1);
  }

50% {
    transform:
      translateY(-7px)
      scale(1.04);
  }

}

/* CLOUD */

.cloud {
  position: absolute;

width: 150px;
  height: 50px;

border-radius: 60px;

background:
    rgba(255,255,255,.88);

filter:
    drop-shadow(
      0 10px 10px
      rgba(80,120,150,.15)
    );

transition:
    opacity .8s;
}

.cloud::before,
.cloud::after,
.cloud span {
  content: "";

position: absolute;

border-radius: 50%;

background: inherit;
}

.cloud::before {
  width: 72px;
  height: 72px;

left: 23px;
  bottom: 15px;
}

.cloud::after {
  width: 88px;
  height: 88px;

right: 16px;
  bottom: 8px;
}

.cloud-one {
  right: 13%;
  top: 100px;

animation:
    cloudMove
    10s
    ease-in-out
    infinite;
}

.cloud-two {
  right: -30px;
  top: 30px;

transform: scale(.55);

opacity: .45;

animation:
    cloudMoveTwo
    16s
    ease-in-out
    infinite;
}

@keyframes cloudMove {

0%,
  100% {
    transform:
      translateX(0);
  }

50% {
    transform:
      translateX(-35px);
  }

}

@keyframes cloudMoveTwo {

0%,
  100% {
    transform:
      scale(.55)
      translateX(0);
  }

50% {
    transform:
      scale(.55)
      translateX(-80px);
  }

}

/* RAIN */

.rain {
  position: absolute;

top: 110px;
  right: 12%;

width: 160px;
  height: 115px;

opacity: 0;

pointer-events: none;

transition:
    opacity .6s;
}

.drop {
  position: absolute;

top: 0;

width: 2px;
  height: 15px;

border-radius: 3px;

background:
    rgba(255,255,255,.75);

animation:
    rainFall
    .7s
    linear
    infinite;
}

@keyframes rainFall {

from {
    transform:
      translateY(0);
    opacity: 0;
  }

20% {
    opacity: 1;
  }

to {
    transform:
      translateY(100px);
    opacity: 0;
  }

}

/* CURRENT WEATHER */

.current-weather {
  display: flex;
  align-items: center;

padding:
    0 30px 25px;
}

.temperature {
  font-size: 88px;
  font-weight: 250;

line-height: 1;

letter-spacing:
    -7px;
}

.weather-info {
  margin-left: 30px;
}

.condition {
  font-size: 22px;
  font-weight: 600;
}

.feels-like {
  margin-top: 6px;

color:
    rgba(255,255,255,.65);

font-size: 13px;
}

/* DETAILS */

.details {
  display: grid;

grid-template-columns:
    repeat(3,1fr);

margin:
    0 30px;

border-top:
    1px solid
    rgba(255,255,255,.16);

border-bottom:
    1px solid
    rgba(255,255,255,.16);
}

.detail {
  display: flex;
  align-items: center;
  justify-content: center;

gap: 11px;

padding:
    19px 10px;
}

.detail-icon {
  font-size: 22px;
}

.detail small {
  display: block;

margin-bottom: 3px;

color:
    rgba(255,255,255,.58);

font-size: 10px;

text-transform:
    uppercase;

letter-spacing:
    .7px;
}

.detail strong {
  font-size: 13px;
}

/* FORECAST */

.forecast {
  display: grid;

grid-template-columns:
    repeat(5,1fr);

padding:
    22px 20px 27px;
}

.forecast-day {
  display: flex;

flex-direction: column;

align-items: center;

gap: 8px;

padding: 12px 5px;

border-radius: 15px;

transition:
    background .2s,
    transform .2s;
}

.forecast-day:hover {
  background:
    rgba(255,255,255,.12);

transform:
    translateY(-3px);
}

.forecast-day > span:first-child {
  font-size: 12px;

color:
    rgba(255,255,255,.65);
}

.forecast-icon {
  font-size: 27px;
}

.forecast-day strong {
  font-size: 15px;
}

.forecast-day small {
  color:
    rgba(255,255,255,.5);
}

/* RAIN MODE */

.weather-card.rainy {

background:
    linear-gradient(
      145deg,
      rgba(59,86,115,.72),
      rgba(81,111,138,.62)
    );

}

.weather-card.rainy .sun {
  opacity: .12;
}

.weather-card.rainy .cloud {
  background:
    rgba(210,220,230,.92);
}

.weather-card.rainy .rain {
  opacity: 1;
}

/* CLOUDY MODE */

.weather-card.cloudy .sun {
  opacity: .35;
}

.weather-card.cloudy .cloud-one {
  transform:
    scale(1.15);
}

/* RESPONSIVE */

@media (
  max-width: 600px
) {

.weather-app {
    padding: 15px;
  }

.weather-card {
    border-radius: 22px;
  }

.top-bar {
    padding:
      22px 20px 0;
  }

.location {
    font-size: 20px;
  }

.weather-scene {
    height: 190px;
  }

.sun {
    width: 80px;
    height: 80px;

left: 15%;
  }

.cloud {
    transform:
      scale(.8);
  }

.current-weather {
    padding:
      0 20px 20px;
  }

.temperature {
    font-size: 68px;
  }

.condition {
    font-size: 17px;
  }

.weather-info {
    margin-left: 20px;
  }

.details {
    margin:
      0 20px;
  }

.detail {
    flex-direction:
      column;

gap: 5px;
  }

.forecast {
    padding:
      18px 10px;
  }

}

const card =
  document.querySelector(
    ".weather-card"
  );

const scene =
  document.getElementById(
    "weatherScene"
  );

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

const button =
  document.getElementById(
    "weatherToggle"
  );

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

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

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

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

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

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

/* CREATE RAIN */

for (let i = 0; i < 28; i++) {

const drop =
    document.createElement(
      "div"
    );

drop.className =
    "drop";

drop.style.left =
    Math.random() *
    100 +
    "%";

drop.style.animationDelay =
    Math.random() *
    1 +
    "s";

drop.style.animationDuration =
    (
      0.45 +
      Math.random() *
      0.5
    ) +
    "s";

rain.appendChild(
    drop
  );

}

/* WEATHER STATES */

const weatherStates = [

{
    type: "sunny",
    temperature: 72,
    feels: 70,
    condition:
      "Mostly Sunny",
    humidity: "62%",
    wind: "9 mph",
    uv: "5 Moderate"
  },

{
    type: "cloudy",
    temperature: 66,
    feels: 64,
    condition:
      "Cloudy",
    humidity: "69%",
    wind: "12 mph",
    uv: "2 Low"
  },

{
    type: "rainy",
    temperature: 61,
    feels: 59,
    condition:
      "Light Rain",
    humidity: "82%",
    wind: "16 mph",
    uv: "1 Low"
  }

];

let weatherIndex = 0;

/* CHANGE WEATHER */

button.addEventListener(
  "click",
  function() {

weatherIndex++;

if (
      weatherIndex >=
      weatherStates.length
    ) {

weatherIndex = 0;

}

updateWeather(
      weatherStates[
        weatherIndex
      ]
    );

}
);

/* UPDATE UI */

function updateWeather(
  weather
) {

card.classList.remove(
    "rainy",
    "cloudy"
  );

if (
    weather.type ===
    "rainy"
  ) {

card.classList.add(
      "rainy"
    );

}

if (
    weather.type ===
    "cloudy"
  ) {

card.classList.add(
      "cloudy"
    );

}

animateNumber(
    temperature,
    Number(
      temperature.textContent
    ),
    weather.temperature
  );

feelsLike.textContent =
    weather.feels;

condition.textContent =
    weather.condition;

humidity.textContent =
    weather.humidity;

wind.textContent =
    weather.wind;

uv.textContent =
    weather.uv;

}

/* TEMPERATURE ANIMATION */

function animateNumber(
  element,
  start,
  end
) {

let value = start;

const difference =
    end - start;

const steps = 20;

let currentStep = 0;

const interval =
    setInterval(
      function() {

currentStep++;

value =
          start +
          difference *
          (
            currentStep /
            steps
          );

element.textContent =
          Math.round(
            value
          );

if (
          currentStep >=
          steps
        ) {

clearInterval(
            interval
          );

}

},
      20
    );

}

/* DATE */

const dateElement =
  document.getElementById(
    "date"
  );

const today =
  new Date();

dateElement.textContent =
  today.toLocaleDateString(
    "en-US",
    {
      weekday: "long",
      month: "long",
      day: "numeric"
    }
  );

Liveweave: Generative AI Web Editor & HTML/CSS/JS Playground