CHALANGES.md

Semana 1 - 2: Git & HTML

1. Crie um repositório público no seu Github com o seguinte nome 100-days-of-code e adicione readme com o manifesto do nosso desafio AQUI em markdown;
2. Estruture uma página web no padrão HTML5, contendo as seguintes tags: header, footer, main section, nav. Os conteúdos podem ser fictícios; uso do CSS é opcional. Fique à vontade caso queira evoluir;
3. Faça o commit e push do seu primeiro challenge no seu repositório do desafio utilizando um terminal;
4. Crie uma segunda branch no seu repositório e mova um dos seus commit para a nova branch utilizando o terminal;
5. Estruture uma página web no padrão HTML5, contendo no mínimo 5 elementos HTML. Para compreender um pouco mais sobre elementos, pode ser consultada a documentação em: MDN;
6. Com o comando rebase , retorne um ou todos os seus projetos para a branch original, via terminal (vamos relembrar os comandinhos do git pessoal);
7. Estruture uma página web no padrão HTML5 contendo um formulário com no mínimo 5 campos, utilizando as tags semânticas: field, legend, aria-label, type e for;
8. Estruture uma página web no padrão HTML5, contendo uma lista não ordenada com ao menos 5 elementos e um button com a função link para outra página;
9. Estruture uma página web no padrão HTML5 embutindo um mapa (sugestão: Google Maps já contém orientações de como incorporar no código html);
10. Estruture uma página HTML5 embutindo uma playlist de vídeo ou áudio (sugestão: Youtube/Spotify);
11. Estruture uma página web no padrão HTML5 contendo uma galeria com ao menos 8 imagens, contendo as seguintes tags semânticas: figure, figcaption , aria-LabeLLedby e alt. Aqui vale estudar a importânicia na utilização dessas tags para acessibilidade;
12. Escolha um repositório, ao seu critério, e clone para o seu repositório via terminal [voltamos para Git];
13. Crie um arquivo de reset de CSS e aplique via link a uma página HTML5. Lembre-se de utilizar os atributos HTML corretos na hora de identificar um link contento arquivo de CSS;
14. Crie uma página web no padrão HTML5 e estilize-a com um arquivo CSS3;

Semana 3: CSS3

15. Crie uma navbar e estilize utilizando os seguintes elementos CSS: float (não esqueça de limpar o float com o clear);
16. Crie um grid com 6 (seis) elementos em 3 (três) colunas, no posicionamento: inline ;
17. Crie um grid com 6 (seis) elementos e personalize usando Flexbox com ao menos 2 (dois) atributos: ex.: row+ row-reverse;
18. Estruture uma página web no padrão HTML5 e estilize utilizando ao menos 2 (duas) fontes, pesos, cores, styles e ícones diferentes; (23/08)
19. Crie um elemento e adicione as propriedades: box-sizing e box-shadow;
20. Crie 5 (cinco) barras de progresso, com cores e marcação de progresso diferentes;
21. Crie uma tabela em HTML5 contendo, no mínimo, 3 (três) colunas e 10 (dez) linhas, estilize com CSS e introduza as tags semânticas nos campos apropriados;
22. Crie um arquivo CSS contendo aplicação de estilo com ao menos três tipos de seletores diferentes, um psêudo elemento e uma variável.

Semana 4 - 7: JavaScript

23. Estruture um arquivo index.html contendo headcom os elementos meta necessários, crie o body com ao menos um elemento e link um arquivo JavaScript. Com esse template pronto, crie e renderize ao menos dois elementos utilizando o DOM;
24. Estruture um documento e crie ao menos dois elementos do DOM com a função createElement e estilize com a propriedade className ou outra equivalente;
25. Crie um script que retorna o resultado de uma função que converte anos em dias;
26. Estruture um documento e crie ao menos dois elementos do DOM com a propriedade createElement ou outra equivalente, insira no primeiro uma string concatenada e no segundo uma string interpolada;
27. Crie um algoritmo que receberá uma entrada com algum número e que ao final irá imprimir 'FizzBuzz' para números divisíveis por 3 e 5, da seguinte forma: 1. para números divisíveis por 3 irá imprimir 'Fizz'; 2. para números divisíveis por 5 irá imprimir 'Buzz' ; 3. por fim, se não cumprir nenhum dos dois casos anteriores, imprime o próprio número;
28. Crie um programa que calcule o IMC de uma pessoa, recebendo e retornando os valores, com elementos criados via DOM;
29. Ei, viu que começamos a escalar a montanha chamada lógica? Então, crie um programa que receba um determinado número do usuário e retorne a tabuada do mesmo número de 1 a 10. Receba os valores e imprima na tela, via terminal ou browser;
30. Crie uma função que recebe uma temperatura em graus celsius retorna o valor convertido em Fahrenheit;
31. Crie uma função que recebe 2 parâmetros e retorna a multiplicação entre else;
32. Crie uma estrutura de repetição que imprime no console ou no browser os seguintes itens: a) números de 1 a 50; b) quando chegar no número 25 interrompa a instrução e pare o loop; c) quando chegar no número 10 pule a instrução;
33. Crie um algoritimo que leia o valor de um jantar, calcule e informe o valor de uma taxa do garçom (10%) e o valor total a ser pago;
34. Crie 4 arrays contendo: 1° 10 elementos; 2° 20 elementos; 3° 10 elementos; 4° 5 elementos, após insira 8 elementos no array de menor número com o método push . Por fim mescle duas arrays utilizando o operador spread;
35. Imprima na tela os números pares existentes entre 0 e 100.
36. Utilizando HTML, CSS e JavaScript, crie um countdown timer; Ex.: [Aqui] Repositório [Aqui]
37. Crie um algoritmo que converte dias em horas, quando recebe um número de dias.
38. Elabore um algoritmo que receba um número (1-7) e devolva o dia da semana correspondente.
39. Crie um algoritmo que recolha as notas das quatro provas que os alunos fazem ao longo do ano letivo, depois verifique a média dessas provas e considerando que o aluno precisa ter um média igual ou maior que 7 (sete) para ser Aprovado, imprima se ele passou ou não de Ano. Caso queira evoluir a ideia, poderá criar a lógica para Recuperação e o retorno do status Reprovado na tela;
40. Com duas imagens de lâmpada, uma acesa e outra apagada, crie um script para associar a troca da imagem ao evento de click (EventListener || onClick), fazendo com pareça que está acendendo e apagando a lâmpada;
41. Crie dois botões no HTML chamados: 'Verde', Vermelho'. Ao clicar neles, o style="background-color: {COR-SELECIONADA}" vai ser alterado dinamicamente entre verde e vermelho;
42. Crie uma função que informa se tem os caracteres 'LOL' no parâmetro informado pelo usuário, retornando true||false. Ex: CS é melhor que LOL === true;
43. Crie um programa que funcionará como um sinal de trânsito;
44. Crie uma função que retorna a palavra (impar/par) de acordo com seu parâmetro passado pelo usuário;
45. Vamos brincar de manipular DOM?? Primeiramente, crie um script, depois um documento HTML válido contendo uma div com o id = "resultado" e um <h1>RESULTADO</h1>, claro link o script no HTML 🤔. Depois renderize os elementos HTML via JavaScript no momento em que a página carregar;
46. Continuando o exercício anterior... vamos dar uma utilidade para ele. Crie uma função que recebe 2 parâmetros e retorna a soma deles, porém caso seja passado um parâmetro vazio ela retorne zero.
47. Ainda utilizando o código feito no dia #45, crie uma função que recebe o ano de nascimento da pessoa, informando se ela é maior ou menor de idade;
48. Agora vamos trabalhar com repetição (e muita repetição 👀). Seguinte, lembra da div com id= resultado? Então, fazendo valer dos seus conhecimentos de manipulação de DOM, imprima dentro da div a string: Repetição : a) 1X com uso do inner.HTML ou outro método equivalente; b) Escreva 2x a string: Repetição; c) 20X A string: Repetição (use for pelo amor de Deus); c) 5Xstring: Repetição (agora com forEach); d) 5X string: Repetição (agora com while); e) 5X string: Repetição (agora com do{}While). Chega de for? 🤭
49. Exiba a data atual pelo JavaScript no seguinte formato: dia/mês/Ano. Não vale implementar de forma hard code, tem que ser dinâmico e de preferência instanciando aquela função nativa marota (spoiler new Date). Pode ser impressa na tela com o código que já vinha sendo utilizado.
50. Programar === divertido e eu posso provar! Tem quem chame de adedanha, outros de adedonha (os millennials chamam de stop 🤭), eu chamo manipular array. Então segue: crie um array contendo elementos do tipo: carro com a letra B. Depois exiba a quantidade/comprimento com a função [array].length;
51. Continuando o game ..., crie outro array contendo elementos do tipo: cor com a letra L e exiba um a um com alert(), preferencialmente utilizando laço de repetição for, forEach, while ou do {} while;
52. Crie outro array contendo elementos do tipo: países com a letra M e exiba um a um com alert(), mas dessa vez utilizando funções com callback, ex: map, reduce, filter;
53. Acabou o game, voltando para programação normal por aqui. Mas, continuamos com array 😅... crie um array contendo números e exiba-os de forma decrescente;
54. Crie um array contendo uma lista ao seu critério e, exiba todos os elementos do array dentro do HTML ex: <ul id="nomes"></ul>;

Semana 8: Bootstrap || Node.Js

55. Escolha um dos seus projeto anteriores para refatorar, e implemente o Bootstrap [ https://getbootstrap.com/] Dica: implemente via link CDN;
56. Torne as imagens da galeria do #day11 responsivas, mantendo todas as suas propriedades originais;
57. Faça um dos seus projetos anteriores se tornar completamente responsivo com o uso de media queries e breakpoints;
58. Instale o Node.Js via terminal, inicie um novo projeto e crie um arquivo database.js contendo uma lista de livros (sugestão) separadas em objetos, com as seguintes chaves par : valor {id, nome}: autor, categoria, quantidade de páginas, leu (true || false);
59. Dando seguimento ao projeto anterior, um arquivo app.js e depois exporte esse módulo database.js para seu arquivo JS principal [Aproveitar para estudar exports e imports em JS];
60. Ainda no Node.js, crie um programa no arquivo app.js capaz de perguntar ao usuário se deseja buscar um dos livros de sua database, via readline-sync;
61. Finalizando o projeto, implemente uma lógica que seja capaz de escolher um das categoria, testar as respostas inputadas e retornar a busca na tela do terminal via console.table;
62. Crie um campo de texto no HTML que armazena o conteúdo em uma array sempre que você clicar no botão, e apresente em uma lista(ul) possibilitando excluir individualmente o item/ li pelo evento de click. (Dica: Neste caso podem ser utilizadas várias funções, como p. ex.: document.getElementById document.querySelector , evento onclick, eventListener, etc... vale pequisar e usar a criatividade 🤓)
63. Seguinte, lembra do countdown timer criado no dia #36? Que tal criarmos um relógio hoje? (Dica: a base está no dia #49 ⌚)

Semana 9: Sass

66. Seria interessante incluir o Sass nos nossos projetos. Mas o que é o Sass ? É um pré-processador de CSS (CSS preprocessor), que nos ajuda enquanto estamos codando. O desafio de hoje vai ser proposto dentro do [Sassmeister], uma plataforma que já compila, mostra como seria o CSS básico e renderiza resultado do código em Sass, para quem está praticando é ótimo, pois não tem a necessidade de instalar as dependências no PC, caso queira implementar diretamente em um projeto, fique à vontade. Então vamos lá, para começar, pegue algum código em CSS já feito e tente reescrevê-lo utilizando os recursos de aninhamento e variável do Sass;
67. Seguindo com o Sass, hoje vamos tentar interpolar. Utilize as variáveis criadas para interpolar com outros elementos. A imagem a seguir dá uma ideia bem básica da interpolação de duas variáveis. https://imgur.com/a/1wBqyHo;
68. Atualize o arquivo SCSS que já vem utilizando, com a inclusão de @mixin e @include no código;
69. Crie mais um arquivo SCSS e separe os seus blocos de código, depois utilize a função @import para compartilhar os blocos de código entre os dois arquivos. Ex.: https://sass-lang.com/documentation/at-rules/import;
70. Voltamos ao for 🤪! Mas dessa vez consulte a documentação do Sass e implemente o laço for no arquivo SCSS. Segue exemplo super básico: https://bit.ly/3p6KBBf
71. Hoje vamos criar uma function com Sass para otimizar a criação de grid CSS, pega a ideia no link a seguir: https://bit.ly/sassfunction
72. Que tal hoje aprendermos mais uma funcionalidade do Sass: @extends. Esta funcionalidade permite estender características de um determinado bloco de SCSS para ser utilizado em outro, independetemente do seletor, conforme podemos observar no exemplo a seguir. Como esta feature é muito útil a aplicação fica por conta da sua imaginação https://bit.ly/sassextends
73. Práticas atreladas ao CSS Grid com

Desafios Semanais - Validação de form 📑

Criar uma aplicação na qual o usuário pode visualizar dois campos (label), que serão usados para inserir uma ID de usuário e uma senha, junto com os botões Cancelar e Login abaixo deles. A cor de fundo padrão dos campos de texto deve ser branca. Então: a) O usuário pode inserir uma ID de usuário e senha nas caixas de texto, ou seja, entrada que possa receber texto. b) O usuário pode clicar no botão Login para validar o ID do usuário e a senha. c) O usuário pode ver uma mensagem de aviso, caso uma ou ambas as caixas de texto estiver vazia e, a cor de fundo da caixa de texto vazia mudará para amarelo claro. d) O usuário pode ver uma mensagem de aviso se o ID do usuário não corresponder a testuser e a cor de fundo da caixa de texto mudará para vermelho claro. e) O usuário pode ver uma mensagem de aviso se a senha não corresponder a minha senha e a cor de fundo da caixa de texto mudará para vermelho claro. f) O usuário pode clicar no botão Cancelar para limpar as caixas de texto e redefinir suas cores de fundo para branco. (este desafio compreende os dias 74 a 80)

Git Stats 🐱‍👤

Partindo do princípio que os aplicativos da Web captam dados de várias maneiras. Seja através da entrada do usuário diretamente na interface, por meio de API’s para sistemas de back-end, de arquivos, de bancos de dados, etc. Vou propor a construção de uma pequena aplicação capaz de captar dados de uma API de terceiro, para que possamos dar um retorno visual ao usuário. O objetivo do aplicativo, que podemos chamar de GitHub Status, é apresentar a você uma maneira de extrair informações de outro site, por meio de requisição. A ideia central do programa é a seguinte:

• Que receba o nome de um usuário de Github por entrada de usuário;
• E por meio de requisição para a API do Github ( https://api.github.com/users/{nome-de-usuario}) ou ( https://api.github.com/users/{nome-de-usuario}/repos) recupere as informações de usuário.
• Após filtrar as informações desejadas, transforme o JSON para exibir na interface.

Com essas informações que selecionou, construa uma interface amigável para exibi-las no desktop e/ou mobile. Embora esta especificação de aplicativo dependa muito de Javascript, sinta-se à vontade para desenvolvê-la usando sua linguagem de escolha!

Sugestões:

• O usuário pode ver o status atual das operações do GitHub Git, solicitações de API, problemas operacionais, PRs, painel e projetos, notificações operacionais, aspectos operacionais e páginas operacionais do GitHub como uma lista na janela principal do aplicativo. (este desafio compreende os dias 81 a 87)

Weather App ⛈️

Continuando com o uso de API, vamos sugerir a construção de uma aplicação de verificação do clima, que chamaremos de "Weather App". O "Weather App" poderá pegar a temperatura e a condição do clima do dia atual, bem como responder se está dia ou noite em uma determinada cidade, por meio da API accuweather

Interessante se a aplicação pudesse cumprir os seguintes requisitos:

• Aceitar o nome de uma cidade por meio de um input
• Receber submit por meio da tecla enter, retornando as informações de temperatua, condições do clima e uma imagem para o dia ou para noite.

Pode ser um plus o armazenamento em localStorage e/ou a utilização da lib axios se estiver usando JS

(este desafio compreende os dias 88 a 94)

Stopwatch ⏱️

Vamos criar um cronômetro. Como já utilizamos funções de marcação de tempo para criar um relógio e um contador, iremos finalizar com um cronômetro, como aqueles de treinador esportivo ⏱️ Recomendável que tenha:

• um botão de start que inicia o relógio;
• um botão de stop que para a contagem do relógio;
• quando o relógio estiver parado um botão que retoma contagem (como se voltasse de uma pausa);
• e que o usuário pudesse resetar a contagem. Aqui vai uma sugestão para implementação:

(este desafio compreende os dias 95 a 100)