Entfernungsrechner
Einfach eine Start Postleitzahl eingeben und die Ziel Postleitzahl eingeben und sie bekommen die Entfernung angezeigt.
Nur für deutsche Postleitzahlen
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>