CodeYantra
BUILD WITH ME · DAY 5 / 7

Weather App

Aaj tumhara app internet se asli data layega! City ka naam likho aur uska live temperature, mausam, humidity aur hawa dikhao. Hum free Open-Meteo API use karenge — koi signup ya API key nahi chahiye.

⏱ 30 min🎯 JavaScript + API🛠 fetch, API, async / await
  • API kya hai — ek URL jo data (JSON) wapas deta hai
  • fetch() se data mangwana
  • async / await — jawab aane tak rukna, bina page atkaye
  • try / catch — internet band ho to bhi app crash na ho
  • encodeURIComponent — "New Delhi" jaise naam URL me safe
Seedha code karo ↓Step by step

Aaj yeh banega 👇

Step by step

Har step me "Editor me daalo" dabao — ya best: khud type karo, haath se likha code yaad rehta hai. ✍️

1App ka HTMLindex.html

  • Day 3 jaisa form — Enter aur Search button dono chalenge.
  • #result khaali hai — mausam JS se aayega.
  <div class="app">
    <h1>Mausam ⛅</h1>
    <form id="form">
      <input id="city" placeholder="City ka naam..."
        autocomplete="off">
      <button>Search</button>
    </form>
    <div class="result" id="result"></div>
  </div>

2Card + formstyle.css

  • Background me linear-gradient — raat jaisa neela 🌌
  • Baaki Day 3 wala card + flex form.
body {
  margin: 0;
  min-height: 100vh;
  display: grid;
  place-items: center;
  background: linear-gradient(135deg, #0f172a, #312e81);
  font-family: sans-serif;
}
.app {
  width: 320px;
  padding: 24px;
  background: #fff;
  border-radius: 20px;
  text-align: center;
}
h1 { margin: 0 0 16px; }
form { display: flex; gap: 8px; }
input {
  flex: 1;
  padding: 10px 12px;
  border: 2px solid #e2e8f0;
  border-radius: 10px;
}
button {
  padding: 10px 16px;
  border: 0;
  border-radius: 10px;
  background: #6366f1;
  color: #fff;
  cursor: pointer;
}

3Result ka stylestyle.css

  • .result .temp — temperature bada aur bold, sabse pehle nazar aaye.
.result { margin-top: 16px; }
.result h2 { margin: 0; font-size: 20px; }
.result p { margin: 6px 0; color: #475569; }
.result .temp {
  margin: 4px 0;
  font-size: 56px;
  font-weight: bold;
  color: #6366f1;
}

4API URLs + elementsscript.js

  • GEO API: city ka naam do → latitude / longitude milta hai.
  • Forecast API: latitude / longitude do → mausam milta hai.
  • Dono free hain, koi key nahi. Browser me URL khol ke JSON khud dekho! 👀
const GEO = 'https://geocoding-api.open-meteo.com/v1/search';
const API = 'https://api.open-meteo.com/v1/forecast';
const form = document.querySelector('#form');
const input = document.querySelector('#city');
const result = document.querySelector('#result');

5Weather code → emojiscript.js

  • API mausam ko ek number (weather_code) me batati hai: 0 = saaf, 61 = baarish…
  • if ki seedhi se number ko emoji + Hinglish label me badla.
function getIcon(code) {
  if (code === 0) return '☀️ Saaf aasmaan';
  if (code <= 3) return '⛅ Thode baadal';
  if (code <= 48) return '🌫️ Kohra';
  if (code <= 67) return '🌧️ Baarish';
  if (code <= 77) return '❄️ Barf';
  if (code <= 82) return '🌦️ Bauchhar';
  return '⛈️ Toofan';
}

6getWeather() — async / awaitscript.js

  • async function ke andar await fetch(url) — jawab aane tak ruko, phir await res.json() se object banao.
  • Pehle GEO se city dhoondo. results nahi mila → "City nahi mili 😕".
  • Phir latitude / longitude se forecast mangao aur data.current se values nikaalo.
  • Kuch bhi fail ho (internet band) → catch me friendly message.
async function getWeather(city) {
  result.innerHTML = '<p>Loading... ⏳</p>';
  try {
    const q = encodeURIComponent(city);
    const geoRes = await fetch(`${GEO}?name=${q}&count=1`);
    const geo = await geoRes.json();
    if (!geo.results) {
      result.innerHTML = '<p>City nahi mili 😕</p>';
      return;
    }
    const place = geo.results[0];
    const params = `latitude=${place.latitude}`
      + `&longitude=${place.longitude}`
      + '&current=temperature_2m,relative_humidity_2m,'
      + 'wind_speed_10m,weather_code';
    const res = await fetch(`${API}?${params}`);
    const data = await res.json();
    const c = data.current;
    result.innerHTML = `
      <h2>${place.name}, ${place.country}</h2>
      <p class="temp">${Math.round(c.temperature_2m)}°C</p>
      <p>${getIcon(c.weather_code)}</p>
      <p>💧 Humidity ${c.relative_humidity_2m}%</p>
      <p>💨 Hawa ${c.wind_speed_10m} km/h</p>`;
  } catch (err) {
    result.innerHTML = '<p>Internet check karo 📶</p>';
  }
}

7Search formscript.js

  • preventDefault() — page reload nahi.
  • Khaali input par kuch mat karo, warna getWeather(city).
form.addEventListener('submit', (e) => {
  e.preventDefault();
  const city = input.value.trim();
  if (city) getWeather(city);
});

Tumhara editor 💻

code isi device par save hota hai

Ab ise apna banao 🎨

Atak gaye? Notes padho 📚

JavaScript Notes

Aage kya?

DAY 1
Profile Card
HTML + CSS basics, box model, grid center
Live ✓
DAY 2
Responsive Navbar
Flexbox, media queries, mobile menu
Live ✓
DAY 3
To-do App
DOM, events, localStorage
Live ✓
DAY 4
Quiz App
Arrays, objects, score logic
Live ✓
DAY 6
Portfolio Page
Day 1–5 ko jod ke ek site
Live ✓
DAY 7
Go LIVE 🚀
GitHub Pages par apna portfolio deploy
Live ✓

Naya day aate hi reel aayegi — @codeyantra follow karo 🔔