Tutorial
Calendário minimalista com TypeScript
Nível
9 aulas
1h19
Assistir agora
1. Introdução do projeto de Calendário
Sobre o Tutorial
Esse tutorial mostra o passo-a-passo para resolver o Mini Projeto Calendário minimalista.
Descrição do projeto
Utilize apenas JavaScript (ou TypeScript) puro, sem a ajuda de qualquer framework ou biblioteca, e construa um calendário dinâmico e interativo! O objetivo desse mini projeto é quanto compreender a lógica por trás da criação e manipulação de um calendário, sem recorrer a frameworks de front-end.
🔨 Requisitos
- O calendário deve exibir:
- Os dias da semana.
- Os dias do mês.
- Adicione botões para avançar e retroceder:
- Botão "Próximo mês" que avança o calendário em um mês.
- Botão "Mês anterior" que retrocede o calendário em um mês.
- O dia atual deve estar destacado com uma cor diferente.
- Dê a opção de trocar o idioma do calendário.
- Ao finalizar, faça o deploy e submeta sua implementação no site do Codante.
🔍 Dicas
- Estude a manipulação do DOM com JavaScript para criar e modificar elementos na página.
- Familiarize-se com o objeto
Date
do JavaScript para trabalhar com datas. - Para o recurso de troca de idiomas, utilize a API de Intl no JavaScript. Ela é muito poderosa!
- Recomendamos o uso do Vite para configurar e rodar a sua aplicação.
🎨 Design Sugerido
Temos uma sugestão de design no Figma. Entretanto, fique à vontade para usar sua criatividade e criar um design único.
Screenshot
Figma - link do design
👉🏽 Sobre esse mini-projeto
Tecnologias sugeridas
- HTML
- CSS
- JavaScript ou TypeScript Puro
Pré-requisitos
HTML, CSS básicos
JavaScript básico
Seu Instrutor
Aulas
- 1.
Introdução do projeto de Calendário
05:48 - 2.
Configurando o Vite, TS e Tailwind
07:43 - 3.
Criando o HTML e CSS base
12:38 Renderizando o cabeçalho do calendário
09:18Exibindo os dias da semana
08:59Mostrando os dias do mês
17:13Implementando a função de trocar o mês
04:25Trocando a linguagem do calendário
10:51Fazendo o deploy do calendário
02:48