API Calls and Fetching Data

<script>
  import { onMount } from &#039;svelte';

  let posts = [];
  let loading = true;
  let error = null;

  onMount(async () => {
    try {
      const res = await fetch(&#039;https://jsonplaceholder.typicode.com/posts?_limit=5');
      if (!res.ok) throw new Error(`HTTP Error: ${res.status}`);
      posts = await res.json();
    } catch (e) {
      error = e.message;
    } finally {
      loading = false;
    }
  });
</script>

{#if loading}
  <div class="spinner">Loading...</div>
{:else if error}
  <div class="error">❌ {error}</div>
{:else}
  {#each posts as post (post.id)}
    <div class="post-card">
      <h3>{post.title}</h3>
      <p>{post.body.slice(0, 100)}...</p>
    </div>
  {/each}
{/if}

<script>
  async function getPosts() {
    const res = await fetch(&#039;https://jsonplaceholder.typicode.com/posts?_limit=5');
    if (!res.ok) throw new Error(&#039;Failed to fetch');
    return res.json();
  }

  let postsPromise = getPosts();

  function refresh() {
    postsPromise = getPosts(); // Re-runs the await block!
  }
</script>

<button on:click={refresh}>🔄 Refresh</button>

{#await postsPromise}
  <p>Loading posts...</p>
{:then posts}
  {#each posts as post (post.id)}
    <h3>{post.title}</h3>
  {/each}
{:catch error}
  <p class="error">Error: {error.message}</p>
{/await}

<!-- WeatherApp.svelte -->
<script>
  const API_KEY = &#039;YOUR_API_KEY'; // openweathermap.org
  const API_URL = &#039;https://api.openweathermap.org/data/2.5';

  let city = &#039;';
  let weatherPromise = null;
  let searchInput;

  async function getWeather(cityName) {
    const res = await fetch(`${API_URL}/weather?q=${cityName}&appid=${API_KEY}&units=metric`);
    if (!res.ok) {
      if (res.status === 404) throw new Error(`City "${cityName}" not found`);
      throw new Error(&#039;Weather service unavailable');
    }
    return res.json();
  }

  function search() {
    if (city.trim()) {
      weatherPromise = getWeather(city.trim());
    }
  }

  function handleKeydown(e) {
    if (e.key === &#039;Enter') search();
  }

  const weatherIcons = {
    Clear: &#039;☀️', Clouds: '☁️', Rain: '🌧️', Snow: '❄️',
    Thunderstorm: &#039;⛈️', Drizzle: '🌦️', Mist: '🌫️'
  };
</script>

<div class="weather-app">
  <h1>🌤️ Weather App</h1>

  <div class="search-bar">
    <input
      bind:value={city}
      bind:this={searchInput}
      on:keydown={handleKeydown}
      placeholder="Enter city name..."
    />
    <button on:click={search} disabled={!city.trim()}>Search</button>
  </div>

  {#if weatherPromise}
    {#await weatherPromise}
      <div class="loading">Fetching weather...</div>
    {:then weather}
      <div class="weather-card">
        <div class="city-name">{weather.name}, {weather.sys.country}</div>
        <div class="icon">{weatherIcons[weather.weather[0].main] || &#039;🌡️'}</div>
        <div class="temp">{Math.round(weather.main.temp)}°C</div>
        <div class="desc">{weather.weather[0].description}</div>
        <div class="details">
          <span>💧 {weather.main.humidity}% humidity</span>
          <span>💨 {weather.wind.speed} m/s</span>
          <span>👁️ {(weather.visibility / 1000).toFixed(1)} km</span>
        </div>
      </div>
    {:catch error}
      <div class="error">❌ {error.message}</div>
    {/await}
  {:else}
    <p class="hint">Enter a city name to get the current weather.</p>
  {/if}
</div>