diff --git a/index.html b/index.html index 3233671..46b35f9 100644 --- a/index.html +++ b/index.html @@ -3,9 +3,14 @@ - Document + + Weather App - -

Hola Mundo

+ +
+

Hola Mundo!

+

Temperature

+
- \ No newline at end of file + + diff --git a/indexTemp.html b/indexTemp.html new file mode 100644 index 0000000..8b13789 --- /dev/null +++ b/indexTemp.html @@ -0,0 +1 @@ + diff --git a/package-lock.json b/package-lock.json new file mode 100644 index 0000000..ff68f68 --- /dev/null +++ b/package-lock.json @@ -0,0 +1,33 @@ +{ + "requires": true, + "lockfileVersion": 1, + "dependencies": { + "cross-fetch": { + "version": "3.0.6", + "resolved": "https://registry.npmjs.org/cross-fetch/-/cross-fetch-3.0.6.tgz", + "integrity": "sha512-KBPUbqgFjzWlVcURG+Svp9TlhA5uliYtiNx/0r8nv0pdypeQCRJ9IaSIc3q/x3q8t3F75cHuwxVql1HFGHCNJQ==", + "requires": { + "node-fetch": "2.6.1" + } + }, + "dotenv": { + "version": "8.2.0", + "resolved": "https://registry.npmjs.org/dotenv/-/dotenv-8.2.0.tgz", + "integrity": "sha512-8sJ78ElpbDJBHNeBzUbUVLsqKdccaa/BXF1uPTw3GrvQTBgrQrtObr2mUrE38vzYd8cEv+m/JBfDLioYcfXoaw==" + }, + "node-fetch": { + "version": "2.6.1", + "resolved": "https://registry.npmjs.org/node-fetch/-/node-fetch-2.6.1.tgz", + "integrity": "sha512-V4aYg89jEoVRxRb2fJdAg8FHvI7cEyYdVAh94HH0UIK8oJxUfkjlDQN9RbMx+bEjP7+ggMiFRprSti032Oipxw==" + }, + "opencage-api-client": { + "version": "0.10.0", + "resolved": "https://registry.npmjs.org/opencage-api-client/-/opencage-api-client-0.10.0.tgz", + "integrity": "sha512-t3DaDmXDC9oi3LFJlic76L2iLgs2yoaIIEBZe76CMAvW6hX/QfNUAIwlg3mj9A3JLEvf/2LTw5llyJa1yuesrA==", + "requires": { + "cross-fetch": "^3.0.6", + "dotenv": "^8.2.0" + } + } + } +} diff --git a/style.css b/style.css new file mode 100644 index 0000000..a41b09d --- /dev/null +++ b/style.css @@ -0,0 +1,24 @@ +body { + display: block; + font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; + font-size: 1 rem; +} + +h1 { + display: inline; +} + +.container { + display: grid; +} +.cityState { + justify-self: start; + padding-left: 100px; + font-size: 2rem; +} + +.temperature { + justify-self: end; + padding-right: 100px; + font-size: 3rem; +} diff --git a/weather.js b/weather.js new file mode 100644 index 0000000..87ff696 --- /dev/null +++ b/weather.js @@ -0,0 +1,48 @@ +/* DOM Elements */ + +const cityState = document.querySelector(".cityState"); +const temperature = document.querySelector(".temperature"); + + +/* Helper Functions */ +function convertTemp(temp) { + const celsius = temp -273; + let fahrenheit = Math.floor(celsius * (9/5) + 32); + return fahrenheit; +} + + +/* Fetch Functions */ + +// Fetch location using Geolocator as shown in https://www.youtube.com/watch?v=Xd43hZKaUS0&feature=youtu.be + const successfulLookup = async (position) => { + try { + const {latitude, longitude} = position.coords; + const response = await fetch(`https://api.opencagedata.com/geocode/v1/json?q=${latitude}+${longitude}&key=68824d84dff94b6a8921c156b462a3d1`) + const data = await response.json(); + const city1 = data.results[0].components.city; + const stateData = data.results[0].components.state_code; + cityState.textContent = `${city1}, ${stateData}`; + console.log(latitude, longitude) + currentTemp(latitude, longitude); + } + catch(error) { + console.log(error); + } +} + + +// Fetch weather at openweathermap api + const currentTemp = async (latitude, longitude) => { + try { + const temp = await fetch(`https://api.openweathermap.org/data/2.5/onecall?lat=${latitude}&lon=${longitude}&exclude=minutely,hourly&exclude={part}&appid=0312d87f192d54ce3485295a535d403f`); + const data = await temp.json(); + console.log(data); + let currTemp = convertTemp(data.current.temp); + temperature.innerHTML = `${currTemp}℉`; + } + catch(error) { + console.log(error); + } + } + navigator.geolocation.getCurrentPosition(successfulLookup, console.log); \ No newline at end of file