Skip to content

Final Commit used geolocation #2

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
kimlai07 wants to merge 5 commits into
base: main
Choose a base branch
from
Open

Final Commit used geolocation #2

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
10b872b
added api key file to git ignore
Jan 28, 2021
c20b446
get browser location
Jan 29, 2021
f137baf
final commit
Jan 29, 2021
8b613c6
final push
Jan 29, 2021
ac7afd8
add loading screen
Jan 30, 2021
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Binary file added .DS_Store
View file
Open in desktop
Binary file not shown.
105 changes: 1 addition & 104 deletions .gitignore
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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
87 changes: 87 additions & 0 deletions app.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,87 @@
// 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');
const loader = document.querySelector('.loader');
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";
//get browser's location
const getBrowsersLocation = async () => {
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}`);
const {data:
{results:
[{components:
{city: city, "state_code": stateCode}}] }} = res;
place.innerHTML = `${city}, ${stateCode}`;
getAllWeather(longitude, latitude);
}catch(e){
console.log(e);
}
}

const getAllWeather = async (longitude, latitude) => {
try {
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);
}
}

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) => {
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 }){
return {day:weekday[new Date(date * 1000).getDay()],
min, max, icon}
}

function showDay({day, min,max,icon},index){
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();
120 changes: 110 additions & 10 deletions index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,11 +1,111 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<h1>Hola Mundo</h1>
</body>
</html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title></title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@300&display=swap" rel="stylesheet">
<link rel="stylesheet" href="styles.css">
<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>

</head>
<body>
<div class="loader">
<div class="loading">
</div>
<p>loading...</p>
</div>


<div class="container">
<div class="header">
<h1 class="placeName"></h1>
<div class="currentWeatherDiv">
<img class="img">
<h2 class="currentWeather"></h2>
</div>
</div>

<div class="main">
<div class="futureWeather">
<p class="date"></p>
<img class="icons">
<div class= "weatherRange">
<p class="min"></p>
<p class="max"></p>
</div>
</div>

<div class="futureWeather">
<p class="date"></p>
<img class="icons">
<div class= "weatherRange">
<p class="min"></p>
<p class="max"></p>
</div>
</div>

<div class="futureWeather">
<p class="date"></p>
<img class="icons">
<div class= "weatherRange">
<p class="min"></p>
<p class="max"></p>
</div>
</div>

<div class="futureWeather">
<p class="date"></p>
<img class="icons">
<div class= "weatherRange">
<p class="min"></p>
<p class="max"></p>
</div>
</div>

<div class="futureWeather">
<p class="date"></p>
<img class="icons">
<div class= "weatherRange">
<p class="min"></p>
<p class="max"></p>
</div>
</div>

<div class="futureWeather">
<p class="date"></p>
<img class="icons">
<div class= "weatherRange">
<p class="min"></p>
<p class="max"></p>
</div>
</div>

<div class="futureWeather">
<p class="date"></p>
<img class="icons">
<div class= "weatherRange">
<p class="min"></p>
<p class="max"></p>
</div>
</div>

<div class="futureWeather">
<p class="date"></p>
<img class="icons">
<div class= "weatherRange">
<p class="min"></p>
<p class="max"></p>
</div>
</div>
</div>
</div>
<script src="apikeys.js"></script>
<script src="app.js" async defer></script>
</body>
</html>


Loading