From 10b872b6ce4c2e6846e2c0683f2135771181b2f9 Mon Sep 17 00:00:00 2001 From: Kim Lai Date: Thu, 28 Jan 2021 15:47:16 -0500 Subject: [PATCH 1/5] added api key file to git ignore --- .gitignore | 105 +--------------------------------------------------- app.js | 95 +++++++++++++++++++++++++++++++++++++++++++++++ index.html | 106 ++++++++++++++++++++++++++++++++++++++++++++++++----- styles.css | 32 ++++++++++++++++ 4 files changed, 225 insertions(+), 113 deletions(-) create mode 100644 app.js create mode 100644 styles.css diff --git a/.gitignore b/.gitignore index 6704566..665baf0 100644 --- a/.gitignore +++ b/.gitignore @@ -1,104 +1 @@ -# Logs -logs -*.log -npm-debug.log* -yarn-debug.log* -yarn-error.log* -lerna-debug.log* - -# Diagnostic reports (https://nodejs.org/api/report.html) -report.[0-9]*.[0-9]*.[0-9]*.[0-9]*.json - -# Runtime data -pids -*.pid -*.seed -*.pid.lock - -# Directory for instrumented libs generated by jscoverage/JSCover -lib-cov - -# Coverage directory used by tools like istanbul -coverage -*.lcov - -# nyc test coverage -.nyc_output - -# Grunt intermediate storage (https://gruntjs.com/creating-plugins#storing-task-files) -.grunt - -# Bower dependency directory (https://bower.io/) -bower_components - -# node-waf configuration -.lock-wscript - -# Compiled binary addons (https://nodejs.org/api/addons.html) -build/Release - -# Dependency directories -node_modules/ -jspm_packages/ - -# TypeScript v1 declaration files -typings/ - -# TypeScript cache -*.tsbuildinfo - -# Optional npm cache directory -.npm - -# Optional eslint cache -.eslintcache - -# Microbundle cache -.rpt2_cache/ -.rts2_cache_cjs/ -.rts2_cache_es/ -.rts2_cache_umd/ - -# Optional REPL history -.node_repl_history - -# Output of 'npm pack' -*.tgz - -# Yarn Integrity file -.yarn-integrity - -# dotenv environment variables file -.env -.env.test - -# parcel-bundler cache (https://parceljs.org/) -.cache - -# Next.js build output -.next - -# Nuxt.js build / generate output -.nuxt -dist - -# Gatsby files -.cache/ -# Comment in the public line in if your project uses Gatsby and *not* Next.js -# https://nextjs.org/blog/next-9-1#public-directory-support -# public - -# vuepress build output -.vuepress/dist - -# Serverless directories -.serverless/ - -# FuseBox cache -.fusebox/ - -# DynamoDB Local files -.dynamodb/ - -# TernJS port file -.tern-port +apikeys.js diff --git a/app.js b/app.js new file mode 100644 index 0000000..5895dc8 --- /dev/null +++ b/app.js @@ -0,0 +1,95 @@ +// DOM elements for current weather +const place = document.querySelector('.placeName'); +const currentWeatherDiv = document.querySelector('.currentWeather'); +// DOM elements for future weather +const weatherPic = document.querySelector('img'); +const futureDates = document.querySelectorAll('.date'); +const icons = document.querySelectorAll('.icons'); +const minWeather = document.querySelectorAll('.min'); +const maxWeather = document.querySelectorAll('.max'); + +console.log(futureDates); + +let datesData = []; + +const weekday = new Array(7); +weekday[0] = "Sunday"; +weekday[1] = "Monday"; +weekday[2] = "Tuesday"; +weekday[3] = "Wednesday"; +weekday[4] = "Thursday"; +weekday[5] = "Friday"; +weekday[6] = "Saturday"; + +let inputZipCode = 19801; + +const getLocation = async () => { + try{ + const res = await axios.get(`http://api.zippopotam.us/us/${inputZipCode}`); + const {data: + {places : + [{'place name': placeName, 'state abbreviation': state, longitude: lon, latitude: lat}] + }}= res; + place.innerHTML = `${placeName}, ${state}`; + getWeather(lon, lat); + } + catch(e){ + console.log(e); + } +} + +const getWeather = async (lon, lat) => { + try{ + const res = await axios.get(`https://api.openweathermap.org/data/2.5/onecall?lat=${lat}&lon=${lon}&exclude=minutely,hourly&units=imperial&appid=${APIKey}`); + + getCurrentWeather(res); + + getDailyWeather(res); + } + + catch(e){ + console.log(e); + } +} + +const getCurrentWeather = async (res) => { + //assign res current weather data to a variable + const {data: + {current : + {temp: temperature, + weather: + [{icon: iconlogo}] + }}} = res; + + // show icon value on html + currentWeatherDiv.innerText = Math.trunc(temperature); + weatherPic.src = `http://openweathermap.org/img/wn/${iconlogo}@2x.png`; + +} + +const getDailyWeather = async (res) => { + //show day on html (map) + const dailyDates = res.data.daily.map((i) => ({date: i.dt, min:i.temp.min, max:i.temp.max, icon:i.weather[0].icon})).map(convertDate).forEach(showDay); + +} + +function convertDate ({date, min, max, icon }){ + //console.log({date,min,max,icon}); + + return {day:weekday[new Date(date * 1000).getDay()], + min, max, icon} +} + +function showDay({day, min,max,icon},index){ + // console.log(day) + let currentDay = futureDates[index]; + let currentIconLogo = icons[index]; + let currentMin = minWeather[index]; + let currentMax = maxWeather[index]; + currentDay.innerText = day; + currentIconLogo.src = `http://openweathermap.org/img/wn/${icon}@2x.png`; + currentMin.innerText = Math.trunc(min); + currentMax.innerText = Math.trunc(max); + // futureDates[index].innerText = `${day} ${min} ${max}`; +} +getLocation(); \ No newline at end of file diff --git a/index.html b/index.html index 3233671..931c20d 100644 --- a/index.html +++ b/index.html @@ -1,11 +1,99 @@ - - - - - Document - - -

Hola Mundo

- + + + + + + + + + + + +
+
+

+
+ +

+
+
+ +
+
+

+ +
+

+

+
+
+ +
+

+ +
+

+

+
+
+ +
+

+ +
+

+

+
+
+ +
+

+ +
+

+

+
+
+ +
+

+ +
+

+

+
+
+ +
+

+ +
+

+

+
+
+ +
+

+ +
+

+

+
+
+ +
+

+ +
+

+

+
+
+
+
+ + + \ No newline at end of file diff --git a/styles.css b/styles.css new file mode 100644 index 0000000..e4510ce --- /dev/null +++ b/styles.css @@ -0,0 +1,32 @@ +*{ + box-sizing: border-box; +} +.header{ + display: flex; + justify-content: space-between; +} +.currentWeather{ + font-size: 2.5rem; +} +.container{ + width: 70%; + margin: 5rem auto; +} +.currentWeatherDiv{ + display: flex; + flex-direction: row; +} +.placeName{ + margin: auto 0; +} +.main { + display: grid; + grid-template-columns: repeat(auto-fit, minmax(100px, 1fr)) +} +.weatherRange{ + display: flex; + justify-content: space-evenly; +} +.futureWeather{ + text-align: center; +} \ No newline at end of file From c20b446ce0810fd7d391bca25ebd5c5ecd715ca5 Mon Sep 17 00:00:00 2001 From: Kim Lai Date: Fri, 29 Jan 2021 15:12:07 -0500 Subject: [PATCH 2/5] get browser location --- .DS_Store | Bin 0 -> 6148 bytes app.js | 32 +++++++++++++++++--------------- index.html | 3 +++ styles.css | 4 ++++ 4 files changed, 24 insertions(+), 15 deletions(-) create mode 100644 .DS_Store diff --git a/.DS_Store b/.DS_Store new file mode 100644 index 0000000000000000000000000000000000000000..b8bc70ff7a64adfd90851fdff0755d74349b2b94 GIT binary patch literal 6148 zcmeHK%TB{E5S$HB)rL!tT#)hwmH2~Dr3VgN;0K^BDvv-bwMcNwosZ%BIKiyfs)!3$ zB&uD>JAUlg$=J%q0A&0;KLLgS`YejsfbIv=aV7WZ&0AkMWV65w1LOEr`Dq?HM5tVLiI)$FD@(kgNLZcommwTd8M=1`T!F3v2i6>F{-6AQ|L>B# zNn^<_QgE5+Qp^KzPNOO`7ZHH~Wxw-i=FDrT&v;v<$|>@T%KtRl9C?4kLO NK#;+mEAXcZd;ukQTHOEu literal 0 HcmV?d00001 diff --git a/app.js b/app.js index 5895dc8..b781dad 100644 --- a/app.js +++ b/app.js @@ -21,33 +21,36 @@ weekday[4] = "Thursday"; weekday[5] = "Friday"; weekday[6] = "Saturday"; -let inputZipCode = 19801; - const getLocation = async () => { + navigator.geolocation.getCurrentPosition(getBrowserLocation, console.log); +} + +const getBrowserLocation = async (position) => { try{ - const res = await axios.get(`http://api.zippopotam.us/us/${inputZipCode}`); + const {latitude, longitude} = position.coords; + const res = await axios.get(`https://api.opencagedata.com/geocode/v1/json?q=${latitude}+${longitude}&key=${APILocationKey}`); + console.log(res.data.results); const {data: - {places : - [{'place name': placeName, 'state abbreviation': state, longitude: lon, latitude: lat}] - }}= res; - place.innerHTML = `${placeName}, ${state}`; - getWeather(lon, lat); - } - catch(e){ + {results: + [{components: + {city: city, "state_code": stateCode}}] }} = res; + place.innerHTML = `${city}, ${stateCode}`; + getWeather(longitude, latitude); + }catch(e){ console.log(e); } } -const getWeather = async (lon, lat) => { - try{ - const res = await axios.get(`https://api.openweathermap.org/data/2.5/onecall?lat=${lat}&lon=${lon}&exclude=minutely,hourly&units=imperial&appid=${APIKey}`); +const getWeather = async (longitude, latitude) => { + try { + const res = await axios.get(`https://api.openweathermap.org/data/2.5/onecall?lat=${latitude}&lon=${longitude}&exclude=minutely,hourly&units=imperial&appid=${APIKey}`); getCurrentWeather(res); getDailyWeather(res); } - catch(e){ + catch (e) { console.log(e); } } @@ -92,4 +95,3 @@ function showDay({day, min,max,icon},index){ currentMax.innerText = Math.trunc(max); // futureDates[index].innerText = `${day} ${min} ${max}`; } -getLocation(); \ No newline at end of file diff --git a/index.html b/index.html index 931c20d..52e1542 100644 --- a/index.html +++ b/index.html @@ -6,8 +6,11 @@ + + +
diff --git a/styles.css b/styles.css index e4510ce..2992721 100644 --- a/styles.css +++ b/styles.css @@ -1,5 +1,6 @@ *{ box-sizing: border-box; + font-family: 'Roboto', sans-serif; } .header{ display: flex; @@ -23,6 +24,9 @@ display: grid; grid-template-columns: repeat(auto-fit, minmax(100px, 1fr)) } +.min{ + color: grey; +} .weatherRange{ display: flex; justify-content: space-evenly; From f137baf44ca5ab966c0771a71df1e11b7b1550e2 Mon Sep 17 00:00:00 2001 From: Kim Lai Date: Fri, 29 Jan 2021 15:55:54 -0500 Subject: [PATCH 3/5] final commit --- app.js | 46 +++++++++++++++------------------------------- 1 file changed, 15 insertions(+), 31 deletions(-) diff --git a/app.js b/app.js index b781dad..f5a58f1 100644 --- a/app.js +++ b/app.js @@ -8,10 +8,6 @@ const icons = document.querySelectorAll('.icons'); const minWeather = document.querySelectorAll('.min'); const maxWeather = document.querySelectorAll('.max'); -console.log(futureDates); - -let datesData = []; - const weekday = new Array(7); weekday[0] = "Sunday"; weekday[1] = "Monday"; @@ -20,36 +16,34 @@ weekday[3] = "Wednesday"; weekday[4] = "Thursday"; weekday[5] = "Friday"; weekday[6] = "Saturday"; - -const getLocation = async () => { - navigator.geolocation.getCurrentPosition(getBrowserLocation, console.log); +//get browser's location +const getBrowsersLocation = async () => { + navigator.geolocation.getCurrentPosition(passLocation, console.log); } - -const getBrowserLocation = async (position) => { +// +const passLocation = async (position) => { try{ const {latitude, longitude} = position.coords; - const res = await axios.get(`https://api.opencagedata.com/geocode/v1/json?q=${latitude}+${longitude}&key=${APILocationKey}`); + const res = await axios.get(`http://api.opencagedata.com/geocode/v1/json?q=${latitude}+${longitude}&key=${APILocationKey}`); console.log(res.data.results); const {data: {results: [{components: {city: city, "state_code": stateCode}}] }} = res; place.innerHTML = `${city}, ${stateCode}`; - getWeather(longitude, latitude); + getAllWeather(longitude, latitude); }catch(e){ console.log(e); } } -const getWeather = async (longitude, latitude) => { +const getAllWeather = async (longitude, latitude) => { try { - const res = await axios.get(`https://api.openweathermap.org/data/2.5/onecall?lat=${latitude}&lon=${longitude}&exclude=minutely,hourly&units=imperial&appid=${APIKey}`); - + const res = await axios.get(`http://api.openweathermap.org/data/2.5/onecall?lat=${latitude}&lon=${longitude}&exclude=minutely,hourly&units=imperial&appid=${APIKey}`); + getCurrentWeather(res); - getDailyWeather(res); } - catch (e) { console.log(e); } @@ -63,7 +57,6 @@ const getCurrentWeather = async (res) => { weather: [{icon: iconlogo}] }}} = res; - // show icon value on html currentWeatherDiv.innerText = Math.trunc(temperature); weatherPic.src = `http://openweathermap.org/img/wn/${iconlogo}@2x.png`; @@ -71,27 +64,18 @@ const getCurrentWeather = async (res) => { } const getDailyWeather = async (res) => { - //show day on html (map) - const dailyDates = res.data.daily.map((i) => ({date: i.dt, min:i.temp.min, max:i.temp.max, icon:i.weather[0].icon})).map(convertDate).forEach(showDay); - + res.data.daily.map((i) => ({date: i.dt, min:i.temp.min, max:i.temp.max, icon:i.weather[0].icon})).map(convertDate).forEach(showDay); } function convertDate ({date, min, max, icon }){ - //console.log({date,min,max,icon}); - return {day:weekday[new Date(date * 1000).getDay()], min, max, icon} } function showDay({day, min,max,icon},index){ // console.log(day) - let currentDay = futureDates[index]; - let currentIconLogo = icons[index]; - let currentMin = minWeather[index]; - let currentMax = maxWeather[index]; - currentDay.innerText = day; - currentIconLogo.src = `http://openweathermap.org/img/wn/${icon}@2x.png`; - currentMin.innerText = Math.trunc(min); - currentMax.innerText = Math.trunc(max); - // futureDates[index].innerText = `${day} ${min} ${max}`; + futureDates[index].innerText = day; + icons[index].src = `http://openweathermap.org/img/wn/${icon}@2x.png`; + minWeather[index].innerText = Math.trunc(min); + maxWeather[index].innerText = Math.trunc(max); } From 8b613c6c6d1fabe0a15e36f069a97daf3af62262 Mon Sep 17 00:00:00 2001 From: Kim Lai Date: Fri, 29 Jan 2021 18:14:38 -0500 Subject: [PATCH 4/5] final push --- app.js | 11 ++++++++--- 1 file changed, 8 insertions(+), 3 deletions(-) diff --git a/app.js b/app.js index f5a58f1..28cc000 100644 --- a/app.js +++ b/app.js @@ -18,14 +18,18 @@ weekday[5] = "Friday"; weekday[6] = "Saturday"; //get browser's location const getBrowsersLocation = async () => { - navigator.geolocation.getCurrentPosition(passLocation, console.log); + navigator.geolocation.getCurrentPosition(passLocation, error); + } +function error(){ + placeName.innerText = "please enable location"; +} + // const passLocation = async (position) => { try{ const {latitude, longitude} = position.coords; const res = await axios.get(`http://api.opencagedata.com/geocode/v1/json?q=${latitude}+${longitude}&key=${APILocationKey}`); - console.log(res.data.results); const {data: {results: [{components: @@ -73,9 +77,10 @@ function convertDate ({date, min, max, icon }){ } function showDay({day, min,max,icon},index){ - // console.log(day) futureDates[index].innerText = day; icons[index].src = `http://openweathermap.org/img/wn/${icon}@2x.png`; minWeather[index].innerText = Math.trunc(min); maxWeather[index].innerText = Math.trunc(max); } + +getBrowsersLocation(); \ No newline at end of file From ac7afd82da70f0b0b6a54ac15872fdac64594f56 Mon Sep 17 00:00:00 2001 From: Kim Lai Date: Fri, 29 Jan 2021 22:40:24 -0500 Subject: [PATCH 5/5] add loading screen --- app.js | 5 +-- index.html | 11 +++++- styles.css | 102 ++++++++++++++++++++++++++++++++++++++++++++++++++++- 3 files changed, 114 insertions(+), 4 deletions(-) diff --git a/app.js b/app.js index 28cc000..1f2035e 100644 --- a/app.js +++ b/app.js @@ -7,7 +7,7 @@ const futureDates = document.querySelectorAll('.date'); const icons = document.querySelectorAll('.icons'); const minWeather = document.querySelectorAll('.min'); const maxWeather = document.querySelectorAll('.max'); - +const loader = document.querySelector('.loader'); const weekday = new Array(7); weekday[0] = "Sunday"; weekday[1] = "Monday"; @@ -69,6 +69,7 @@ const getCurrentWeather = async (res) => { const getDailyWeather = async (res) => { res.data.daily.map((i) => ({date: i.dt, min:i.temp.min, max:i.temp.max, icon:i.weather[0].icon})).map(convertDate).forEach(showDay); + loader.classList.add('loading--inactive'); } function convertDate ({date, min, max, icon }){ @@ -83,4 +84,4 @@ function showDay({day, min,max,icon},index){ maxWeather[index].innerText = Math.trunc(max); } -getBrowsersLocation(); \ No newline at end of file +getBrowsersLocation(); \ No newline at end of file diff --git a/index.html b/index.html index 52e1542..64c27b0 100644 --- a/index.html +++ b/index.html @@ -13,6 +13,13 @@ +
+
+
+

loading...

+
+ +

@@ -99,4 +106,6 @@

- \ No newline at end of file + + + diff --git a/styles.css b/styles.css index 2992721..0948a39 100644 --- a/styles.css +++ b/styles.css @@ -33,4 +33,104 @@ } .futureWeather{ text-align: center; -} \ No newline at end of file +} + + +.loading--inactive { + visibility: hidden; +} + +.loading { + + color: #EC6E4C; + font-size: 90px; + text-indent: -9999em; + overflow: hidden; + width: 1em; + height: 1em; + border-radius: 50%; + margin: 72px auto; + position: relative; + -webkit-transform: translateZ(0); + -ms-transform: translateZ(0); + transform: translateZ(0); + -webkit-animation: load6 1.7s infinite ease, round 1.7s infinite ease; + animation: load6 1.7s infinite ease, round 1.7s infinite ease; + } + @-webkit-keyframes load6 { + 0% { + box-shadow: 0 -0.83em 0 -0.4em, 0 -0.83em 0 -0.42em, 0 -0.83em 0 -0.44em, 0 -0.83em 0 -0.46em, 0 -0.83em 0 -0.477em; + } + 5%, + 95% { + box-shadow: 0 -0.83em 0 -0.4em, 0 -0.83em 0 -0.42em, 0 -0.83em 0 -0.44em, 0 -0.83em 0 -0.46em, 0 -0.83em 0 -0.477em; + } + 10%, + 59% { + box-shadow: 0 -0.83em 0 -0.4em, -0.087em -0.825em 0 -0.42em, -0.173em -0.812em 0 -0.44em, -0.256em -0.789em 0 -0.46em, -0.297em -0.775em 0 -0.477em; + } + 20% { + box-shadow: 0 -0.83em 0 -0.4em, -0.338em -0.758em 0 -0.42em, -0.555em -0.617em 0 -0.44em, -0.671em -0.488em 0 -0.46em, -0.749em -0.34em 0 -0.477em; + } + 38% { + box-shadow: 0 -0.83em 0 -0.4em, -0.377em -0.74em 0 -0.42em, -0.645em -0.522em 0 -0.44em, -0.775em -0.297em 0 -0.46em, -0.82em -0.09em 0 -0.477em; + } + 100% { + box-shadow: 0 -0.83em 0 -0.4em, 0 -0.83em 0 -0.42em, 0 -0.83em 0 -0.44em, 0 -0.83em 0 -0.46em, 0 -0.83em 0 -0.477em; + } + } + @keyframes load6 { + 0% { + box-shadow: 0 -0.83em 0 -0.4em, 0 -0.83em 0 -0.42em, 0 -0.83em 0 -0.44em, 0 -0.83em 0 -0.46em, 0 -0.83em 0 -0.477em; + } + 5%, + 95% { + box-shadow: 0 -0.83em 0 -0.4em, 0 -0.83em 0 -0.42em, 0 -0.83em 0 -0.44em, 0 -0.83em 0 -0.46em, 0 -0.83em 0 -0.477em; + } + 10%, + 59% { + box-shadow: 0 -0.83em 0 -0.4em, -0.087em -0.825em 0 -0.42em, -0.173em -0.812em 0 -0.44em, -0.256em -0.789em 0 -0.46em, -0.297em -0.775em 0 -0.477em; + } + 20% { + box-shadow: 0 -0.83em 0 -0.4em, -0.338em -0.758em 0 -0.42em, -0.555em -0.617em 0 -0.44em, -0.671em -0.488em 0 -0.46em, -0.749em -0.34em 0 -0.477em; + } + 38% { + box-shadow: 0 -0.83em 0 -0.4em, -0.377em -0.74em 0 -0.42em, -0.645em -0.522em 0 -0.44em, -0.775em -0.297em 0 -0.46em, -0.82em -0.09em 0 -0.477em; + } + 100% { + box-shadow: 0 -0.83em 0 -0.4em, 0 -0.83em 0 -0.42em, 0 -0.83em 0 -0.44em, 0 -0.83em 0 -0.46em, 0 -0.83em 0 -0.477em; + } + } + @-webkit-keyframes round { + 0% { + -webkit-transform: rotate(0deg); + transform: rotate(0deg); + } + 100% { + -webkit-transform: rotate(360deg); + transform: rotate(360deg); + } + } + @keyframes round { + 0% { + -webkit-transform: rotate(0deg); + transform: rotate(0deg); + } + 100% { + -webkit-transform: rotate(360deg); + transform: rotate(360deg); + } + } + + .loader { + position: fixed; + top:0; + left:0; + width: 100%; + height: 100%; + background-color: white; + display: flex; + align-items: center; + justify-content: center; + flex-direction: column; + } \ No newline at end of file