-
Notifications
You must be signed in to change notification settings - Fork 1
/
Copy pathindex.html
142 lines (140 loc) · 6.49 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
134
135
136
137
138
139
140
141
142
<!DOCTYPE html>
<html lang="pt-BR">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="estilo.css">
<link rel="shortcut icon" href="Imagens/fav-icon.png" type="image/x-icon">
<title>Clima</title>
</head>
<body>
<header>
<h1>Seu Clima</h1>
<h2> Veja o clima de qualquer cidade a sua escolha.</h2>
</header>
<section>
<label for="input_text"><strong>Cidade:</strong></label><input type="text" placeholder="Digite o nome da cidade" id="input_text" list="cidades">
<input type="submit" value="Procurar" class="submit">
<!--adicionei a lista de cidades para melhor entendimento do usuario(botei os maires municípios de cada região)-->
<!--Continua funcionando com todas a cidade(não sei uma forma melhor e mais rápida de adicionar todas a scidades)-->
<datalist id="cidades">
<optgroup label="Centro-oeste">
<option value="Brasília"></option>
<option value="Goiânia"></option>
<option value="Campo Grande"></option>
<option value="Cuiabá"></option>
<option value="Aparecida de Goiânia"></option>
<option value="Anápolis"></option>
<option value="Várzea Grande"></option>
<option value="Rio Verde"></option>
<option value="Rondonópolis"></option>
<option value="Dourados"></option>
<option value="Águas Lindas de Goiás"></option>
<option value="Luziânia"></option>
</optgroup>
<optgroup label="Nordeste">
<option value="Fernando de Noronha"></option>
<option value="Recife"></option>
<option value="Salvador"></option>
<option value="Fortaleza"></option>
<option value="São Luís"></option>
<option value="Natal"></option>
<option value="João Pessoa"></option>
<option value="Feira de Santana"></option>
<option value="Maceió"></option>
<option value="Teresina"></option>
<option value="Camaçari"></option>
<option value=" Aracaju"></option>
<option value="Campina Grande"></option>
<option value="Mossoró"></option>
</optgroup>
<optgroup label="Norte">
<option value="Amazonas"></option>
<option value="Belém"></option>
<option value="Ananindeua"></option>
<option value="Porto Velho"></option>
<option value="Macapá"></option>
<option value="Rio Branco"></option>
<option value="Boa Vista"></option>
<option value="Santarém"></option>
<option value="Palmas"></option>
<option value="Marabá"></option>
<option value="Parauapebas"></option>
<option value="Castanhal"></option>
</optgroup>
<optgroup label="Sudeste">
<option value="Osasco"></option>
<option value="São José dos Campos"></option>
<option value="Santo André"></option>
<option value="Nova Iguaçu"></option>
<option value="São Bernardo do Campo"></option>
<option value="Duque de Caxias"></option>
<option value="São Gonçalo"></option>
<option value="Campinas"></option>
<option value="Guarulhos"></option>
<option value="Belo Horizonte"></option>
<option value="Rio de janeiro"></option>
<option value="São Paulo"></option>
<option value="Ribeirão Preto"></option>
<option value="Uberlândia"></option>
<option value="Sorocaba"></option>
<option value="Contagem"></option>
<option value="Juiz de Fora"></option>
<option value="Niterói"></option>
<option value="Belford Roxo"></option>
<option value="Campos dos Goytacazes"></option>
<option value="Vila Velha"></option>
<option value="Mauá"></option>
<option value="São João de Meriti"></option>
<option value="Jardim Catarina"></option>
<option value="Friburgo"></option>
</optgroup>
<optgroup label="Sul">
<option value="Florianópolis"></option>
<option value="Curitiba"></option>
<option value="Porto Alegre"></option>
<option value="Joinville"></option>
<option value="Londrina"></option>
<option value="Caxias do Sul"></option>
<option value="Maringá"></option>
<option value="Blumenau"></option>
<option value="Ponta Grossa"></option>
<option value="Canoas"></option>
<option value="Pelotas"></option>
<option value="Cascavel"></option>
<option value="Balneário Camboriú"></option>
<option value="Gramado"></option>
<option value="Rio Grande"></option>
</optgroup>
</datalist>
<!--Divide a class card pra organizar melhor as info na tela-->
<div id="container">
<div class="card">
<h1 class="name" id="name"></h1>
<p class="desc"></p>
</div>
<!--info q ficam na esquerda-->
<div class="card1">
<p class="temp"></p>
<p class="temp_max"></p>
<p class="temp_min"></p>
<p class="clouds"></p>
</div>
<!--info q ficam na direita-->
<div class="card2">
<p class="feels_like"></p>
<p class="pressao"></p>
<p class="umidade"></p>
<p class="wind"></p>
</div>
</div>
</section>
<footer>
<p>© Fernando-2020</p>
<!--add id pra modificar no css para gamhar mais espaço para section-->
<p id="github-link"><a href="https://github.com/Fernando-Rodrigo" target="_blank"><img src="Imagens/github.png" alt="github"></a></p>
</footer>
<script src="./clima.js"></script>
</body>
</html>