Scrip html blogger Cuaca Ver.2

<div id="weather-pro">

  <div id="w-location">📍 Mendeteksi lokasi...</div>

  <div class="now-label">Sekarang</div>

  <div id="w-temp">--°C</div>

  <div id="w-desc">Memuat...</div>

  <div class="w-details">

    <div>💧 <span id="w-humidity">--</span>%<br><small>Kelembapan</small></div>

    <div>🌬️ <span id="w-wind">--</span><br><small>km/jam</small></div>

    <div>🌡️ <span id="w-feels">--</span>°C<br><small>Terasa</small></div>

  </div>

  <div class="forecast-title">Prakiraan</div>

  <div id="w-forecast"></div>

  <div class="w-search">

    <input type="text" id="city" placeholder="Cari kota... (Jakarta)">

    <button onclick="getWeather()">Cari</button>

  </div>

</div>

<style>

#weather-pro {

  max-width: 360px;

  margin: auto;

  padding: 20px;

  border-radius: 18px;

  color: #fff;

  font-family: 'Segoe UI', sans-serif;

  text-align: center;

  background: #2c3e50;

}

#w-location { font-size: 14px; font-weight: bold; }

.now-label {

  font-size: 12px;

  opacity: 0.7;

  margin-top: 5px;

}

#w-temp {

  font-size: 52px;

  font-weight: bold;

  margin: 5px 0;

}

#w-desc {

  font-size: 15px;

  margin-bottom: 10px;

}

.w-details {

  display: flex;

  justify-content: space-between;

  margin: 15px 0;

  font-size: 13px;

}

.w-details div {

  width: 33%;

}

.forecast-title {

  font-size: 13px;

  opacity: 0.8;

  margin-bottom: 5px;

}

#w-forecast {

  display: flex;

  justify-content: space-between;

}

.day {

  font-size: 12px;

}

.w-search {

  display: flex;

  margin-top: 15px;

}

.w-search input {

  flex: 1;

  padding: 10px;

  border: none;

  outline: none;

  border-radius: 8px 0 0 8px;

}

.w-search button {

  padding: 10px;

  background: #FFD700;

  border: none;

  font-weight: bold;

  border-radius: 0 8px 8px 0;

  cursor: pointer;

}

</style>

<script>

// 🔥 Terjemahan

const translateID = {

  "clear": "Cerah",

  "sunny": "Cerah",

  "partly cloudy": "Berawan Sebagian",

  "cloudy": "Berawan",

  "overcast": "Mendung",

  "mist": "Berkabut",

  "fog": "Kabut Tebal",

  "light rain": "Hujan Ringan",

  "moderate rain": "Hujan Sedang",

  "heavy rain": "Hujan Lebat",

  "patchy rain nearby": "Hujan Lokal",

  "thunderstorm": "Badai Petir",

  "rain with thunderstorm": "Hujan + Petir"

};

async function getWeather(cityInput=null){

  let input = document.getElementById("city").value;

  let city = cityInput || input;

  if(!city){

    try{

      let ip = await fetch("https://ipapi.co/json/");

      let dataIP = await ip.json();

      city = dataIP.city;

    }catch{

      city = "Jakarta";

    }

  }

  document.getElementById("w-location").innerText="Memuat...";

  try{

    let res = await fetch(`https://wttr.in/${city}?format=j1`);

    let data = await res.json();

    let c = data.current_condition[0];

    let descEN = c.weatherDesc[0].value.toLowerCase();

    let descID = translateID[descEN] || c.weatherDesc[0].value;

    document.getElementById("w-location").innerText = "📍 " + city;

    document.getElementById("w-temp").innerHTML = c.temp_C + "&deg;C";

    document.getElementById("w-desc").innerText = descID;

    document.getElementById("w-humidity").innerText = c.humidity;

    document.getElementById("w-wind").innerText = c.windspeedKmph;

    document.getElementById("w-feels").innerHTML = c.FeelsLikeC + "&deg;C";

    // 🎨 Background

    let bg = "#2c3e50";

    if(descEN.includes("rain")) bg = "#34495e";

    else if(descEN.includes("cloud")) bg = "#7f8c8d";

    else if(descEN.includes("sun") || descEN.includes("clear")) bg = "#f39c12";

    document.getElementById("weather-pro").style.background = bg;

    // 🔥 Forecast min-max + label

    let labels = ["Hari ini","Besok","Lusa"];

    let forecastHTML = "";

    data.weather.slice(0,3).forEach((d,i)=>{

      forecastHTML += `

        <div class="day">

          <div>${labels[i]}</div>

          <div>${d.mintempC}&deg; / ${d.maxtempC}&deg;</div>

        </div>`;

    });

    document.getElementById("w-forecast").innerHTML = forecastHTML;

    localStorage.setItem("lastCity", city);

  }catch{

    document.getElementById("w-location").innerText="Gagal ambil data";

  }

}

window.onload = ()=>{

  let last = localStorage.getItem("lastCity");

  if(last) getWeather(last);

  else getWeather();

}

</script>