Author: Pedro Lucas Porcellis <porcellis@eletrotupi.com>
all: update readme
README.md | 55 ++++++++++++++++++++++++++++++++++++++-----------------
diff --git a/README.md b/README.md index 4afc77bd04f07a9bf44fb7db906070e8a78030ff..fd27a1452e7d663f175b466c2094f7326eb6465e 100644 --- a/README.md +++ b/README.md @@ -19,12 +19,13 @@ - 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 descritivos nos formulários pra melhorar a usabilidade. + - 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, Grid e media queries pra ajustar o layout conforme o tamanho da +- Usei Flexbox e media queries pra ajustar o layout conforme o tamanho da tela. - Tem um menu responsivo (menu hambúrguer). @@ -36,13 +37,14 @@ - Usa métodos legais como `filter`, `map` e `reduce` pra trabalhar com dados. ### APIs -- Usa duas APIs HTML5: Geolocation e Web Storage. +- 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/style.css` pros estilos. - - `/js/script.js` pra lógica do JavaScript. + - `/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. --- @@ -52,6 +54,7 @@ ### O que Tu Precisas - Python 3 instalado no teu computador. +- Ter uma conta no OpenWeatherMap pra pegar uma API Key. ### Passo a Passo @@ -63,33 +66,51 @@ 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'; + ``` -3. Sobe um servidor HTTP local com Python: +4. Sobe um servidor HTTP local com Python: ```bash python -m http.server ``` -4. Abre o navegador e acessa o endereço: +5. Abre o navegador e acessa o endereço: ``` http://localhost:8000 ``` -5. Va juegar +6. Va juegar --- ## Estrutura do Projeto ``` -/projeto -├── /css -│ └── style.css # Arquivo de estilos da aplicação -├── /js -│ └── script.js # Arquivo com a lógica de JavaScript -├── /assets -│ └── (imagens e ícones usados no projeto) -├── index.html # Página principal -└── README.md # Documentação 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 ``` ---