-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
133 lines (112 loc) · 5.37 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
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Earth Meets Mars Weather App</title>
<link rel="stylesheet" href="style.css">
<!-- <link rel="icon" href="path_to_your_icon/favicon.png" type="image/png"> -->
</head>
<body>
<!-- "Skip to main content" link for better keyboard accessibility -->
<a href="#earth-weather" class="skip-link" tabindex="0"
style="position: absolute; top: -40px; left: 0; z-index: 1000;">Skip to main content</a>
<!-- Title -->
<header>
<h1>Earth Meets Mars</h1>
</header>
<main>
<div class="background-image"></div>
<!-- Main card -->
<div class="container">
<!-- City Search Section to input the name of a city on Earth -->
<section id="earth-weather">
<form id="weather-search-form">
<label for="earthCityInput">Enter a city on Earth: </label>
<input type="text" id="earthCityInput" placeholder="Enter city" aria-required="true">
<button id="getEarthWeatherButton" aria-label="Search for city's weather">Search</button>
</form>
</section>
<div id="locationDisplay" aria-live="polite" tabindex="0"></div>
<div id="loadingIndicator" style="display: none;" aria-live="assertive" tabindex="0">Loading...</div>
<!-- Buttons to select specific days -->
<section class="date-buttons" aria-label="Date filters">
<button class="filter-btn" aria-label="Date filter 1"></button>
<button class="filter-btn" aria-label="Date filter 2"></button>
<button class="filter-btn" aria-label="Date filter 3"></button>
<button class="filter-btn" aria-label="Date filter 4"></button>
<button class="filter-btn" aria-label="Date filter 5"></button>
<button class="filter-btn" aria-label="Date filter 6"></button>
<button class="filter-btn" aria-label="Date filter 7"></button>
</section>
<div class="sol" id="soleDate"></div>
<!-- Table displaying weather info for Earth and Mars -->
<table id="earthWeatherInfo">
<thead>
<thead>
<tr>
<th colspan="2"></th>
<th class="title earth" id="earthHeader">
<div class="content">Earth</div>
</th>
<th class="title mars" id="marsHeader">
<div class="content">Mars</div>
</th>
</tr>
</thead>
<tbody>
<!-- Air Temperature Data -->
<tr>
<td class="td-bg" rowspan="2">Air Temperature</td>
<td class="td-bg">Min.</td>
<td data-title="Earth" id="earthMinAirTemp"></td>
<td data-title="Mars" id="marsMinAirTemp"></td>
</tr>
<tr>
<td class="td-bg">Max.</td>
<td data-title="Earth" id="earthMaxAirTemp"></td>
<td data-title="Mars" id="marsMaxAirTemp"></td>
</tr>
<!-- Atmospheric Opacity Data -->
<tr>
<td class="td-bg" colspan="2">Atmospheric Opacity</td>
<td data-title="Earth" id="earthAtmoOpacities"></td>
<td data-title="Mars" id="marsAtmoOpacities"></td>
</tr>
<!-- Sunrise Data -->
<tr>
<td class="td-bg" colspan="2">Sunrise</td>
<td data-title="Earth" id="earthSunrise"></td>
<td data-title="Mars" id="marsSunrise"></td>
</tr>
<!-- Sunset Data -->
<tr>
<td class="td-bg" colspan="2">Sunset</td>
<td data-title="Earth" id="earthSunset"></td>
<td data-title="Mars" id="marsSunset"></td>
</tr>
</tbody>
</table>
</div>
</main>
<!-- Footer containing credit and copyright information -->
<footer>
<div class="footer">
<div class="credits">
<p>Weather report for Mars obtained through the <a href="https://mars.nasa.gov/msl/home/"
target="_blank">Mars
Curiosity Rover</a>. Weather report for Earth powered by <a href="https://open-meteo.com/en/docs"
title="ope-meteo api">Open-meteo.com</a> Photo generated through <a
href="https://unsplash.com" target="_blank">Unsplash</a>
</p>
</div>
<div class="copy">
<p>Copyright @ 2023 Lucía Fernandez & Marika Bertelli</p>
</div>
</div>
</footer>
<!-- JavaScript Files for Application Functionality -->
<script src="weatherDescriptions.js" type="module"></script>
<script src="script.js" type="module"></script>
</body>
</html>