10 aulas com projetos para desenvolver e melhorar o conhecimento em programação
Objetivo • Tarefas • Tecnologias • Autor • Licença
🚧 Desafios em desenvolvimento... 🏗 50% 🚧
- Aprender e melhorar a criação de sites
- Principais aprendizados:
-
Aula 1
- Utilizar a função
toFixed()
- Utilizar a função
-
Aula 2
- Utilizar funções
- Exibir o resultado na tela com
innerHTML
-
Aula 3
- Utilizar a função
Math.random()
para gerar números aleatórios
- Utilizar a função
-
Aula 4
- Manipular array:
push()
.length
array[numero]
- Percorer o array com
for
para mostrar os dados em tela - Desafio:
- Utilizar o
forEach()
- Utilizar um objeto para guardar os valores
- Utilizar o
- Manipular array:
-
Aula 5
- Utilizar o
.endsWith()
e.includes()
para validar as imagens recebidas - Desafio:
- Estrutura mais complexa dos dados, com nome e url da imagem (JSON)
- Utilizar um objeto para guardar os valores
- Utilizar o
-
Aula 6
- HTML dinâmico com JavaScript exibindo o objeto na página
- Utilizar um objeto para guardar os valores
- Recalcular pontos a cada alteração
- Desafio:
- Validar se todos os pontos estão fazendo sentido
- Adicionar empates na dupla que empatou
- Botão para zerar todos os pontos
- Usuário poder adicionar novos jogadores, com seus respectivos dados
-
Aula 7
- Sortear uma carta para o jogador e outra para a máquina
- Obter o atribudo escolhido pelo jogador e comparar com a carta da máquina
- Comparar o atributo de ambas as cartas e definir um vencedor
-
Aula 8
- Campo imagem nos objetos com o caminho da imagem
- Função que exibe as cartas após o sorteio das cartas
- Exibir a moldura da carta, os atributos e pontos da carta da máquina
- Escrever o resultado na tela após o duelo das cartas informando se o jogador venceu, perdeu ou empatou
- Desafio:
- Criar um baralho de cartas
- Desenvolver um sistema em que a cada carta que um jogador ganhe, ele fique com a carta do oponente e vice-versa
- Transformar as funções
exibirCartaMaquina()
eexibirCartaJogador()
em apenas uma, chamadaexibirCarta()
, utilizando para isso a passagem de parâmetros
-
Aula 9
- Aprender mais sobre HTML e CSS
- Aprender a mexer no figma e transformar o design em código
- Desafio:
- Terminar todo o design que está no figma
-
Aula 10
- Criar o tema claro e escuro para o projeto
- Fazer a lógica em Javascript para alterar entre os temas
-
- Todos as aulas completas
- Documentar todas as aulas
- Fazer os desafios
- Responsividade
Foram usadas na construção do projeto:
- HTML
- CSS
- JavaScript
Djoni Bourscheid
Este projeto esta sobe a licença MIT.
Feito com ❤️ por Djoni Bourscheid 👋 Entre em contato!