-
Notifications
You must be signed in to change notification settings - Fork 1
/
Ellen.html
92 lines (75 loc) · 3.15 KB
/
Ellen.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
90
91
92
{% extends "layouts/base.html" %}
{% block meta %}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
{% endblock %}
{% block content %}
<style>
.forecast {
font-family: 'Roboto Mono', 'Consolas', 'Menlo', monospace;
font-size: 20px;
}
</style>
<h1 style="background-color:#778da9;text-align:center">Ellen</h1><br>
<h3>Click the image to toggle!</h3>
<img id="myImage" onclick="changeImage()" src="/static/images/ellen_mask.JPG" width="200" height="200"><br>
<script>
function changeImage() {
var image = document.getElementById('myImage');
if (image.src.match("/static/images/ellen_mask.JPG")) {
image.src = "/static/images/ellen.JPG";
} else {
image.src = "/static/images/ellen_mask.JPG";
}
}
</script>
<div id="weather">
<h4>Check the Weather!</h4>
<div class="forecast">
<p class="vertical-bottom">
<button type="button" onclick="fetchForecast()">Fetch</button>
</p>
</div>
</div>
<script>
// Weather API
function fetchForecast() {
var endpoint =
"https://api.openweathermap.org/data/2.5/onecall?lat=32.7157&lon=-117.161087&exclude=current,hourly,minutely,alerts&units=metric&appid=bde9c20de4953a3a0aa8610e01dc1c4e";
var forecastEl = document.getElementsByClassName("forecast");
fetch(endpoint)
.then(function (response) {
if (200 !== response.status) {
console.log(
"Looks like there was a problem. Status Code: " + response.status
);
return;
}
forecastEl[0].classList.add('loaded');
response.json().then(function (data) {
var fday = "";
data.daily.forEach((value, index) => {
if (index > 0) {
var dayname = new Date(value.dt * 1000).toLocaleDateString("en", {
weekday: "long",
});
var icon = value.weather[0].icon;
var temp = value.temp.day.toFixed(0);
fday = `<div class="forecast-day">
<p>${dayname}</p>
<p><span class="ico-${icon}" title="${icon}"></span></p>
<div class="forecast-day--temp">${temp*9/5+32}<sup>°F</sup></div>
</div>`;
forecastEl[0].insertAdjacentHTML('beforeend', fday);
}
});
});
})
.catch(function (err) {
console.log("Fetch Error :-S", err);
});
};
</script>
<a class="button" href="https://docs.google.com/document/d/1pSAqPrdru8p5v9sU7csL_tyJAvifw9apmTwlzlhcn08/edit?usp=sharing">Pair Share Journal</a></br>
<a class="button" href="https://github.com/sanvi1855544/p3-avatar/commits?author=xu-ellen">Individual Commits</a></br>
<a class="button" href="https://docs.google.com/document/d/1pSAqPrdru8p5v9sU7csL_tyJAvifw9apmTwlzlhcn08/edit#bookmark=id.56rkhuyb3tx8">Create Task Brainstorming</a>
{% endblock %}