Skip to content

Instantly share code, notes, and snippets.

@prof3ssorSt3v3

prof3ssorSt3v3/app.js

Created August 30, 2021 19:28
Show Gist options
  • Save prof3ssorSt3v3/cd1f19bb92da0c48b80aa983484d4a6c to your computer and use it in GitHub Desktop.
Save prof3ssorSt3v3/cd1f19bb92da0c48b80aa983484d4a6c to your computer and use it in GitHub Desktop.
Download ZIP
Raw
app.js
const app = {
init: () => {
document
.getElementById('btnGet')
.addEventListener('click', app.fetchWeather);
document
.getElementById('btnCurrent')
.addEventListener('click', app.getLocation);
},
fetchWeather: (ev) => {
//use the values from latitude and longitude to fetch the weather
let lat = document.getElementById('latitude').value;
let lon = document.getElementById('longitude').value;
let key = '06cc7efd0e5386068ec3c390bcfd0183';
let lang = 'en';
let units = 'metric';
let url = `http://api.openweathermap.org/data/2.5/onecall?lat=${lat}&lon=${lon}&appid=${key}&units=${units}&lang=${lang}`;
//fetch the weather
fetch(url)
.then((resp) => {
if (!resp.ok) throw new Error(resp.statusText);
return resp.json();
})
.then((data) => {
app.showWeather(data);
})
.catch(console.err);
},
getLocation: (ev) => {
let opts = {
enableHighAccuracy: true,
timeout: 1000 * 10, //10 seconds
maximumAge: 1000 * 60 * 5, //5 minutes
};
navigator.geolocation.getCurrentPosition(app.ftw, app.wtf, opts);
},
ftw: (position) => {
//got position
document.getElementById('latitude').value =
position.coords.latitude.toFixed(2);
document.getElementById('longitude').value =
position.coords.longitude.toFixed(2);
},
wtf: (err) => {
//geolocation failed
console.error(err);
},
showWeather: (resp) => {
console.log(resp);
let row = document.querySelector('.weather.row');
//clear out the old weather and add the new
// row.innerHTML = '';
row.innerHTML = resp.daily
.map((day, idx) => {
if (idx <= 2) {
let dt = new Date(day.dt * 1000); //timestamp * 1000
let sr = new Date(day.sunrise * 1000).toTimeString();
let ss = new Date(day.sunset * 1000).toTimeString();
return `<div class="col">
<div class="card">
<h5 class="card-title p-2">${dt.toDateString()}</h5>
<img
src="http://openweathermap.org/img/wn/${
day.weather[0].icon
}@4x.png"
class="card-img-top"
alt="${day.weather[0].description}"
/>
<div class="card-body">
<h3 class="card-title">${day.weather[0].main}</h3>
<p class="card-text">High ${day.temp.max}&deg;C Low ${
day.temp.min
}&deg;C</p>
<p class="card-text">High Feels like ${
day.feels_like.day
}&deg;C</p>
<p class="card-text">Pressure ${day.pressure}mb</p>
<p class="card-text">Humidity ${day.humidity}%</p>
<p class="card-text">UV Index ${day.uvi}</p>
<p class="card-text">Precipitation ${day.pop * 100}%</p>
<p class="card-text">Dewpoint ${day.dew_point}</p>
<p class="card-text">Wind ${day.wind_speed}m/s, ${
day.wind_deg
}&deg;</p>
<p class="card-text">Sunrise ${sr}</p>
<p class="card-text">Sunset ${ss}</p>
</div>
</div>
</div>
</div>`;
}
})
.join(' ');
},
};
app.init();
Raw
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<link
href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css"
rel="stylesheet"
integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC"
crossorigin="anonymous"
/>
<link rel="stylesheet" href="css/main.css" />
</head>
<body>
<div>
<header class="container">
<h1>OpenWeatherMap.org API</h1>
</header>
<nav class="container">
<div class="row align-items-center py-2">
<div class="input-group col-sm">
<span class="input-group-text" id="basic-addon1">Lat</span>
<input
type="text"
class="form-control"
inputmode="numeric"
id="latitude"
placeholder="latitude"
aria-label="latitude"
aria-describedby="basic-addon1"
value="42.98"
/>
</div>
<div class="input-group col-sm">
<span class="input-group-text" id="basic-addon1">Lon</span>
<input
type="text"
class="form-control"
inputmode="numeric"
id="longitude"
placeholder="longitude"
aria-label="longitude"
aria-describedby="basic-addon1"
value="-81.23"
/>
</div>
</div>
<div class="row align-items-center py-2">
<div class="col-auto me-auto">
<button id="btnGet" type="button" class="btn btn-primary mb-3">
Get Weather
</button>
<button id="btnCurrent" type="button" class="btn btn-primary mb-3">
Use Current Location
</button>
</div>
</div>
</nav>
<main class="container">
<h2>Weather</h2>
<!-- results for weather data -->
<div class="weather row gx-2">
<div class="col">
<div class="card" style="width: 30vw">
<h5 class="card-title p-2">Date</h5>
<img
src="http://openweathermap.org/img/wn/[email protected]"
class="card-img-top"
alt="Weather description"
/>
<div class="card-body">
<h3 class="card-title">Weather Label</h3>
<p class="card-text">High Temp Low Temp</p>
<p class="card-text">HighFeels like</p>
<p class="card-text">Pressure</p>
<p class="card-text">Humidty</p>
<p class="card-text">UV Index</p>
<p class="card-text">Precipitation</p>
<p class="card-text">Dew Point</p>
<p class="card-text">Wind speed and direction</p>
<p class="card-text">Sunrise</p>
<p class="card-text">Sunset</p>
</div>
</div>
</div>
</div>
</main>
<footer class="container">
<div class="row align-items-center">
<div class="col">
<img
src="http://openweathermap.org/img/wn/10d.png"
alt="demo icon"
/>
<span>10d.png</span>
</div>
<div class="col">
<img
src="http://openweathermap.org/img/wn/[email protected]"
alt="demo icon"
/>
<span>[email protected]</span>
</div>
<div class="col">
<img
src="http://openweathermap.org/img/wn/[email protected]"
alt="demo icon"
/>
<span>[email protected]</span>
</div>
</div>
</footer>
</div>
<script
src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"
integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM"
crossorigin="anonymous"
></script>
<script src="js/app.js" defer></script>
</body>
</html>
Raw
main.css
nav {
border-bottom: 2px solid cornflowerblue;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment