A Pen by Stephen Ochieng on CodePen.
Created
November 12, 2019 11:11
-
-
Save itsRealoj/639f5540e50a550cd1eb5d918e99c9ec to your computer and use it in GitHub Desktop.
Geo-location
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> | |
| <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"> | |
| <title>Geo-search</title> | |
| </head> | |
| <body> | |
| <div class="location"> | |
| <h1 class="location-timezone">Timezone</h1> | |
| <canvas class="icon" width="128" height="128"></canvas> | |
| </div> | |
| <div class="temperature-section"> | |
| <div class="degree-section"> | |
| <h2 class="temperature-degree">37</h2> | |
| <span>F</span> | |
| </div> | |
| <div class="temperature-description">It's quite warm!</div> | |
| </div> | |
| <script src="skycons.js"></script> | |
| <script src="app.js"></script> | |
| </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
| window.addEventListener('load', ()=> { | |
| let long; | |
| let lat; | |
| let temperatureDescription = document.querySelector('.temperature-description'); | |
| let temperatureDegree = document.querySelector('.temperature-degree'); | |
| let locationTimezone = document.querySelector('.location-timezone'); | |
| let temperatureSection = document.querySelector('.temperature-section'); | |
| const temperatureSpan = document.querySelector('.temperature-section span'); | |
| if(navigator.geolocation){ | |
| navigator.geolocation.getCurrentPosition(position => { | |
| long = position.coords.longitude; | |
| lat = position.coords.latitude; | |
| // This API enables cross-origin requests to anywhere. | |
| const proxy = 'https://cors-anywhere.herokuapp.com/' | |
| const api = `${proxy}https://api.darksky.net/forecast/d6e15489ae7bca051e4013c6c707907a/${lat},${long}`; | |
| fetch(api) | |
| .then(response => { | |
| return response.json(); | |
| }) | |
| .then(data => { | |
| console.log(data); | |
| const {temperature, summary, icon} = data.currently; | |
| //set DOM Elements from the API | |
| temperatureDegree.textContent = temperature; | |
| temperatureDescription.textContent = summary; | |
| locationTimezone.textContent = data.timezone; | |
| // FORMULA FOR CELSIUS | |
| let celsius = (temperature - 32) * (5 / 9); | |
| //Set Icon | |
| setIcons(icon, document.querySelector('.icon')); | |
| //Change temperature to Celsius/Farenheit | |
| temperatureSection.addEventListener('click', () => { | |
| if(temperatureSpan.textContent === "F"){ | |
| temperatureSpan.textContent = "C"; | |
| temperatureDegree.textContent = Math.ceil(celsius); | |
| } else { | |
| temperatureSpan.textContent = "F"; | |
| temperatureDegree.textContent= temperature; | |
| } | |
| }); | |
| }); | |
| }); | |
| } | |
| function setIcons(icon, iconID) { | |
| const skycons = new Skycons({color: "white"}); | |
| const currentIcon = icon.replace(/-/g, "_").toUpperCase(); | |
| skycons.play(); | |
| return skycons.set(iconID, Skycons[currentIcon]); | |
| } | |
| }); |
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: border-box; | |
| } | |
| body { | |
| height: 100vh; | |
| display: flex; | |
| justify-content: center; | |
| flex-direction: column; | |
| align-items: center; | |
| background: linear-gradient(rgb(47,150,163), rgb(48,62,143)); | |
| font-family: sans-serif; | |
| color: white; | |
| } | |
| .location, | |
| .temperature-section { | |
| height: 30vh; | |
| width: 50%; | |
| display: flex; | |
| justify-content: space-around; | |
| align-items: center; | |
| } | |
| .temperature-section { | |
| flex-direction: column; | |
| } | |
| .degree-section { | |
| display: flex; | |
| align-items: center; | |
| cursor: pointer; | |
| } | |
| .degree-section span { | |
| margin: 10px; | |
| font-size: 30px; | |
| } | |
| .degree-section h2 { | |
| font-size: 40px; | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment