└── projeto3 ├── index.html ├── script.js └── style.css /projeto3/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Clima 8 | 9 | 10 | 11 |

Mauricio Costa

12 | 13 |

controle Climatico

14 | 15 |
16 | 17 | 18 |
19 | 20 |
21 |
--
22 | 23 |
24 |
25 |
Temperatura
26 |
-- ºC
27 | 28 |
29 |
30 |
Vento
31 |
-- km/h
32 |
33 |
34 |
35 |
36 |
37 |
38 | 39 |
40 | 41 | 42 | 43 | 44 | 45 | -------------------------------------------------------------------------------- /projeto3/script.js: -------------------------------------------------------------------------------- 1 | 'use strict' 2 | 3 | document.querySelector('.busca').addEventListener('submit', async (event)=>{ 4 | event.preventDefault(); 5 | 6 | let input=document.querySelector('#searchInput').value; 7 | 8 | if(input){ 9 | clearInfo(); 10 | showWarnning('carregando...'); 11 | 12 | let url=`https://api.openweathermap.org/data/2.5/weather?q=${encodeURI(input)}&appid=3c8b465bd8f53806fc84560fa9cd73ef&&units=metric&lang=pt_br`; 13 | 14 | 15 | let results=await fetch(url); 16 | let json=await results.json(); 17 | 18 | if(json.cod===200){ 19 | showInfo({ 20 | name:json.name, 21 | country:json.sys.country, 22 | temp:json.main.temp, 23 | tempIcon:json.weather[0].icon, 24 | windSpeed:json.wind.speed, 25 | windAngle:json.wind.deg 26 | }); 27 | 28 | }else{ 29 | 30 | showWarnning('cidade não encontrada.'); 31 | clearInfo(); 32 | } 33 | }else{ 34 | clearInfo(); 35 | } 36 | 37 | }); 38 | 39 | function showInfo(json) { 40 | 41 | document.querySelector('.titulo').innerHTML=`${json.name}, ${json.country}`; 42 | 43 | document.querySelector('.tempInfo').innerHTML=`${json.temp}ºC`; 44 | 45 | document.querySelector('.ventoInfo').innerHTML=`${json.windSpeed}km/h`; 46 | 47 | document.querySelector('.temp img').setAttribute(`src`,`http://openweathermap.org/img/wn/${json.tempIcon}@2x.png`); 48 | 49 | document.querySelector('.ventoPonto').style.transform=`rotate(${json.windAngle-90}deg)`; 50 | 51 | 52 | document.querySelector('.resultado').style.display='block'; 53 | } 54 | function showWarnning(msg) { 55 | document.querySelector('.aviso').innerHTML=msg; 56 | } 57 | function clearInfo(params) { 58 | showWarnning(''); 59 | document.querySelector('.resultado').style.display='none'; 60 | } 61 | -------------------------------------------------------------------------------- /projeto3/style.css: -------------------------------------------------------------------------------- 1 | * { 2 | margin: 0; 3 | padding: 0; 4 | box-sizing: border-box; 5 | } 6 | 7 | body { 8 | display: flex; 9 | min-height: 100vh; 10 | justify-content: center; 11 | align-items: center; 12 | flex-direction: column; 13 | background-color: #333; 14 | font-family: Arial, Helvetica, sans-serif; 15 | } 16 | h1{ 17 | color: #fff; 18 | position: relative; 19 | bottom: 15vh; 20 | } 21 | h2 { 22 | font-size: 30px; 23 | color: #FFF; 24 | margin: 20px 0; 25 | } 26 | 27 | .busca { 28 | display: flex; 29 | width: 300px; 30 | } 31 | .busca #searchInput { 32 | flex: 1; 33 | padding: 10px; 34 | outline: none; 35 | font-size: 15px; 36 | border-radius: 5px; 37 | border: 0; 38 | } 39 | .busca button { 40 | padding: 10px; 41 | font-size: 15px; 42 | border: 0; 43 | background-color: #555; 44 | color: #FFF; 45 | border-radius: 5px; 46 | margin-left: 10px; 47 | cursor: pointer; 48 | } 49 | .busca button:hover { 50 | background-color: #444; 51 | } 52 | 53 | .resultado { 54 | width: 300px; 55 | display: none; 56 | border: 1px dotted #FFF; 57 | margin-top: 20px; 58 | border-radius: 5px; 59 | background-color: rgba(0, 0, 0, 0.2); 60 | } 61 | 62 | .titulo { 63 | width: 100%; 64 | color: #FFF; 65 | font-size: 25px; 66 | font-weight: bold; 67 | text-align: center; 68 | padding: 20px; 69 | } 70 | 71 | .info { 72 | display: flex; 73 | width: 100%; 74 | } 75 | .info .temp { 76 | flex: 1; 77 | text-align: center; 78 | } 79 | .info .vento { 80 | flex: 1; 81 | text-align: center; 82 | } 83 | .tempTitulo, 84 | .ventoTitulo { 85 | color: #777; 86 | font-size: 16px; 87 | margin-bottom: 5px; 88 | } 89 | .tempInfo, 90 | .ventoInfo { 91 | color: #FFF; 92 | font-size: 30px; 93 | font-weight: bold; 94 | } 95 | .tempInfo sup { 96 | font-size: 15px; 97 | font-weight: normal; 98 | } 99 | .ventoInfo span { 100 | font-size: 15px; 101 | font-weight: normal; 102 | } 103 | .ventoArea { 104 | width: 50px; 105 | height: 50px; 106 | border: 1px solid #FFF; 107 | border-radius: 50%; 108 | margin: auto; 109 | margin-top: 20px; 110 | padding-left: 25px; 111 | padding-top: 25px; 112 | } 113 | .ventoPonto { 114 | width: 15px; 115 | height: 1px; 116 | background-color: #FFF; 117 | transform-origin: left; 118 | } 119 | 120 | .aviso { 121 | color: #FFF; 122 | padding-top: 20px; 123 | } 124 | 125 | footer { 126 | margin-top: 20px; 127 | color: #FFF; 128 | font-size: 13px; 129 | } --------------------------------------------------------------------------------