Covid Brasil
Nesse repositório você encontra os starter files de um dashboard responsivo (com dark mode) feito com HTML, CSS e Javascript chamado Covid Brasil.
Nesse projeto são utilizados os dados da pandemia de COVID-19 no Brasil. O coronavírus foi identificado pela primeira vez por autoridades da cidade de Wuhan, capital da província de Hubei na China, entre pacientes que tinham desenvolvido pneumonia sem causa identificável. O surto inicial deu origem a uma pandemia global que à data de 25 de setembro de 2021 tinha resultado em 231.105.748 casos confirmados e 4.736.892 mortes em todo o mundo.
Pensa-se que o coronavírus tenha origem zoonótica. A primeira transmissão para seres humanos ocorreu em Wuhan, na China, em novembro ou dezembro de 2019. No início de janeiro de 2020, a principal fonte de infecção era já a transmissão entre seres humanos.
Em 26 de fevereiro de 2020 se confirmou o primeiro caso do covid19 no Brasil. Um brasileiro retornando da Itália, onde a pandemia já tinha alcançado patamares bem preocupantes. Quase 2 anos depois, estamos vivendo um momento histórico, e está literalmente nas nossas mãos o que vai acontecer daqui pra frente.
Você aprenderá como criar um dashboard responsivo usando esse dados, permitindo que se faça uma análise de dados completos sobre o número de casos confirmados, de mortos e de vacinados no Brasil. Ao aprender como montar dashboard com javascript utilizando os dados da covid19, você poderá depois alterar esse projeto para criar até mesmo outros tipos de painel administrativo (admin dashboard).
- Você pode conferir o resultado final do projeto clicando aqui.
- Assista ao passo a passo (dividido em 16 partes) clicando aqui.
Conteúdo extra
Esse projeto possui conteúdos exclusivos, que são:
- Ebook explicando todo o projeto passo a passo, com mais de 80 snippets (trechos) de códigos explicados com imagens
- Código completo do projeto
- Vídeo extra ensinando como fazer com que a dashboard salve o tema (dark/light) e o último Estado escolhido pelo usuário.
- Arquivo Figma com o layout do projeto (incluindo Style Guide)
Caso você deseje ter acesso a todo esse material extra, além de materiais de outros projetos, por favor considere fazer parte da minha comunidade e apoiar o meu trabalho clicando aqui. Muito obrigado!
O que você irá aprender/praticar durante esse projeto:
-
CSS
- Variáveis CSS
- Unidades CSS (rem, %, vh, vw, px)
- Metologia BEM
- Media Queries
- Flexbox
- CSS Grid
- Pseudo-elementos
- Pseudo-classes
-
Javascript
- Async/Await
- Fetch API
- Biblioteca de gráficos Apexcharts
- Acessar propriedades CSS pelo Javascript
- Atributos data-
- método parseInt()
- .querySelector()
- .querySelectorAll()
- .addEventListener()
- .add()
- .remove()
- .toggle()
- .contains()
- .includes()
- .forEach()
- .setAttribute()
- .getAttribute()
E muito mais.
Eu adoraria ver seu projeto finalizado. Por favor, marque-me no Youtube, Instagram (@inkasadev) ou Twitter (@inkasadev). 😉