This repository has been archived by the owner on Nov 8, 2024. It is now read-only.
-
Notifications
You must be signed in to change notification settings - Fork 0
/
alertdetail.html
89 lines (82 loc) · 3.23 KB
/
alertdetail.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
86
87
88
89
<script>
// Get Params
// Function for Parameters
console.log(`URL:`, window.location);
const values = window.location.search;
console.log(values);
const parameters = new URLSearchParams(values);
const newcity = parameters.get('city');
console.log(newcity);
var city = newcity;
</script>
<html>
<head>
<title id="title">Alerts for .</title>
<meta name="authors" content="Jesse Hasty">
<link rel="apple-touch-icon" sizes="180x180" href="apple-touch-icon.png">
<link rel="icon" type="image/png" sizes="32x32" href="favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="favicon-16x16.png">
</head>
<bodY>
<div>
<div class="alertcard">
<div align="center">
<div class="contents">
<h1 id="alerttitle" class="alertname">No Alert</h1>
<p id="fullmessage" class="message">There Dosen't seem to be an alert at this time. </p>
<p id="alerttype" class="type">Type: Other</p>
<div id="extra"></div>
</div>
<div class="contents" id="contents2">
</div>
</div>
</div>
</div>
</bodY>
</html>
<style>
.alertcard {
width: 100%;
display: flex;
background-color: grey;
height: fit-content;
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
border-color: black;
height: 100%;
border-radius: 11px;
}
.contents {
text-align: center;
}
.alertname {
font-weight: 900;
text-transform: none;
}
.message {
font-weight: 900;
}
</style>
<script>
getAlert();
const alert_url = `https://api.aerisapi.com/alerts/${city}?client_id=DZLMGEFxCvfbQRG7aSN3c&client_secret=N63dulcmKzQTrWjIrTe2aGKmOw5AhERWWUmjHQKt`;
async function getAlert() {
const responsee = await fetch(alert_url);
const data = await responsee.json();
const {response, error} = data;
alertname = response[0].details.name
document.getElementById('fullmessage').innerHTML = `${response[0].details.bodyFull}`;
document.getElementById('alerttitle').innerHTML = `${alertname}`;
document.getElementById('alerttype').innerHTML = `Type: ${response[0].details.cat}.`;
document.getElementById('title').innerHTML = `Alerts for ${response[0].place.name}, ${response[0].place.state}.`;
document.getElementById('extra').innerHTML = `There may be more alerts active for this spot. Visit <a href="https://forecast.weather.gov/showsigwx.php?warnzone=${response[0].details.loc}&warncounty=${response[0].details.loc}&firewxzone=${response[0].details.loc}&local_place1=${response[0].place.name}%20${response[0].place.state}&product1=all&lat=${response[0].loc.lat}&lon=${response[0].loc.long}">This Website.</a>`
if (response[1].details.name !== "undefined") {
contents2.innerHTML = ` <h1 id="alerttitle" class="alertname">${response[1].details.name}</h1>
<p id="fullmessage" class="message">${response[1].details.body} </p>
<p id="alerttype" class="type">Type: ${response[1].details.cat}</p>
<div id="extra"></div>`
} else {
// Do nothing.
}
}
getAlert();
</script>