hc/startpage
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Add OpenWeather API

Browse Source
This commit is contained in:
Tressley Cahill 2022-11-01 17:01:07 -04:00
parent 020d4b5fe8
commit 723d73e127
3 changed files with 40 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

15
css/styles.css
View File

@ -27,6 +27,21 @@ header {
justify-content: center;
}
#date,
#location {
color: var(--primary-link-hover-color);
font-weight: 700;
}
#time,
#details {
color: var(--primary-link-color);
text-transform: capitalize;
}
.separator { margin: 0 0.25rem; }
header img,
header svg { height: 4.5rem; }

4
index.html
View File

@ -16,11 +16,13 @@
<link rel="stylesheet" href="css/main.css">
<title>_traichu</title>
</head>
<body onload="dateTime()">
<body onload="traichu()">
<main>
<section id="traichu">
<h1 class="sr-only">_traichu</h1>
<header>
<section id="date-time"></section>
<section id="weather"></section>
<!--SVG generated with Pixels to SVG https://codepen.io/shshaw/pen/XbxvNj-->
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 22" shape-rendering="crispEdges"><path d="M7,.5h1m-3,1h3m-4,1h1m1,0h1m6,0h4m4,0h1M3,3.5h1m2,0h1m4,0h2m2,0h1m5,0h1M3,4.5h1m1,0h1m4,0h1m9,0h1m1,0h1M3,5.5h1m1,0h5m5,0h1m4,0h1m1,0h1M2,6.5h1m5,0h1m4,0h3m4,0h1m1,0h1M1,7.5h1m10,0h1m2,0h1m4,0h1m2,0h1M0,8.5H1m10,0h2m7,0h1m2,0h1M0,9.5H2m10,0h1m4,0h3m3,0h1M0,10.5H1m5,0h1m5,0h2m2,0h2m3,0h3M1,11.5h1m3,0h2m6,0h1m2,0h3m2,0h1M2,12.5h1m10,0h2m1,0h1m2,0h1m1,0h1M1,13.5h1m11,0h2m2,0h2m1,0h1M2,14.5h2m8,0h1m1,0h1m3,0h2m-16,1h1m4,0h1m2,0h1m1,0h3m2,0h1m-16,1h1m4,0h1m1,0h1m2,0h1m1,0h3m-16,1h3m4,0h1m3,0h1m-12,1h5m5,0h1m-6,1h3m1,0h2m-5,1h2m2,0h1m-4,1h3" stroke="#000"/><path d="M5,2.5h1m-2,1h2m7,0h2m-11,1h1m6,0h2m-9,1h1m5,0h2m-3,1h2m-2,1h2m3,1h1M2,13.5h1m7,3h1" stroke="#a3500b"/><path d="M13,4.5h2m6,0h1m-10,1h3m6,0h1m-11,1h2m8,0h1m-11,1h1m9,0h2m-2,1h2m-3,1h3m-5,1h3m-2,1h2m-1,1h1" stroke="#f89b11"/><path d="M3,6.5h5m-6,1h7m-7,1H11m-9,1H12M1,10.5H5m2,0h5m-10,1h3m4,0h4m-9,1h3m2,0h4m-7,1h7m-7,1h6m-4,1h1m1,0h1" stroke="#f05e1c"/><path d="M1,8.5h1m3,2h1" stroke="#fff"/><path d="M7,11.5h2m-2,1h2" stroke="#faaf40"/><path d="M3,12.5h1m-1,1h3m7,1h1m-3,1h1m1,0h1m-2,1h2m-3,1h3m-4,1h3m-2,1h1m-1,1h2" stroke="#782f0e"/><path d="M4,14.5h2m-1,1h3m-3,1h4m-3,1h4m-2,1h2" stroke="#f7e1cf"/></svg>
</header>

27
js/main.js
View File

@ -1,7 +1,24 @@
function dateTime () {
const date = new Date()
let today = date.toDateString()
let time = date.toLocaleTimeString()
document.getElementsByName('q')[0].placeholder = today + ' ' + time
setTimeout(dateTime, 1000)
const date = new Date();
let today = date.toDateString();
let time = date.toLocaleTimeString();
document.getElementById('date-time').innerHTML = '<p id="date">' + today + '</p><p id="time">' + time + '</p>';
setTimeout(dateTime, 1000);
}
function weatherBalloon(cityID) {
var apiKey = 'fad9628260a1bc2ebaaf85a7dfe800d0';
fetch('https://api.openweathermap.org/data/2.5/weather?id=' + cityID + '&appid=' + apiKey)
.then(function(resp) { return resp.json() })
.then(function(data) {
let tempK = parseFloat(data.main.temp);
let tempC = Math.round(tempK-273.15);
let tempF = Math.round((tempK-273.15)*1.8)+32;
document.getElementById('weather').innerHTML = '<p id="location">' + data.name + '</p><p id="details">' + data.weather[0].description + '<span class="separator">|</span>' + tempC + '&deg;C</p>';
});
}
function traichu() {
dateTime();
weatherBalloon(6254926);
}