Skip to content

Commit 99cad27

Browse files
jsueirojsueiro
committed
added weather widget with API call to openweather
1 parent d42100b commit 99cad27

File tree

5 files changed

+68
-37
lines changed

5 files changed

+68
-37
lines changed

‎.gitignore‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
/js/config.js

‎html-table.html‎

Lines changed: 6 additions & 35 deletions
Original file line numberDiff line numberDiff line change
@@ -2,40 +2,11 @@
22
<!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"><link href="https://fonts.googleapis.com/css2?family=Lato:wght@400;900&display=swap" rel="stylesheet"><link rel="stylesheet" type="text/css" href="inner_table.css"><title>Coffe Break</title></head><body>
33
<table>
44
<thead>
5-
<tr><th>Title </th><th style="text-align: right;"> votes</th></tr>
5+
<tr><th>Title </th><th style="text-align: right;"> votes</th></tr>
66
</thead>
77
<tbody>
8-
<tr><td><a class="titlelink" href="https://etsystrike.org/">Etsy Strike</a> </td><td style="text-align: right;"> 1091</td></tr>
9-
<tr><td><a class="titlelink" href="https://sslping.com">I must announce the immediate end of service of SSLPing</a> </td><td style="text-align: right;"> 615</td></tr>
10-
<tr><td><a class="titlelink" href="https://knowablemagazine.org/article/health-disease/2021/how-noise-pollution-affects-heart-health">Sounding the alarm: How noise hurts the heart (2021)</a> </td><td style="text-align: right;"> 577</td></tr>
11-
<tr><td><a class="titlelink" href="https://www.nytimes.com/2022/04/05/travel/europe-trains.html">Europe is investing heavily in trains</a> </td><td style="text-align: right;"> 548</td></tr>
12-
<tr><td><a class="titlelink" href="https://medium.com/@ericmigi/why-pebble-failed-d7be937c6232">Success and Failure at Pebble</a> </td><td style="text-align: right;"> 465</td></tr>
13-
<tr><td><a class="titlelink" href="https://www.theatlantic.com/magazine/archive/2022/05/social-media-democracy-trust-babel/629369/">Why the past 10 years of American life have been uniquely stupid</a> </td><td style="text-align: right;"> 401</td></tr>
14-
<tr><td><a class="titlelink" href="https://consilienceproject.org/endgames-of-bad-communication/">The endgames of bad faith communication</a> </td><td style="text-align: right;"> 344</td></tr>
15-
<tr><td><a class="titlelink" href="https://blog.fennel.ai/p/real-world-recommendation-system">Real World Recommendation System</a> </td><td style="text-align: right;"> 341</td></tr>
16-
<tr><td><a class="titlelink" href="https://loganmarchione.com/2022/04/impressions-from-a-first-time-mac-user/">Impressions from a first-time Mac user</a> </td><td style="text-align: right;"> 320</td></tr>
17-
<tr><td><a class="titlelink" href="https://cloud.google.com/blog/products/identity-security/automate-public-certificate-lifecycle-management-via--acme-client-api">Automate Public Certificates Lifecycle Management via RFC 8555 (ACME)</a></td><td style="text-align: right;"> 290</td></tr>
18-
<tr><td><a class="titlelink" href="https://technology.blog.gov.uk/2020/02/24/why-the-gov-uk-design-system-team-changed-the-input-type-for-numbers/">Why the Gov.uk Design System team changed the input type for numbers (2020)</a> </td><td style="text-align: right;"> 247</td></tr>
19-
<tr><td><a class="titlelink" href="https://jacobian.org/2022/apr/11/mercenary/">Is my advice too mercenary?</a> </td><td style="text-align: right;"> 208</td></tr>
20-
<tr><td><a class="titlelink" href="https://multiplayer.dev">Show HN: Multiplayer Demo Built with Elixir</a> </td><td style="text-align: right;"> 208</td></tr>
21-
<tr><td><a class="titlelink" href="https://github.com/ern0/howto-wasm-minimal">Show HN: How to compile C/C++ for WASM, pure Clang, no libs, no framework</a> </td><td style="text-align: right;"> 207</td></tr>
22-
<tr><td><a class="titlelink" href="https://www.livescience.com/first-interstellar-object-detected">Interstellar object exploded over Earth in 2014, declassified govmt data reveal</a> </td><td style="text-align: right;"> 202</td></tr>
23-
<tr><td><a class="titlelink" href="http://www.ceephax.co.uk/index.htm">Ceephax Acid Crew</a> </td><td style="text-align: right;"> 178</td></tr>
24-
<tr><td><a class="titlelink" href="https://www.youtube.com/watch?v=O9XtK6R1QAk">Weightless cats – Do space cats land on their feet? (2011) [video]</a> </td><td style="text-align: right;"> 163</td></tr>
25-
<tr><td><a class="titlelink" href="https://go.dev/blog/get-familiar-with-workspaces">Get familiar with workspaces</a> </td><td style="text-align: right;"> 158</td></tr>
26-
<tr><td><a class="titlelink" href="https://blog.craftyguy.net/cmdline-help/">-h –Help -help Help –? –?</a> </td><td style="text-align: right;"> 150</td></tr>
27-
<tr><td><a class="titlelink" href="https://securityzines.com/#comics">Security Comics</a> </td><td style="text-align: right;"> 145</td></tr>
28-
<tr><td><a class="titlelink" href="https://www.science.org/content/blog-post/more-fakery">More Fakery</a> </td><td style="text-align: right;"> 144</td></tr>
29-
<tr><td><a class="titlelink" href="http://medusa-sc.org/index.php?title=Description">Medusa is a device that allows connecting of old computers to modern displays</a> </td><td style="text-align: right;"> 137</td></tr>
30-
<tr><td><a class="titlelink" href="https://arstechnica.com/science/2022/04/researchers-home-in-on-possible-day-zero-for-antikythera-mechanism/">Researchers home in on possible “day zero” for Antikythera mechanism</a> </td><td style="text-align: right;"> 137</td></tr>
31-
<tr><td><a class="titlelink" href="https://gwolf.org/2022/04/how-is-the-free-firmware-for-the-raspberry-progressing.html">How is the free firmware for the Raspberry progressing?</a> </td><td style="text-align: right;"> 134</td></tr>
32-
<tr><td><a class="titlelink" href="https://www.elementary.audio/">Elementary Audio: a modern platform for writing high performance audio software</a> </td><td style="text-align: right;"> 131</td></tr>
33-
<tr><td><a class="titlelink" href="item?id=31001155">Ask HN: When did tech stop being cool?</a> </td><td style="text-align: right;"> 123</td></tr>
34-
<tr><td><a class="titlelink" href="https://www.axios.com/xinjiang-china-camps-human-rights-abuse-witness-3c2de155-0f9a-4f2b-84e1-83713bb7e443.html">Former Xinjiang prisoner arrives in U.S. as key witness to abuses</a> </td><td style="text-align: right;"> 120</td></tr>
35-
<tr><td><a class="titlelink" href="https://blog.lightspin.io/aws-rds-critical-security-vulnerability">AWS RDS Vulnerability Leads to AWS Internal Service Credentials</a> </td><td style="text-align: right;"> 108</td></tr>
36-
</tbody>
37-
</table>
38-
<script src="js/main.js"></script>
39-
<script>
40-
apply_style();
41-
</script> </body></html>
8+
<tr><td><a class="titlelink" href="https://jvns.ca/blog/2022/04/12/a-list-of-new-ish--command-line-tools/">New(ish) command line tools</a> </td><td style="text-align: right;"> 637</td></tr>
9+
<tr><td><a class="titlelink" href="https://directorsblog.nih.gov/2022/04/12/human-brain-compresses-working-memories-into-low-res-summaries/">Human brain compresses working memories into low-res ‘summaries’</a> </td><td style="text-align: right;"> 614</td></tr>
10+
<tr><td><a class="titlelink" href="https://github.com/facebookexperimental/eden">Eden</a> </td><td style="text-align: right;"> 582</td></tr>
11+
<tr><td><a class="titlelink" href="https://github.blog/2022-04-12-git-security-vulnerability-announced/">Git security vulnerability announced</a> </td><td style="text-align: right;"> 488</td></tr>
12+
<tr><td><a class="titlelink" href="https://ionathan.ch/2022/04/09/angzarr.html">U+237C

‎index.html‎

Lines changed: 17 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -26,10 +26,26 @@ <h2>Hi Juan 👋🏻</h2>
2626
width="100%" height="1000px" frameBorder="0"></iframe>
2727
</div>
2828
<div class="item4">
29-
<h2> <span id="time">05:00</span> </h2>
29+
30+
<h2> <span id="time">05:00</span> </h2><br><br>
31+
32+
<table style="width:100%">
33+
<tr>
34+
<th colspan='2'><span id="place">-</span></th>
35+
</tr>
36+
<tr>
37+
<td style="text-align: right;"><img src="" id="wimg"></td>
38+
<td style="text-align: left;"><span id="temp">-</span></td>
39+
</tr>
40+
<tr>
41+
<td colspan='2'><span id="weather">-</span></td>
42+
</tr>
43+
</table>
44+
3045
</div>
3146
<div class="item5">Made with Love and caffeine.</div>
3247
</div>
48+
<script src="js/config.js"></script>
3349
<script src="js/main.js"></script>
3450
</body>
3551

‎js/main.js‎

Lines changed: 37 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -27,8 +27,44 @@ function startTimer(duration, display) {
2727
}, 1000);
2828
}
2929

30+
31+
32+
const getlocation = () => {
33+
navigator.geolocation.watchPosition(async (pos) => {
34+
var lat = pos.coords.latitude;
35+
var long = pos.coords.longitude;
36+
var wkey = config.W_KEY;
37+
38+
const url = 'https://api.openweathermap.org/data/2.5/weather?lat=' + lat + '&lon=' + long + '&APPID=' + wkey + '&units=metric'
39+
const response = await fetch(url);
40+
const data = await response.json();
41+
42+
setWeather(data);
43+
44+
});
45+
}
46+
47+
function setWeather(data) {
48+
49+
console.log(data);
50+
51+
loc = document.querySelector('#place');
52+
loc.textContent = data.name + ', ' + data.sys.country;
53+
54+
weather = document.querySelector('#weather');
55+
weather.textContent = data.weather[0].description;
56+
57+
temp = document.querySelector('#temp');
58+
temp.textContent = data.main.temp + ' C°';
59+
60+
document.getElementById("wimg").src = "http://openweathermap.org/img/wn/" + data.weather[0].icon + '.png';
61+
62+
63+
}
64+
3065
window.onload = function () {
3166
var fiveMinutes = 60 * 5,
3267
display = document.querySelector('#time');
3368
startTimer(fiveMinutes, display);
34-
};
69+
getlocation();
70+
};

‎style.css‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -83,4 +83,11 @@ hr {
8383
opacity: 1;
8484
max-width: 100px;
8585
margin: 0px;
86+
}
87+
88+
table,
89+
th,
90+
td {
91+
border: 0px;
92+
8693
}

0 commit comments

Comments
 (0)