Entfernungsrechner

Einfach eine Start Postleitzahl eingeben und die Ziel Postleitzahl eingeben und sie bekommen die Entfernung angezeigt. Nur für deutsche Postleitzahlen
Kommentar abgeben zu diesen Beitrag/Code ?
Dann hier klicken

Der hier verwendete Code

<!DOCTYPE html> <html lang="de"> <head> <meta charset="UTF-8"> <title>Document</title> <meta name=viewport content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://unpkg.com/@picocss/pico@latest/css/pico.min.css"> </head> <body class=container> <h1>Entfernung</h1> <form id=getDistance> <label for=plzStart>Start Plz: <input type=text id=plzStart name=plzStart required pattern="^\d{5}"> </label> <label for=plzZiel>Ziel Plz: <input type=text id=plzZiel name=plzStart required pattern="^\d{5}"> </label> <button>Entfernung holen</button> <h2>Entfernung: <span id=distance>?</span> km</h2> </form> <script> async function getUpdate(plzStart,plzZiel){ console.log('https://zip-api.eu/api/v1/distance/DE-'+plzStart+'/DE-'+plzZiel+'/km'); let res = await fetch('https://zip-api.eu/api/v1/distance/DE-'+plzStart+'/DE-'+plzZiel+'/km', { method: 'GET', headers: { "Content-type": "application/json; charset=UTF-8" }, mode:'no-cors' }); data = await res; console.log(data); return data; } document.getElementById('getDistance').addEventListener('submit', (evt)=> { Start=document.getElementById('plzStart').value; Ziel=document.getElementById('plzZiel').value; f=getUpdate(Start,Ziel) console.log(f); //distance.innerText=f.distance.toFixed(2) }) getJson = (url, callBack) => { function handleErrors(response) { if (!response.ok) { throw Error(response.statusText); } return response; } let myRequest = new Request( url ); fetch(myRequest) .then(handleErrors) .then(response => response.json()) .then(data => { callBack(data) }) .catch(error => console.log(error)); } getDistance.addEventListener('submit', (evt)=> { evt.preventDefault() getJson(`https://zip-api.eu/api/v1/distance/DE-${plzStart.value}/DE-${plzZiel.value}/km`, e => console.log(distance.innerText=e.distance.toFixed(2))) return true; }) //https://api.allorigins.win/raw?url= </script> </body> </html>