Last active
February 21, 2021 02:00
-
-
Save steveshead/e115fe26941e72eb1804c92f6a9a7425 to your computer and use it in GitHub Desktop.
[Javascript - Promisifying the Geolocation API] - promisifying the geolocation API to show country details in HTML, and location details in the console.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8" /> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0" /> | |
| <meta http-equiv="X-UA-Compatible" content="ie=edge" /> | |
| <link rel="stylesheet" href="style.css" /> | |
| <script defer src="script.js"></script> | |
| <script defer src="assignments.js"></script> | |
| <title>Asynchronous JavaScript</title> | |
| </head> | |
| <body> | |
| <main class="container"> | |
| <div class="countries"> | |
| </div> | |
| <button class="btn-country" style="margin-top: 15px">Where am I?</button> | |
| <div class="images"></div> | |
| </main> | |
| </body> | |
| </html> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| 'use strict'; | |
| const btn = document.querySelector('.btn-country'); | |
| const countriesContainer = document.querySelector('.countries'); | |
| const renderError = function (msg) { | |
| countriesContainer.insertAdjacentText('beforeend', msg); | |
| } | |
| const renderCountry = function (data, className = '') { | |
| const html = ` | |
| <article class="country ${className}"> | |
| <img class="country__img" src="${data.flag}" /> | |
| <div class="country__data"> | |
| <h3 class="country__name">${data.name}</h3> | |
| <h4 class="country__region">${data.region}</h4> | |
| <p class="country__row"><span>👫</span>${(+data.population / 1000000).toFixed(1)}m people</p> | |
| <p class="country__row"><span>🗣️</span>${data.languages[0].name}</p> | |
| <p class="country__row"><span>💰</span>${data.currencies[0].name}</p> | |
| </div> | |
| </article>`; | |
| countriesContainer.insertAdjacentHTML('beforeend', html); | |
| countriesContainer.style.opacity = 1; | |
| }; | |
| const getPosition = function () { | |
| return new Promise( function(resolve, reject) { | |
| navigator.geolocation.getCurrentPosition(resolve, reject); | |
| }); | |
| }; | |
| // getPosition().then(pos => console.log(pos)); | |
| const whereAmI = function (lat, lng) { | |
| getPosition().then(pos => { | |
| const {latitude: lat, longitude: lng} = pos.coords; | |
| return fetch(`https://geocode.xyz/${lat},${lng}?geoit=json`) | |
| }) | |
| .then(res => { | |
| if (!res.ok) throw new Error(`Problem with geocoding ${res.status}`); | |
| return res.json(); | |
| }) | |
| .then(data => { | |
| console.log(`You are in ${data.city}, ${data.country}`); | |
| return fetch(`https://restcountries.eu/rest/v2/name/${data.country}`); | |
| }) | |
| .then(res => { | |
| if (!res.ok) throw new Error(`Country not found (${res.status})`); | |
| return res.json(); | |
| }) | |
| .then(data => renderCountry(data[0])) | |
| .catch(err => console.error(`${err.message} 💥`)); | |
| countriesContainer.style.opacity = 1; | |
| }; | |
| btn.addEventListener('click', whereAmI); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| * { | |
| margin: 0; | |
| padding: 0; | |
| box-sizing: inherit; | |
| } | |
| html { | |
| font-size: 62.5%; | |
| box-sizing: border-box; | |
| } | |
| body { | |
| font-family: system-ui; | |
| color: #555; | |
| background-color: #f7f7f7; | |
| min-height: 100vh; | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| } | |
| .container { | |
| display: flex; | |
| flex-flow: column; | |
| align-items: center; | |
| } | |
| .countries { | |
| /* margin-bottom: 8rem; */ | |
| display: flex; | |
| font-size: 2rem; | |
| opacity: 0; | |
| transition: opacity 1s; | |
| } | |
| .country { | |
| background-color: #fff; | |
| box-shadow: 0 2rem 5rem 1rem rgba(0, 0, 0, 0.1); | |
| font-size: 1.8rem; | |
| width: 30rem; | |
| border-radius: 0.7rem; | |
| margin: 0 3rem; | |
| /* overflow: hidden; */ | |
| } | |
| .neighbor::before { | |
| content: 'neighbor country'; | |
| width: 100%; | |
| position: absolute; | |
| top: -4rem; | |
| text-align: center; | |
| font-size: 1.8rem; | |
| font-weight: 600; | |
| text-transform: uppercase; | |
| color: #888; | |
| } | |
| .neighbor { | |
| transform: scale(0.8) translateY(1rem); | |
| margin-left: 0; | |
| } | |
| .country__img { | |
| width: 30rem; | |
| height: 17rem; | |
| object-fit: cover; | |
| background-color: #eee; | |
| border-top-left-radius: 0.7rem; | |
| border-top-right-radius: 0.7rem; | |
| } | |
| .country__data { | |
| padding: 2.5rem 3.75rem 3rem 3.75rem; | |
| } | |
| .country__name { | |
| font-size: 2.7rem; | |
| margin-bottom: 0.7rem; | |
| } | |
| .country__region { | |
| font-size: 1.4rem; | |
| margin-bottom: 2.5rem; | |
| text-transform: uppercase; | |
| color: #888; | |
| } | |
| .country__row:not(:last-child) { | |
| margin-bottom: 1rem; | |
| } | |
| .country__row span { | |
| display: inline-block; | |
| margin-right: 2rem; | |
| font-size: 2.4rem; | |
| } | |
| .btn-country { | |
| border: none; | |
| font-size: 2rem; | |
| padding: 2rem 5rem; | |
| border-radius: 0.7rem; | |
| color: white; | |
| background-color: orangered; | |
| cursor: pointer; | |
| } | |
| .images { | |
| display: flex; | |
| } | |
| .images img { | |
| display: block; | |
| width: 80rem; | |
| margin: 4rem; | |
| } | |
| .images img.parallel { | |
| width: 40rem; | |
| margin: 2rem; | |
| border: 3rem solid white; | |
| box-shadow: 0 2rem 5rem 1rem rgba(0, 0, 0, 0.1); | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment