-
Notifications
You must be signed in to change notification settings - Fork 1
/
index.html
85 lines (70 loc) · 3.35 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Basic Page Needs
–––––––––––––––––––––––––––––––––––––––––––––––––– -->
<meta charset="utf-8">
<title>Weather in cµyTp</title>
<meta name="description" content="Wheather App">
<meta name="author" content="Quim Tolo">
<!-- Mobile Specific Metas
–––––––––––––––––––––––––––––––––––––––––––––––––– -->
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Favicon
–––––––––––––––––––––––––––––––––––––––––––––––––– -->
<link rel="icon" type="image/png" href="cloud.png">
<!-- FONT
–––––––––––––––––––––––––––––––––––––––––––––––––– -->
<link href='//fonts.googleapis.com/css?family=Libre+Baskerville:400italic' rel='stylesheet' type='text/css'>
<!-- CSS
–––––––––––––––––––––––––––––––––––––––––––––––––– -->
<link rel="stylesheet" href="style.css">
<!-- Scripts
__________________________________________________ -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/randomcolor/0.5.2/randomColor.min.js"></script>
</head>
<body id="bod">
<script>
document.body.style.backgroundColor = randomColor({luminosity: 'light', hue: 'green'});
var x = document.getElementById("bod");
var tex = document.getElementById("tex");
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(
function(position) {
//x.innerHTML = position.coords.latitude, position.coords.longitude
$.getJSON("https://api.openweathermap.org/data/2.5/weather",
{
lat:position.coords.latitude,
lon:position.coords.longitude,
appid:'0ebe2c28e96d05fe3a4a79414f3311bb'
},
function(response){ //'response' is actually a variable, we could name it what ever we want. It just stores what the api sends
console.log(response)
$(".country").html(response.sys.country)
$(".temp").html(parseInt(response.main.temp / 1.41683385).toFixed(2));
$(".city-name").html(response.name);
$(".weather").html(response.weather[0].description)
});
});
} else {
tex.innerHTML = "Geolocation needs to be enabled by this browser.";
}
x.innerHTML = x.innerHTML.replace(/\n|\r/g, "");
var word = "planckplanckplanck";
var input = "";
document.body.addEventListener('keypress',function(ev){
input += String.fromCharCode(ev.keyCode);
console.log(input);
if(input == word){
x.innerHTML = '<img src="https://i.imgur.com/Pyo4DQF.jpg">';
input = "";
}
});
</script>
<div id="tex">
Today's wheather in <text class="city-name"></text>, <text class="country"></text> is <text class="temp"></text> <a href="https://en.wikipedia.org/wiki/Planck_temperature_scale">cµyTp!</a>
</div>
</body>
</html>