Projenin demosu : Demo
Başlangıç dosyalarını bulabileceğiniz repom: js-30 | github
Javascript 30 challenge serisinde bugün için orijinal seride pusula ve hızı gösteren bir proje yapılması öneriliyordu. Ancak bu proje yalnızca mobil cihazlarda çalıştığından ve her tarayıcıda sorunsuz çalışmamasından dolayı, ben farklı bir proje yapmayı tercih ettim.
Amaç
Bu projede Geolocation API kullanarak konum izni aldıktan sonra kullanıcının bulunduğu kıta,ülke ve şehir bilgilerini göstereceğiz.
Çözümüm
<script>
const result = document.querySelector('#result');
navigator.geolocation.getCurrentPosition((data) => {
// enlem boylam bilgisini alalım
const {latitude, longitude} = data.coords
// api'ya enlem/boylam bilgisiyla istek atalım ve
// kıta / ülke / sehir bilgisini alalım
const url = `https://api.bigdatacloud.net/data/reverse-geocode-client?latitude=${latitude}&longitude=${longitude}&localityLanguage=en`
fetch(url)
.then(res => res.json())
.then(data => {
// dönen veriden kıta/ ülke / sehir bilgisini çekelim
const {continent, city, countryName} = data
// dom'a yazılacak metni oluşturalım ve elementi h1 elementinden sonra ekleyelim
const resultStr = `${continent} - ${countryName} - ${city}`
const resultElement = document.createElement('h2')
resultElement.textContent = resultStr
result.after(resultElement)
})
console.log(data);
}, (err) => {
// hata olduğunda dom'a hata mesaji yazalım
const resultElement = document.createElement('h2')
resultElement.textContent = 'Could not find your location!'
result.after(resultElement)
console.error(err);
alert(err.message)
});
</script>