Last active
September 13, 2022 21:13
-
-
Save asleepace/d348d162518703b6dc61d63073595a4b to your computer and use it in GitHub Desktop.
Soladex
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
| <html> | |
| <head> | |
| <title>Soladex Corp.</title> | |
| <description></description> | |
| <script> | |
| </script> | |
| </head> | |
| <body> | |
| <div class='header'> | |
| <h1>Soladex Corp.</h1> | |
| <h2>Advanced Solar Technology | |
| </div> | |
| <div class='container'> | |
| <div class="display"> | |
| <h1>Solar Power Index</h1> | |
| <h2 class="address"> | |
| </div> | |
| <h3 style="text-align:center;" id="location"> | |
| loading current location ... | |
| </h3> | |
| <script> | |
| const addressString = useGeolocation() | |
| </script> | |
| </div> | |
| </div> | |
| <div class="widgets"> | |
| </div> | |
| </div> | |
| </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
| import * as React from "https://cdn.skypack.dev/react@17.0.1"; | |
| /** | |
| * Geolocation Hook | |
| * Colin Teahan | |
| * | |
| * This hook is used to load geolocation from Google maps and can be used with either coordinates or | |
| * a normal address. More documentation can be found hereL | |
| * | |
| * https://console.cloud.google.com/google/maps-apis/overview | |
| * | |
| * Make sure to create an API_KEY on Google cloud which does support a free trial, but does | |
| * eventually cost money. | |
| */ | |
| const API_KEY = "AIzaSyAZjry2U8FIU1lLaPls1fMtg1yhlanFu6Y"; | |
| export type Coordinates = { | |
| longitude: number; | |
| latitude: number; | |
| }; | |
| export type Geolocation = { | |
| coords?: Coordinates; | |
| }; | |
| /** This function is used to get the coordinates from the users current address */ | |
| function getCurrentCoordinates(): Promise<Coordinates> { | |
| return new Promise((resolve, reject) => { | |
| navigator.geolocation.getCurrentPosition(({ coords }: Geolocation) => { | |
| if (!coords?.latitude || !coords?.longitude) | |
| return reject(new Error("[useGeolocation] failed loading coordinates ...")); | |
| resolve({ ...coords }); | |
| }); | |
| }); | |
| } | |
| /** This function is used to convert geolocation data into a url string */ | |
| function getCoordinateUrl({ latitude, longitude }: Coordinates): string { | |
| return `https://maps.googleapis.com/maps/api/geocode/json?latlng=${latitude},${longitude}&key=${API_KEY}`; | |
| } | |
| /** Fetch the users current location and retrieve the address */ | |
| async function useGeolocation(): Promise<any> { | |
| try { | |
| const geolocation = await getCurrentCoordinates(); | |
| const coordinateUrl = getCoordinateUrl(geolocation); | |
| const addressData = await fetch(coordinateUrl); | |
| const address = await addressData.json(); | |
| return address; | |
| } catch (error) { | |
| console.error(error); | |
| } finally { | |
| return { error: "Failed to load geolocation" }; | |
| } | |
| } | |
| useGeolocation(); |
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
| <script src="https://cdnjs.cloudflare.com/ajax/libs/react/18.2.0/umd/react.production.min.js"></script> |
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
| html { | |
| overflow: hidden; | |
| font-family: "Montserrat", sans-serif; | |
| width: 100%; | |
| height: 100%; | |
| flex-direction: column; | |
| display: flex; | |
| flex: 1; | |
| } | |
| body { | |
| width: 100%; | |
| height: 100%; | |
| display: flex; | |
| overflow: hidden; | |
| -webkit-font-smoothing: antialiased; | |
| color: #202124; | |
| margin: 0; | |
| text-size-adjust: 100%; | |
| padding: 0px; | |
| flex-direction: column; | |
| flex: 1; | |
| } | |
| h1 { | |
| font-size: 50px; | |
| line-height: 60px; | |
| margin: 0px; | |
| } | |
| h2 { | |
| font-size: 22px; | |
| line-height: 34px; | |
| font-weight: 320; | |
| color: rgba(0, 0, 0, 0.8); | |
| margin: 0px; | |
| } | |
| h3 { | |
| font-size: 14px; | |
| line-height: 24px; | |
| font-weight: 500; | |
| color: rgba(0, 0, 0, 0.7); | |
| margin: 0px; | |
| } | |
| .container { | |
| padding: 16px; | |
| flex-direction: column; | |
| align-items: center; | |
| justify-content: center; | |
| display: flex; | |
| height: 100%; | |
| flex: 1; | |
| } | |
| .widgets { | |
| background-color: "red"; | |
| display: flex; | |
| margin: 16px; | |
| } | |
| .header { | |
| box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px; | |
| padding: 32px; | |
| position: absolute; | |
| left: 0; | |
| right: 0; | |
| top: 0; | |
| } | |
| .display: { | |
| padding: 16px; | |
| text-align: center; | |
| flex-direction: center; | |
| align-items: center; | |
| justify-content: center; | |
| display: flex; | |
| flex: 1; | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment