Beregn afstanden til Mallorca, Spanien med Svelte

TLDR:

Denne artikel viser, hvordan du kan bygge en simpel webapplikation med Svelte, der beregner afstanden fra din nuværende placering til Mallorca, Spanien. Artiklen forklarer, hvilke værktøjer og tjenester du har brug for, og beskriver trin-for-trin, hvordan du kan opbygge appen. Ved hjælp af Svelte og Tailwind CSS kan du hurtigt og nemt oprette en responsiv og moderne brugergrænseflade.

Koden

<script>
  import { onMount } from 'svelte';

  let distance = null;

  async function getLocation() {
    const response = await fetch('https://ipinfo.io/json');
    const data = await response.json();

    const lat1 = data.loc.split(',')[0];
    const lon1 = data.loc.split(',')[1];
    const lat2 = 39.57; // Mallorca latitude
    const lon2 = 2.65; // Mallorca longitude

    const R = 6371; // Earth's radius in KM

    const dLat = (lat2 - lat1) * Math.PI / 180;
    const dLon = (lon2 - lon1) * Math.PI / 180;

    const a =
      Math.sin(dLat / 2) * Math.sin(dLat / 2) +
      Math.cos(lat1 * Math.PI / 180) * Math.cos(lat2 * Math.PI / 180) *
      Math.sin(dLon / 2) * Math.sin(dLon / 2);

    const c = 2 * Math.atan2(Math.sqrt(a), Math.sqrt(1 - a));

    distance = R * c;
  }

  onMount(() => {
    getLocation();
  });
</script>

<main class="bg-gray-200 min-h-screen p-8">
  <h1 class="text-4xl font-bold mb-4">Afstand til Mallorca, Spanien</h1>

  {#if distance !== null}
    <p class="text-2xl font-semibold mb-4">
      Du er i øjeblikket {distance.toFixed(2)} KM væk fra Mallorca, Spanien.
    </p>
  {:else}
    <button class="px-4 py-2 bg-blue-500 text-white rounded shadow hover:bg-blue-700 transition-colors" on:click={getLocation}>
      Find min placering
    </button>
  {/if}
</main>

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/tailwindcss/dist/tailwind.min.css">

Koden i denne artikel kan bruges i Svelte REPL (Read-Eval-Print Loop), som er et online værktøj, der giver dig mulighed for at skrive, afprøve og dele Svelte-kode i din browser. Det er en praktisk måde at eksperimentere med Svelte på uden at skulle installere det på din egen computer. Du kan finde Svelte REPL på https://svelte.dev/repl/. Ved at kopiere koden i denne artikel ind i Svelte REPL, kan du straks se, hvordan appen fungerer, og du kan endda dele din kode med andre.

Selvfølgelig kan du også bare besøge dette link: https://svelte.dev/repl/f4f7f78aabed41a0b5608a75ad8572df?version=3.58.0! Hvorfor besvære dig med at kopiere koden ind i Svelte REPL, når du kan besøge linket og få appen til at køre med det samme? Så hvorfor ikke prøve det, og se hvor tæt du er på at besøge Mallorca lige nu! 😎

Og der har du det! En super simpel webapplikation bygget med Svelte, der kan beregne afstanden fra din nuværende placering til Mallorca, Spanien. Alt koden i denne artikel blev genereret med hjælp fra ChatGPT, den smarte AI-baserede assistent, der hjalp med at producere alt indholdet i denne artikel. Så nu kan du med selvsikkerhed præsentere denne app for dine kollegaer og imponere dem med din tekniske kunnen!