frontend-1

  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

# Projeto: Aplicação Web Integrada com HTML, CSS e JavaScript

## Propósito do Projeto

Esse projeto foi feito pra juntar tudo que iriamos ver sobre HTML, CSS e
JavaScript na disciplina. A ideia é criar uma aplicação web funcional, acessível
com boas práticas de desenvolvimento. O foco é garantir uma experiência legal
pra quem usar e manter o código organizado pra quem quiser mexer depois
(literalmente ninguém).

---

## O que o Projeto Tem

### Semântica e Acessibilidade

- Usa elementos HTML5 semânticos como `<header>`, `<nav>`, `<main>`, `<section>`.
- Segue boas práticas de acessibilidade, como:
  - Texto alternativo (`alt`) nas imagens.
  - Navegação acessível pelo teclado com `tabindex` e atributos `aria-*`.
  - Contraste adequado entre texto e fundo, seguindo as regras WCAG.
  - Labels e inputs com funcionalidades descritivas nos formulários pra melhorar
    a usabilidade (seguindo as regras do Gov.UK).

### Responsividade

- O design é mobile-first, então funciona bem em telas pequenas e maiores.
- Usei Flexbox e media queries pra ajustar o layout conforme o tamanho da
  tela.
- Tem um menu responsivo (menu hambúrguer).

### JS

- Manipula o DOM pra criar conteúdos dinâmicos.
- Faz validação de formulários direto no navegador.
- Usa métodos legais como `filter`, `map` e `reduce` pra trabalhar com dados.

### APIs

- Usa duas APIs HTML5: Geolocation e Local Storage. E também a API do
  OpenWeatherMap.

### Organização do Código

- Tudo bem separado pra facilitar a vida de quem mexer nessa birosca (ninguém):
  - `/css/*.css` pros estilos de cada página, form, etc.
  - `/js/*.js` pra lógicas de cada página + menu.
- Estrutura limpa pra manutenção e expansão.

---

## Como Rodar o Projeto

### O que Tu Precisas

- Python 3 instalado no teu computador.
- Ter uma conta no OpenWeatherMap pra pegar uma API Key.

### Passo a Passo

1. Clona o repositório do projeto:
   ```sh
   git clone https://github.com/pedrolucasp/frontend-1
   ```
2. Vai pro diretório do projeto:
   ```bash
   cd frontend-1
   ```
3. Edita o arquivo `js/weather.js` e coloca a tua API Key do OpenWeatherMap:
   ```js
   const weatherApiKey = 'COLOCA_AQUI_A_TUA_API_KEY';
   ```

4. Sobe um servidor HTTP local com Python:
   ```bash
   python -m http.server
   ```

5. Abre o navegador e acessa o endereço:
   ```
   http://localhost:8000
   ```

6. Va juegar

---

## Estrutura do Projeto

```
.
├── LICENSE
├── README.md
├── css
│   ├── footer.css
│   ├── form.css
│   ├── header.css
│   ├── layout.css
│   ├── main.css
│   ├── reset.css
│   ├── style.css
│   ├── tasks.css
│   └── weather.css
├── index.html
├── js
│   ├── app.js
│   ├── geolocation.js
│   ├── menu.js
│   ├── script.js
│   ├── tasks.js
│   └── weather.js
├── tasks.html
└── weather.html
```

---

**Licença**: MIT. Verifica o LICENSE.