📡 JSON & AJAX Lesson 06 — Real API Examples

1. Free APIs for Practice

2. GitHub API Example

// GitHub user info (no auth needed for public data)
async function getGithubUser(username) {
  const res  = await fetch(`https://api.github.com/users/${username}`);
  const user = await res.json();

  return {
    name:      user.name,
    bio:       user.bio,
    followers: user.followers,
    repos:     user.public_repos,
    avatar:    user.avatar_url,
    url:       user.html_url
  };
}

// GitHub repos
async function getRepos(username) {
  const res   = await fetch(`https://api.github.com/users/${username}/repos?sort=updated&per_page=5`);
  const repos = await res.json();

  return repos.map(repo => ({
    name:     repo.name,
    stars:    repo.stargazers_count,
    language: repo.language,
    url:      repo.html_url
  }));
}

const user  = await getGithubUser('torvalds');
const repos = await getRepos('torvalds');
console.log(`${user.name} has ${user.repos} repos, ${user.followers} followers`);

3. Weather API (Open-Meteo — Free, No Key)

// Open-Meteo: free weather API, no API key needed!
async function getWeather(lat, lon) {
  const url = `https://api.open-meteo.com/v1/forecast?` +
    `latitude=${lat}&longitude=${lon}¤t_weather=true&` +
    `hourly=temperature_2m,relativehumidity_2m`;

  const res  = await fetch(url);
  const data = await res.json();

  const current = data.current_weather;
  return {
    temp:      current.temperature,   // °C
    wind:      current.windspeed,     // km/h
    code:      current.weathercode,   // WMO code
    isDay:     current.is_day
  };
}

// Yangon coordinates
const weather = await getWeather(16.8409, 96.1735);
console.log(`Yangon: ${weather.temp}°C, Wind: ${weather.wind} km/h`);

// WMO Weather codes
const weatherCodes = {
  0: '☀️ Clear sky',
  1: '🌤️ Mainly clear',
  2: '⛅ Partly cloudy',
  3: '☁️ Overcast',
  45: '🌫️ Foggy',
  61: '🌧️ Light rain',
  71: '🌨️ Light snow',
  95: '⛈️ Thunderstorm'
};

4. Complete Mini App — Country Search

// REST Countries API
async function searchCountry(name) {
  const res = await fetch(`https://restcountries.com/v3.1/name/${name}`);
  if (!res.ok) throw new Error('Country not found');
  const [country] = await res.json();   // first result

  return {
    name:       country.name.common,
    capital:    country.capital?.[0],
    population: country.population.toLocaleString(),
    region:     country.region,
    currency:   Object.values(country.currencies || {})[0]?.name,
    flag:       country.flags.svg,
    languages:  Object.values(country.languages || {}).join(', ')
  };
}

// HTML
// <input id="search" placeholder="Country name...">
// <button onclick="search()">Search</button>
// <div id="result"></div>

async function search() {
  const query  = document.getElementById('search').value;
  const result = document.getElementById('result');

  result.innerHTML = '<p>Searching...</p>';
  try {
    const country = await searchCountry(query);
    result.innerHTML = `
      <img src="${country.flag}" width="120" style="border:1px solid #ddd">
      <h2>${country.name}</h2>
      <p>Capital: ${country.capital}</p>
      <p>Population: ${country.population}</p>
      <p>Region: ${country.region}</p>
      <p>Currency: ${country.currency}</p>
      <p>Languages: ${country.languages}</p>
    `;
  } catch (err) {
    result.innerHTML = `<p style="color:red">${err.message}</p>`;
  }
}