Para começar, faça o clone desse repositório. Depois preencha os arquivos index.html
e katas3.js
de acordo com o que se pede.
Você irá criar uma única página web com um cabeçalho identificado para cada kata seguido de sua solução. Nesses katas, em vez de usar console.log()
ou document.write()
, você precisa inserir seus resultados no HTML usando os métodos document.createElement()
e node.appendChild()
.
A maneira mais fácil de começar é copiando o arquivo de exemplo da Mini-Aula: Inserindo novos elementos em uma Página. Você pode copiar e colar o código que está incorporado na aula.
Você pode continuar adicionando cada novo kata no final da página.
Antes de começar a desenvolver suas funções de resolução dos Katas, crie a função "showResults" seguindo os seguintes passos:
- Essa função deve receber um valor como parâmetro.
- Essa função deve mostrar no DOM o valor recebido.
- Essa função deve ser chamada dentro de todas as outras funções.
Nesse katas nós não vamos utilizar métodos de iteração de array (forEach, map, filter, reduce, sort...) e nem (math min, math max), vamos utilizar apenas estruturas de repetição como (while, for ou do while).
Suas funções devem utilizar return para retornar os resultados solicitados
- Exibir os números de 1 a 25: (1, 2, 3, …, 24, 25)
- Exibir os números de 25 a 1: (25, 24, 23, …, 2, 1)
- Exibir os números de -1 a -25: (-1, -2, -3, …, -24, -25)
- Exibir os números de -25 a -1: (-25, -24, -23, …, -2, -1)
- Exibir os números ímpares de 25 a -25: (25, 23, 21, …, -23, -25)
- Exibir os números divisíveis por 3 até o 100: (3, 6, 9, …, 96, 99)
- Exibir os números divisíveis por 7 até o 100: (7, 14, 21, …, 91, 98)
- Exibir os números divisíveis por 3 e os números divisíveis por 7 regressivamente a partir do 100: (99, 98, 96, 93, 91, …, 14, 12, 9, 7, 6, 3)
- Exibir os números ímpares divisíveis por 5 até o 100: (5, 15, 25, …, 85, 95)
- Exibir os 20 elementos de sampleArray. (469, 755, 244, …, 940, 472)
- Exibir todos os números pares contidos em sampleArray. (244, 758, 450, …, 940, 472)
- Exibir todos os números ímpares contidos em sampleArray. (469, 755, 245, …, 179, 535)
- Exibir os números divisíveis por 8 em sampleArray: (712, 456, …, 472)
- Exibir o quadrado de cada elemento de sampleArray. (219961, 570025, …, 222784)
- Exibir a soma de todos os números de 1 a 20.
- Exibir a soma de todos os elementos de sampleArray.
- Exibir o menor elemento de sampleArray.
- Exibir o maior elemento de sampleArray.
Certo, até aqui você exercitou a sua lógica. Agora vamos exercitar a famosa leitura de documentação. Devemos ter o MDN como nosso melhor amigo na nossa jornada de desenvolvedores! Então o desafio aqui é criar NOVAS FUNÇÕES e utilizar Métodos de Array.
IMPORTANTE: Não modifique as funções feitas sem métodos de Array. Se quiser cumprir este desafio extra, faça novas funçẽs
Leia os métodos, ache o que melhor se encaixa na sua solução e implemente!
Estes problemas envolvem o uso de estilização CSS, e exigem um certo conhecimento de CSS para serem completados. Iremos cobrir isso mais adiante, mas sinta-se a vontade para fazer uma pesquisa por conta própria se quiser ganhar alguns pontos extras!
- Exibir 20 retângulos cinza sólido, cada um com 20px de altura e 100px de largura.
- Exibir 20 retângulos cinza sólido, cada um com 20px de altura e larguras variando uniformemente de 105px a 200px, com o intervalo de 5px entre cada retangulo.
- Exibir 20 retângulos cinza sólido, cada um com 20px de altura e com larguras em pixels determinadas pelos 20 elementos do sampleArray.
- Como no Item #3, mas alternando cores para que retângulo sim, retângulo não seja vermelho.
- Como no Item #3, mas pinte os retângulos de largura par de vermelho.
Faça o push do código para o seu repositório GitHub e implemente-o GitHub pages. No Canvas, por favor, envie sua url do GitHub Pages: (ex: https://nomedeusuario.github.io/s\_js-katas-3) e envie o link do seu repositório nos comentários. Após ser a correção, seu projeto deverá ficar privado.