├── .editorconfig
├── .github
    ├── ISSUE_TEMPLATE.md
    └── PULL_REQUEST_TEMPLATE.md
├── .gitignore
├── README.md
├── challenge-01
    └── README.md
├── challenge-02
    └── README.md
├── challenge-03
    └── README.md
├── challenge-04
    └── README.md
├── challenge-05
    └── challenge-05.js
├── challenge-06
    └── challenge-06.js
├── challenge-07
    └── challenge-07.js
├── challenge-08
    └── challenge-08.js
├── challenge-09
    └── challenge-09.js
├── challenge-10
    └── challenge-10.js
├── challenge-11
    └── challenge-11.js
├── challenge-12
    └── challenge-12.js
├── challenge-13
    └── challenge-13.js
├── challenge-14
    └── challenge-14.js
├── challenge-15
    └── challenge-15.js
├── challenge-16
    └── challenge-16.js
├── challenge-17
    └── challenge-17.js
├── challenge-18
    └── challenge-18.js
├── challenge-19
    └── challenge-19.js
├── challenge-20
    ├── challenge-20.js
    └── index.html
├── challenge-21
    └── challenge-21.js
├── challenge-22
    └── challenge-22.js
├── challenge-23
    └── challenge-23.js
├── challenge-24
    ├── challenge-24.js
    └── index.html
├── challenge-25
    └── challenge-25.js
├── challenge-26
    ├── challenge-26.js
    └── index.html
├── challenge-27
    └── challenge-27.js
├── challenge-28
    └── challenge-28.js
├── challenge-29
    ├── challenge-29.js
    └── company.json
├── challenge-30
    └── challenge-30.js
├── challenge-31
    └── challenge-31.js
├── challenge-32
    ├── challenge-32.js
    └── server
    │   ├── app.js
    │   ├── package.json
    │   └── routes
    │       └── index.js
├── challenge-33
    ├── challenge-33.js
    └── server
    │   ├── app.js
    │   ├── package.json
    │   └── routes
    │       └── index.js
└── summary.md


/.editorconfig:
--------------------------------------------------------------------------------
 1 | root = true
 2 | 
 3 | [*]
 4 | charset = utf-8
 5 | end_of_line = lf
 6 | insert_final_newline = true
 7 | indent_style = space
 8 | indent_size = 2
 9 | trim_trailing_whitespace = true
10 | max_line_length = 80
11 | 
12 | [*.md]
13 | trim_trailing_whitespace = false
14 | 


--------------------------------------------------------------------------------
/.github/ISSUE_TEMPLATE.md:
--------------------------------------------------------------------------------
 1 | <!--
 2 | ATENÇÃO: Leia antes de postar sua dúvida!
 3 | -------------------------------------------
 4 | 
 5 | DICA: Se você precisar adicionar trechos de código, coloque-os entre 3 crases,
 6 | assim:
 7 | 
 8 | ```js
 9 | function blabla () {
10 | }
11 | ```
12 | 
13 | Colocando 3 crases antes, 3 crases depois, o código aparecerá corretamente
14 | formatado. O "js" ali em cima é para que o código seja corretamente colorizado
15 | com base na linguagem JS. Se não estiver usando código JS, só remova o "js" dali.
16 | 
17 | Lembre-se também de, antes de publicar a Issue, clicar na aba "Preview", para
18 | visualizar se a formatação está correta :)
19 | -->
20 | 
21 | <!-- ESCREVA SUA DÚVIDA APÓS ESSA LINHA -->
22 | 
23 | 
24 | 
25 | <!-- Não apague daqui pra baixo! -->
26 | @fdaciuk
27 | 


--------------------------------------------------------------------------------
/.github/PULL_REQUEST_TEMPLATE.md:
--------------------------------------------------------------------------------
 1 | <!--
 2 | Oi! Obrigado por enviar esse Pull Request! Se você é aluno do curso, e está enviando um desafio, muito bem! Só queria avisar que não é necessário esperar a correção manual do desafio, pois eu não estou mais fazendo dessa forma! Como agora o curso já está todo gravado, você poderá acompanhar a correção do desafio sempre no início da próxima aula, ok?
 3 | 
 4 | E se você tiver qualquer dúvida, seja com relação ao conteúdo passado, ou mesmo ao desafio em si (ou a correção do mesmo), pode abrir uma issue aqui no GitHub que eu estou aqui pra te ajudar, ok? :D
 5 | 
 6 | Então é isso! Siga em frente, e bons estudos!
 7 | 
 8 | Abraços,
 9 | 
10 | Fernando Daciuk.
11 | -->
12 | 


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
1 | node_modules
2 | *.swp
3 | yarn.lock
4 | package-lock.json
5 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | [![Curso Ninja JavaScript - Da2k](https://cloud.githubusercontent.com/assets/487669/6239059/58b94ab0-b6e7-11e4-8e5d-a5f2740870fd.png)](https://www.udemy.com/curso-javascript-ninja/?couponCode=JSNINJA)
 2 | 
 3 | # Curso JavaScript Ninja
 4 | 
 5 | [Inscreva-se agora mesmo e ganhe 10% de desconto!](https://www.udemy.com/curso-javascript-ninja/?couponCode=JSNINJA)
 6 | 
 7 | ## Como tirar dúvidas sobre o conteúdo do curso
 8 | 
 9 | - Acesse a página de [issues](https://github.com/da2k/curso-javascript-ninja/issues);
10 | - Pesquise nas _issues_ abertas e fechadas, se a mesma dúvida já foi postada;
11 | - Se não foi, crie uma nova _issue_, coloque um título que tenha a ver com a sua dúvida, e descreva-a com o maior nível de detalhes possíveis, para que possamos te ajudar :)
12 | 
13 | ## Sumário
14 | 
15 | Veja o sumário completo do curso [aqui](summary.md).
16 | 
17 | Aproveite o curso! :D
18 | 


--------------------------------------------------------------------------------
/challenge-01/README.md:
--------------------------------------------------------------------------------
 1 | # Desafio Semana #1
 2 | 
 3 | ```js
 4 | // Declarar uma variável chamada `myvar`, sem valor.
 5 | ?
 6 | 
 7 | // Após declarada, atribua o valor 10 à variável `myvar`.
 8 | ?
 9 | 
10 | // Declare uma nova variável chamada `soma`, e adicione uma instrução somando os valores 15 e 8.
11 | ?
12 | 
13 | // Atribua à variável `soma` todo o valor dela, somando 1, usando o operador de soma abreviado.
14 | ?
15 | 
16 | // Atribua à variável `soma` todo o valor dela, multiplicando por 3, usando o operador de multiplicação abreviado.
17 | ?
18 | 
19 | // Qual é o valor da variável `soma` até aqui?
20 | ?
21 | 
22 | // Declare uma variável chamada `souninja`, atribuindo à ela o valor booleano que representa `verdadeiro`.
23 | ?
24 | 
25 | // Declare uma variável chamada `comida` que recebe um array com os valores 'arroz', 'feijão' e 'ovo'.
26 | ?
27 | 
28 | // Digite a instrução que imprime o valor de 'feijao', que está na variável `comida`.
29 | ?
30 | 
31 | // Digite o código que verifica se a variável `soma' é igual a variável `myvar` (testando também o tipo).
32 | ?
33 | 
34 | // Digite o código que verifica se a variável `myvar` é menor ou igual à variável `soma`.
35 | ?
36 | 
37 | // Crie uma função chamada `divisao` que receba como parâmetro dois números, e retorne o resultado da divisão entre eles.
38 | ?
39 | 
40 | // Invoque a função criada acima, passando os parâmetros 10 e 2.
41 | ?
42 | ```


--------------------------------------------------------------------------------
/challenge-02/README.md:
--------------------------------------------------------------------------------
 1 | # Desafio da semana #2
 2 | 
 3 | Nesse exercício, você está livre para escolher os nomes para suas variáveis e funções! :smile:
 4 | 
 5 | ```js
 6 | // Crie uma função que receba dois argumentos e retorne a soma dos mesmos.
 7 | ?
 8 | 
 9 | // Declare uma variável que receba a invocação da função criada acima, passando dois números quaisquer por argumento, e somando `5` ao resultado retornado da função.
10 | ?
11 | 
12 | // Qual o valor atualizado dessa variável?
13 | ?
14 | 
15 | // Declare uma nova variável, sem valor.
16 | ?
17 | 
18 | /*
19 | Crie uma função que adicione um valor à variável criada acima, e retorne a string:
20 |     O valor da variável agora é VALOR.
21 | Onde VALOR é o novo valor da variável.
22 | */
23 | ?
24 | 
25 | // Invoque a função criada acima.
26 | ?
27 | 
28 | // Qual o retorno da função? (Use comentários de bloco).
29 | ?
30 | 
31 | /*
32 | Crie uma função com as seguintes características:
33 | 1. A função deve receber 3 argumentos;
34 | 2. Se qualquer um dos três argumentos não estiverem preenchidos, a função deve retornar a string:
35 |     Preencha todos os valores corretamente!
36 | 3. O retorno da função deve ser a multiplicação dos 3 argumentos, somando `2` ao resultado da multiplicação.
37 | */
38 | ?
39 | 
40 | // Invoque a função criada acima, passando só dois números como argumento.
41 | ?
42 | 
43 | // Qual o resultado da invocação acima? (Use comentários para mostrar o valor retornado).
44 | ?
45 | 
46 | // Agora invoque novamente a função criada acima, mas passando todos os três argumentos necessários.
47 | ?
48 | 
49 | // Qual o resultado da invocação acima? (Use comentários para mostrar o valor retornado).
50 | ?
51 | 
52 | /*
53 | Crie uma função com as seguintes características:
54 | 1. A função deve receber 3 argumentos.
55 | 2. Se somente um argumento for passado, retorne o valor do argumento.
56 | 3. Se dois argumentos forem passados, retorne a soma dos dois argumentos.
57 | 4. Se todos os argumentos forem passados, retorne a soma do primeiro com o segundo, e o resultado, dividido pelo terceiro.
58 | 5. Se nenhum argumento for passado, retorne o valor booleano `false`.
59 | 6. E ainda, se nenhuma das condições acima forem atendidas, retorne `null`.
60 | */
61 | ?
62 | 
63 | // Invoque a função acima utilizando todas as possibilidades (com nenhum argumento, com um, com dois e com três.) Coloque um comentário de linha ao lado da função com o resultado de cada invocação.
64 | ?
65 | ```


--------------------------------------------------------------------------------
/challenge-03/README.md:
--------------------------------------------------------------------------------
  1 | # Desafio da semana #3
  2 | 
  3 | ```js
  4 | // Declarar uma variável qualquer, que receba um objeto vazio.
  5 | ?
  6 | 
  7 | /*
  8 | Declarar uma variável `pessoa`, que receba suas informações pessoais.
  9 | As propriedades e tipos de valores para cada propriedade desse objeto devem ser:
 10 | - `nome` - String
 11 | - `sobrenome` - String
 12 | - `sexo` - String
 13 | - `idade` - Number
 14 | - `altura` - Number
 15 | - `peso` - Number
 16 | - `andando` - Boolean - recebe "falso" por padrão
 17 | - `caminhouQuantosMetros` - Number - recebe "zero" por padrão
 18 | */
 19 | ?
 20 | 
 21 | /*
 22 | Adicione um método ao objeto `pessoa` chamado `fazerAniversario`. O método deve
 23 | alterar o valor da propriedade `idade` dessa pessoa, somando `1` a cada vez que
 24 | for chamado.
 25 | */
 26 | ?
 27 | 
 28 | /*
 29 | Adicione um método ao objeto `pessoa` chamado `andar`, que terá as seguintes
 30 | características:
 31 | - Esse método deve receber por parâmetro um valor que representará a quantidade
 32 | de metros caminhados;
 33 | - Ele deve alterar o valor da propriedade `caminhouQuantosMetros`, somando ao
 34 | valor dessa propriedade a quantidade passada por parâmetro;
 35 | - Ele deverá modificar o valor da propriedade `andando` para o valor
 36 | booleano que representa "verdadeiro";
 37 | */
 38 | ?
 39 | 
 40 | /*
 41 | Adicione um método ao objeto `pessoa` chamado `parar`, que irá modificar o valor
 42 | da propriedade `andando` para o valor booleano que representa "falso".
 43 | */
 44 | ?
 45 | 
 46 | /*
 47 | Crie um método chamado `nomeCompleto`, que retorne a frase:
 48 | - "Olá! Meu nome é [NOME] [SOBRENOME]!"
 49 | */
 50 | ?
 51 | 
 52 | /*
 53 | Crie um método chamado `mostrarIdade`, que retorne a frase:
 54 | - "Olá, eu tenho [IDADE] anos!"
 55 | */
 56 | ?
 57 | 
 58 | /*
 59 | Crie um método chamado `mostrarPeso`, que retorne a frase:
 60 | - "Eu peso [PESO]Kg."
 61 | */
 62 | ?
 63 | 
 64 | /*
 65 | Crie um método chamado `mostrarAltura` que retorne a frase:
 66 | - "Minha altura é [ALTURA]m."
 67 | */
 68 | ?
 69 | 
 70 | /*
 71 | Agora vamos brincar um pouco com o objeto criado:
 72 | Qual o nome completo da pessoa? (Use a instrução para responder e comentários
 73 | inline ao lado da instrução para mostrar qual foi a resposta retornada)
 74 | */
 75 | ?
 76 | 
 77 | /*
 78 | Qual a idade da pessoa? (Use a instrução para responder e comentários
 79 | inline ao lado da instrução para mostrar qual foi a resposta retornada)
 80 | */
 81 | ?
 82 | 
 83 | /*
 84 | Qual o peso da pessoa? (Use a instrução para responder e comentários
 85 | inline ao lado da instrução para mostrar qual foi a resposta retornada)
 86 | */
 87 | ?
 88 | 
 89 | /*
 90 | Qual a altura da pessoa? (Use a instrução para responder e comentários
 91 | inline ao lado da instrução para mostrar qual foi a resposta retornada)
 92 | */
 93 | ?
 94 | 
 95 | /*
 96 | Faça a `pessoa` fazer 3 aniversários.
 97 | */
 98 | ?
 99 | 
100 | /*
101 | Quantos anos a `pessoa` tem agora? (Use a instrução para responder e
102 | comentários inline ao lado da instrução para mostrar qual foi a resposta
103 | retornada)
104 | */
105 | ?
106 | 
107 | /*
108 | Agora, faça a `pessoa` caminhar alguns metros, invocando o método `andar` 3x,
109 | com metragens diferentes passadas por parâmetro.
110 | */
111 | ?
112 | 
113 | /*
114 | A pessoa ainda está andando? (Use a instrução para responder e comentários
115 | inline ao lado da instrução para mostrar qual foi a resposta retornada)
116 | */
117 | ?
118 | 
119 | /*
120 | Se a pessoa ainda está andando, faça-a parar.
121 | */
122 | ?
123 | 
124 | /*
125 | E agora: a pessoa ainda está andando? (Use uma instrução para responder e
126 | comentários inline ao lado da instrução para mostrar a resposta retornada)
127 | */
128 | ?
129 | 
130 | /*
131 | Quantos metros a pessoa andou? (Use uma instrução para responder e comentários
132 | inline ao lado da instrução para mostrar a resposta retornada)
133 | */
134 | ?
135 | 
136 | /*
137 | Agora vamos deixar a brincadeira um pouco mais divertida! :D
138 | Crie um método para o objeto `pessoa` chamado `apresentacao`. Esse método deve
139 | retornar a string:
140 | - "Olá, eu sou o [NOME COMPLETO], tenho [IDADE] anos, [ALTURA], meu peso é [PESO] e, só hoje, eu já caminhei [CAMINHOU QUANTOS METROS] metros!"
141 | 
142 | Só que, antes de retornar a string, você vai fazer algumas validações:
143 | - Se o `sexo` de `pessoa` for "Feminino", a frase acima, no início da
144 | apresentação, onde diz "eu sou o", deve mostrar "a" no lugar do "o";
145 | - Se a idade for `1`, a frase acima, na parte que fala da idade, vai mostrar a
146 | palavra "ano" ao invés de "anos", pois é singular;
147 | - Se a quantidade de metros caminhados for igual a `1`, então a palavra que
148 | deve conter no retorno da frase acima é "metro" no lugar de "metros".
149 | - Para cada validação, você irá declarar uma variável localmente (dentro do
150 | método), que será concatenada com a frase de retorno, mostrando a resposta
151 | correta, de acordo com os dados inseridos no objeto.
152 | */
153 | ?
154 | 
155 | // Agora, apresente-se ;)
156 | ?
157 | ```
158 | 


--------------------------------------------------------------------------------
/challenge-04/README.md:
--------------------------------------------------------------------------------
  1 | # Desafio da semana #4
  2 | 
  3 | ```js
  4 | /*
  5 | Declare uma variável chamada `isTruthy`, e atribua a ela uma função que recebe
  6 | um único parâmetro como argumento. Essa função deve retornar `true` se o
  7 | equivalente booleano para o valor passado no argumento for `true`, ou `false`
  8 | para o contrário.
  9 | */
 10 | ?
 11 | 
 12 | // Invoque a função criada acima, passando todos os tipos de valores `falsy`.
 13 | ?
 14 | 
 15 | /*
 16 | Invoque a função criada acima passando como parâmetro 10 valores `truthy`.
 17 | */
 18 | ?
 19 | 
 20 | /*
 21 | Declare uma variável chamada `carro`, atribuindo à ela um objeto com as
 22 | seguintes propriedades (os valores devem ser do tipo mostrado abaixo):
 23 | - `marca` - String
 24 | - `modelo` - String
 25 | - `placa` - String
 26 | - `ano` - Number
 27 | - `cor` - String
 28 | - `quantasPortas` - Number
 29 | - `assentos` - Number - cinco por padrão
 30 | - `quantidadePessoas` - Number - zero por padrão
 31 | */
 32 | ?
 33 | 
 34 | /*
 35 | Crie um método chamado `mudarCor` que mude a cor do carro conforme a cor
 36 | passado por parâmetro.
 37 | */
 38 | ?
 39 | 
 40 | /*
 41 | Crie um método chamado `obterCor`, que retorne a cor do carro.
 42 | */
 43 | ?
 44 | 
 45 | /*
 46 | Crie um método chamado `obterModelo` que retorne o modelo do carro.
 47 | */
 48 | ?
 49 | 
 50 | /*
 51 | Crie um método chamado `obterMarca` que retorne a marca do carro.
 52 | */
 53 | ?
 54 | 
 55 | /*
 56 | Crie um método chamado `obterMarcaModelo`, que retorne:
 57 | "Esse carro é um [MARCA] [MODELO]"
 58 | Para retornar os valores de marca e modelo, utilize os métodos criados.
 59 | */
 60 | ?
 61 | 
 62 | /*
 63 | Crie um método que irá adicionar pessoas no carro. Esse método terá as
 64 | seguintes características:
 65 | - Ele deverá receber por parâmetro o número de pessoas entrarão no carro. Esse
 66 | número não precisa encher o carro, você poderá acrescentar as pessoas aos
 67 | poucos.
 68 | - O método deve retornar a frase: "Já temos [X] pessoas no carro!"
 69 | - Se o carro já estiver cheio, com todos os assentos já preenchidos, o método
 70 | deve retornar a frase: "O carro já está lotado!"
 71 | - Se ainda houverem lugares no carro, mas a quantidade de pessoas passadas por
 72 | parâmetro for ultrapassar o limite de assentos do carro, então você deve
 73 | mostrar quantos assentos ainda podem ser ocupados, com a frase:
 74 | "Só cabem mais [QUANTIDADE_DE_PESSOAS_QUE_CABEM] pessoas!"
 75 | - Se couber somente mais uma pessoa, mostrar a palavra "pessoa" no retorno
 76 | citado acima, no lugar de "pessoas".
 77 | */
 78 | ?
 79 | 
 80 | /*
 81 | Agora vamos verificar algumas informações do carro. Para as respostas abaixo,
 82 | utilize sempre o formato de invocação do método (ou chamada da propriedade),
 83 | adicionando comentários _inline_ ao lado com o valor retornado, se o método
 84 | retornar algum valor.
 85 | 
 86 | Qual a cor atual do carro?
 87 | */
 88 | ?
 89 | 
 90 | // Mude a cor do carro para vermelho.
 91 | ?
 92 | 
 93 | // E agora, qual a cor do carro?
 94 | ?
 95 | 
 96 | // Mude a cor do carro para verde musgo.
 97 | ?
 98 | 
 99 | // E agora, qual a cor do carro?
100 | ?
101 | 
102 | // Qual a marca e modelo do carro?
103 | ?
104 | 
105 | // Adicione 2 pessoas no carro.
106 | ?
107 | 
108 | // Adicione mais 4 pessoas no carro.
109 | ?
110 | 
111 | // Faça o carro encher.
112 | ?
113 | 
114 | // Tire 4 pessoas do carro.
115 | ?
116 | 
117 | // Adicione 10 pessoas no carro.
118 | ?
119 | 
120 | // Quantas pessoas temos no carro?
121 | ?
122 | ```
123 | 


--------------------------------------------------------------------------------
/challenge-05/challenge-05.js:
--------------------------------------------------------------------------------
 1 | /*
 2 | Crie uma variável qualquer, que receba um array com alguns valores aleatórios
 3 | - ao menos 5 - (fica por sua conta os valores do array).
 4 | */
 5 | // ?
 6 | 
 7 | /*
 8 | Crie uma função que receba um array como parâmetro, e retorne esse array.
 9 | */
10 | // ?
11 | 
12 | /*
13 | Imprima o segundo índice do array retornado pela função criada acima.
14 | */
15 | // ?
16 | 
17 | /*
18 | Crie uma função que receba dois parâmetros: o primeiro, um array de valores; e o
19 | segundo, um número. A função deve retornar o valor de um índice do array que foi passado
20 | no primeiro parâmetro. O índice usado para retornar o valor, deve ser o número passado no
21 | segundo parâmetro.
22 | */
23 | // ?
24 | 
25 | /*
26 | Declare uma variável que recebe um array com 5 valores, de tipos diferentes.
27 | */
28 | // ?
29 | 
30 | /*
31 | Invoque a função criada acima, fazendo-a retornar todos os valores do último
32 | array criado.
33 | */
34 | // ?
35 | 
36 | /*
37 | Crie uma função chamada `book`, que recebe um parâmetro, que será o nome do
38 | livro. Dentro dessa função, declare uma variável que recebe um objeto com as
39 | seguintes características:
40 | - esse objeto irá receber 3 propriedades, que serão nomes de livros;
41 | - cada uma dessas propriedades será um novo objeto, que terá outras 3
42 | propriedades:
43 |     - `quantidadePaginas` - Number (quantidade de páginas)
44 |     - `autor` - String
45 |     - `editora` - String
46 | - A função deve retornar o objeto referente ao livro passado por parâmetro.
47 | - Se o parâmetro não for passado, a função deve retornar o objeto com todos
48 | os livros.
49 | */
50 | // ?
51 | 
52 | /*
53 | Usando a função criada acima, imprima o objeto com todos os livros.
54 | */
55 | // ?
56 | 
57 | /*
58 | Ainda com a função acima, imprima a quantidade de páginas de um livro qualquer,
59 | usando a frase:
60 | "O livro [NOME_DO_LIVRO] tem [X] páginas!"
61 | */
62 | // ?
63 | 
64 | /*
65 | Ainda com a função acima, imprima o nome do autor de um livro qualquer, usando
66 | a frase:
67 | "O autor do livro [NOME_DO_LIVRO] é [AUTOR]."
68 | */
69 | // ?
70 | 
71 | /*
72 | Ainda com a função acima, imprima o nome da editora de um livro qualquer, usando
73 | a frase:
74 | "O livro [NOME_DO_LIVRO] foi publicado pela editora [NOME_DA_EDITORA]."
75 | */
76 | // ?
77 | 


--------------------------------------------------------------------------------
/challenge-06/challenge-06.js:
--------------------------------------------------------------------------------
 1 | /*
 2 | Vamos falar um pouco sobre "Futebol". Escolha um campeonato estadual qualquer
 3 | para começar o desafio.
 4 | Declare uma variável chamada `championship` que receberá o nome do campeonato,
 5 | e imprima o nome desse campeonato no console.
 6 | */
 7 | // ?
 8 | 
 9 | /*
10 | Declare uma variável chamada `teams`, que receberá um array com 5 elementos.
11 | Os elementos serão nomes de times do campeonato escolhido, e os nomes devem
12 | estar na ordem em que eles aparecem na tabela no momento da solução desse
13 | desafio.
14 | */
15 | // ?
16 | 
17 | console.log( 'Times que estão participando do campeonato:', teams );
18 | 
19 | /*
20 | Crie uma função chamada `showTeamPosition` com as seguintes características:
21 |     - A função deve receber um número por parâmetro;
22 |     - A função deve retornar a frase:
23 |     "O time que está em [POSIÇÃO]º lugar é o [NOME DO TIME].";
24 |     - Onde [POSIÇÃO] é o valor passado por parâmetro e [NOME DO TIME] é o time
25 |     que está nessa posição no array criado acima com os nomes dos times.
26 |     --------------
27 |     Dica: lembre-se que arrays começam no índice zero, então a posição passada
28 |     deve ser sempre um número a mais que o índice do array ;)
29 |     --------------
30 |     - A função só deve retornar a frase acima somente se o time estiver entre
31 |     os 5 primeiros.
32 |     - Se não houver time para a posição passada, deve retornar a mensagem:
33 |     "Não temos a informação do time que está nessa posição."
34 | */
35 | // ?
36 | 
37 | /*
38 | Escolha 4 times do campeonato selecionado e mostre a posição dele, usando a
39 | função acima. Entre esses 4, adicione 1 que não esteja entre os 5 primeiros.
40 | */
41 | // ?
42 | 
43 | /*
44 | Mostre os números de 20 a 30 no console (inclusive o 30), usando a estrutura de
45 | repetição "while".
46 | */
47 | // ?
48 | 
49 | /*
50 | Crie uma função chamada `convertToHex`, com as seguintes características:
51 |     - A função recebe uma cor por parâmetro, do tipo string. Exemplo: "red";
52 |     - Escolha 5 cores que serão convertidas do nome da cor para o seu
53 |     equivalente hexadecimal (pode ser qualquer tom);
54 |     - Usando a estrutura switch, verifique se a cor passada por parâmetro é
55 |     algum hexa escolhido. Se for, retorne a frase:
56 |     "O hexadecimal para a cor [COR] é [HEXADECIMAL].";
57 |     - Se a cor passada por parâmetro não estiver entre as selecionadas, mostre
58 |     a frase:
59 |     "Não temos o equivalente hexadecimal para [COR]."
60 | */
61 | // ?
62 | 
63 | /*
64 | Tente mostrar o hexadecimal de 8 cores diferentes usando a função criada acima.
65 | */
66 | // ?


--------------------------------------------------------------------------------
/challenge-07/challenge-07.js:
--------------------------------------------------------------------------------
 1 | /*
 2 | Crie um array com 5 items (tipos variados).
 3 | */
 4 | // ?
 5 | 
 6 | /*
 7 | Crie uma função chamada `addItem`, que irá adicionar itens no array criado.
 8 | A função deverá retornar o array atualizado.
 9 | */
10 | // ?
11 | 
12 | /*
13 | Adicione um novo array ao array criado no início do desafio, com ao menos 3
14 | itens de tipos diferentes, mostrando o resultado no console.
15 | */
16 | // ?
17 | 
18 | /*
19 | Mostre no console o segundo elemento desse último array, criado acima, com a
20 | frase:
21 | "O segundo elemento do segundo array é [ELEMENTO]."
22 | */
23 | // ?
24 | 
25 | /*
26 | Mostre no console quantos itens tem o primeiro array criado, com a frase:
27 | "O primeiro array tem [QUANTIDADE DE ITENS] itens."
28 | */
29 | // ?
30 | 
31 | /*
32 | Agora mostre no console quantos itens tem o segundo array criado, com a frase:
33 | "O segundo array tem [QUANTIDADE DE ITENS] itens."
34 | */
35 | // ?
36 | 
37 | /*
38 | Utilizando a estrutura de repetição `while`, mostre no console todos os números
39 | pares entre 10 e 20, inclusive esses 2.
40 | */
41 | console.log( 'Números pares entre 10 e 20:' );
42 | // ?
43 | 
44 | /*
45 | Na mesma ideia do exercício acima: mostre agora os números ímpares.
46 | */
47 | console.log( 'Números ímpares entre 10 e 20:' );
48 | // ?
49 | 
50 | /*
51 | Repita os mesmos exercícios feitos acima, mas agora usando o loop "for".
52 | Só vamos mudar o range:
53 | - No primeiro "for", mostre os números pares entre 100 e 120, inclusive eles;
54 | - No segundo "for", mostre os números ímpares entre 111 e 125, inclusive eles.
55 | */
56 | console.log( 'Números pares entre 100 e 120:' );
57 | // ?
58 | 
59 | console.log( 'Números ímpares entre 111 e 125:' );
60 | // ?


--------------------------------------------------------------------------------
/challenge-08/challenge-08.js:
--------------------------------------------------------------------------------
 1 | /*
 2 | Declare uma variável chamada `sum` e atribua a ela uma função chamada
 3 | `calculateSum`. A função deve receber dois parâmetros e retornar a soma
 4 | desses parâmetros.
 5 | */
 6 | // ?
 7 | 
 8 | /*
 9 | Invoque a função criada acima, passando dois números que serão somados, e mostre
10 | o resultado no console, com a frase:
11 | "A soma de [VALOR 1] e [VALOR2] é igual a [RESULTADO]."
12 | */
13 | // ?
14 | 
15 | /*
16 | Mostre no console o nome da função criada acima, com a frase:
17 | "O nome da função que faz a soma é [NOME DA FUNÇÃO]."
18 | */
19 | // ?
20 | 
21 | /*
22 | Crie uma função literal chamada `showName`. Essa função deve retornar o
23 | seu nome.
24 | */
25 | // ?
26 | 
27 | /*
28 | Declare uma variável chamada `varShowName` que recebe a função criada acima.
29 | */
30 | // ?
31 | 
32 | /*
33 | Usando a variável criada acima, mostre no console o nome e o retorno da função
34 | atribuída a ela, com a seguinte frase:
35 | "A função [NOME DA FUNÇÃO] retorna [RETORNO DA FUNÇÃO]."
36 | */
37 | // ?
38 | 
39 | /*
40 | Crie uma função literal chamada `calculator`, que funcione assim:
41 | - A função deve receber um parâmetro que dirá qual operação matemática ela
42 | vai efetuar. Será uma string com os valores `+`, `-`, `*`, `/` ou `%`;
43 | - Essa função deve retornar uma segunda função que fará o seguinte:
44 |   - Essa segunda função deve receber dois parâmetros;
45 |   - Esses dois parâmetros serão os operandos usados na operação matemática;
46 |   - O retorno dessa segunda função é a operação matemática completa, com a frase:
47 |   "Resultado da operação: [NUMERO1] [OPERADOR] [NUMERO2] = [RESULTADO]."
48 |   - Se o operador não for válido, retornar a frase:
49 |   "Operação inválida."
50 | */
51 | // ?
52 | 
53 | /*
54 | Declare uma variável chamada `sum`, que receberá a função acima, passando como
55 | parâmetro o operador de soma.
56 | */
57 | // ?
58 | 
59 | /*
60 | Agora `sum` é uma função. Mostre no console a soma de dois números, usando ela.
61 | */
62 | // ?
63 | 
64 | /*
65 | Agora, declare algumas variáveis com os nomes `subtraction`, `multiplication`,
66 | `division` e `mod`, e atribua a elas a função `calculator`, passando o operador
67 | correto por parâmetro para cada uma delas.
68 | */
69 | // ?
70 | 
71 | /*
72 | Faça uma operação com cada uma das funções criadas acima, mostrando o resultado
73 | no console.
74 | */
75 | // ?


--------------------------------------------------------------------------------
/challenge-09/challenge-09.js:
--------------------------------------------------------------------------------
  1 | /*
  2 | Crie uma IIFE que envolva todo o código desse arquivo. Faça também a
  3 | indentação correta do código, para ficar dentro da IIFE.
  4 | */
  5 | 
  6 | /*
  7 | Analise as funções abaixo (`myFunction`, `myFunction2` e `myFunction3`, e
  8 | ajuste o posicionamento das variáveis e funções internas, para que os códigos
  9 | dentro de `console.log` que estão retornando `undefined` retornem o valor
 10 | correto da variável ou função chamada.
 11 | */
 12 | function myFunction() {
 13 |     console.log( 'Na função `myFunction`, o primeiro número é', number1 );
 14 |     console.log( 'Na função `myFunction`, o segundo número é', number2 );
 15 |     var number1 = 10;
 16 |     return number1 + number2;
 17 |     var number2 = 20;
 18 | }
 19 | myFunction();
 20 | 
 21 | /*
 22 |     myFunction2();
 23 | */
 24 | function myFunction2() {
 25 |     console.log( 'A soma de 10 e 20 é igual a', sum ? sum() : undefined );
 26 |     var sum = function sum() {
 27 |         return number1 + number2;
 28 |     };
 29 |     var number1 = 10;
 30 |     var number2 = 20;
 31 |     return sum();
 32 | }
 33 | myFunction2();
 34 | 
 35 | /*
 36 |     myFunction3();
 37 | */
 38 | function myFunction3() {
 39 |     console.log( 'A soma de 40 e 50 é igual a', sum() );
 40 |     var number2 = 50;
 41 |     console.log( 'Na função myFunction3, number1 é igual a', number1 );
 42 |     var number1 = 40;
 43 |     return sum();
 44 |     function sum() {
 45 |         return number1 + number2;
 46 |     };
 47 | }
 48 | myFunction3();
 49 | 
 50 | /*
 51 | No desafio anterior criamos uma calculadora, usando uma estrutura funcional.
 52 | Agora vamos criar uma outra calculadora, usando uma outra abordagem :D
 53 | - Crie uma função `calculator` que recebe dois valores (números)
 54 | por parâmetro.
 55 | - Essa função deve retornar uma outra função, que recebe um parâmetro
 56 | chamado `callback`.
 57 | - Esse `callback` será uma função, que passaremos por parâmetro ao invocar
 58 | o retorno de `calculator`.
 59 | - O retorno dessa segunda função deve ser a função de `callback` passada
 60 | por parâmetro, INVOCADA, e passando a ela por parâmetro os dois valores
 61 | que foram passadas para a primeira função `calculator`.
 62 | */
 63 | // ?
 64 | 
 65 | /*
 66 | Declare uma variável chamada `sum`, e atribua a ela a função `calculator`,
 67 | passando dois números por parâmetro.
 68 | */
 69 | // ?
 70 | 
 71 | /*
 72 | Sabemos que `sum` agora tem uma função atribuída a ela, que é o retorno de
 73 | `calculator`. E essa função espera um parâmetro `callback`. O `callback`
 74 | tem dois parãmetros disponíveis, que são os números que você acabou de passar
 75 | para a chamada à `calculator` acima.
 76 | - Mostre no console o retorno da invocação de `sum`, passando por parâmetro
 77 | uma função anônima que irá retornar a soma dos dois números que essa função
 78 | anônima tem como seus argumentos.
 79 | */
 80 | console.log( 'O resultado da soma é:' );
 81 | // ?
 82 | 
 83 | /*
 84 | Agora declare outra variáveis chamadas `subtraction`, `multiplication`,
 85 | `division` e `mod`, e atribua à elas `calculator`, passando números
 86 | diferentes para cada chamada.
 87 | */
 88 | // ?
 89 | 
 90 | /*
 91 | Mostre as variáveis acima no `console` (uma chamada de console por variável),
 92 | criando a função de `callback` que faz o cálculo para subração, multiplicação,
 93 | divisão e módulo (resto de divisão), conforme a função utilizada.
 94 | As suas respostas devem estar abaixo dos `console.log` referentes à cada
 95 | chamada.
 96 | */
 97 | console.log( 'O resultado da subtração é:' );
 98 | // ?
 99 | 
100 | console.log( 'O resultado da multiplicação é:' );
101 | // ?
102 | 
103 | console.log( 'O resultado da divisão é:' );
104 | // ?
105 | 
106 | console.log( 'O resto da divisão é:' );
107 | // ?


--------------------------------------------------------------------------------
/challenge-10/challenge-10.js:
--------------------------------------------------------------------------------
  1 | /*
  2 | Crie uma IIFE que envolva todo esse arquivo (inclusive esse comentário),
  3 | e faça a indentação correta.
  4 | */
  5 | 
  6 | /*
  7 | Sem alterar os códigos nos `console.log` abaixo, faça com que o retorno
  8 | deles seja "true", usando os Wrapper Objects como "conversores" nos valores
  9 | das variáveis. Analise o que está sendo impresso no console para saber como
 10 | resolver o problema corretamente.
 11 | */
 12 | var five = '5';
 13 | console.log( five + ' é número?', typeof five === 'number' );
 14 | 
 15 | var concat = 10 + 10;
 16 | console.log( '"' + concat + '" é uma string? E é igual a "1010"?', typeof concat === 'string' );
 17 | 
 18 | /*
 19 | Voltando ao exemplo da calculadora, vamos utilizar mais uma abordagem
 20 | funcional, mas dessa vez, separando algumas responsabilidades.
 21 | - Primeiro, crie um objeto chamado `operation` que terá as propriedades:
 22 | '+', '-', '*', '/' e '%'.
 23 | - Cada propriedade vai receber uma função (logo, elas serão métodos), e essa
 24 | função receberá dois parâmetros e retornará a operação referente à sua
 25 | propriedade, usando os valores passados por parâmetro.
 26 | */
 27 | // ?
 28 | 
 29 | /*
 30 | Crie uma função chamada `isOperatorValid`, que receberá um operador por
 31 | parâmetro.
 32 | - Essa função será responsável por verificar se o operador passado por
 33 | parâmetro a ela é válido, ou seja, se ele é igual a '+', '-', '*', '/' ou
 34 | '%'.
 35 | - Se for igual a qualquer um desses, ela deverá retornar "true".
 36 | Caso contrário, "false".
 37 | - O desafio é fazer o retorno sem usar "if" ou "switch".
 38 | */
 39 | // ?
 40 | 
 41 | /*
 42 | Agora vamos criar a calculadora.
 43 | - Crie uma função chamada `calculator`, que receberá como parâmetro um
 44 | operador;
 45 | - Se o operador não for válido, a função deve retornar "false";
 46 | - Se o operador for válido, retornar uma segunda função que receberá dois
 47 | parâmetros;
 48 | - Se algum dos parâmetros não for um número, retornar "false";
 49 | - Senão, retornar o método do objeto "operation" criado acima, baseado no
 50 | operador passado para a função "calculator", e passando para esse método
 51 | os dois parâmetros da função de retorno de "calculator".
 52 | */
 53 | // ?
 54 | 
 55 | /*
 56 | Crie uma função chamada "showOperationMessage" que recebe três parâmetros:
 57 | - o operador, o primeiro número e o segundo número. O retorno da função
 58 | deve ser a frase:
 59 | 'A operação [NUMBER1] [OPERATOR] [NUMBER2] =';
 60 | Essa função mostrará a mensagem da operação que criaremos mais abaixo.
 61 | */
 62 | // ?
 63 | 
 64 | /*
 65 | Crie uma função chamada "showErrorMessage" que recebe um parâmetro: o
 66 | operador da operação cálculo, quando a operação não for válida.
 67 | Essa função deverá retornar a frase:
 68 | 'Operação "[OPERATOR]" não permitida!'
 69 | */
 70 | // ?
 71 | 
 72 | /*
 73 | Nossa calculadora está pronta! Agora vamos testá-la:
 74 | PASSO 1:
 75 | - Declare 3 variáveis: "number1" e "number2", iniciando com valor zero, e
 76 | "operationSignal", sem valor por enquanto.
 77 | */
 78 | // ?
 79 | 
 80 | /*
 81 | PASSO 2:
 82 | Atribua à variável operationSignal o operador de soma, e declare uma
 83 | variável chamada "sum", que receba a função "calculator", passando por
 84 | parâmetro a variável que recebeu o sinal da operação.
 85 | */
 86 | // ?
 87 | 
 88 | /*
 89 | PASSO 3:
 90 | "sum" agora é uma função, e, se o sinal correto não foi passado para a
 91 | função "calculator", "sum" será false. Certifique-se de que "sum" não é
 92 | "false", e então atribua às variáveis "number1" e "number2", dois números
 93 | que serão os operandos da operação de soma.
 94 | Após isso, mostre no console o resultado da operação, passando dois
 95 | parâmetros para o método "log" de "console":
 96 | - O primeiro será a mensagem da operação (usando a função criada acima);
 97 | - O segundo, a função de soma, passando os dois operandos.
 98 | - Se "sum" for "false", mostrar no console a mensagem de erro.
 99 | */
100 | // ?
101 | 
102 | /*
103 | Repita desde o "PASSO 2" com as operações de subtração, multiplicação,
104 | divisão e resto. Crie variáveis com os nomes "subtraction",
105 | "multiplication", "division" e "mod".
106 | */
107 | // ?
108 | 
109 | /*
110 | Repita o PASSO 2 novamente, mas passando um operador inválido, para ver se
111 | a mensagem de erro será mostrada no console.
112 | */
113 | // ?


--------------------------------------------------------------------------------
/challenge-11/challenge-11.js:
--------------------------------------------------------------------------------
 1 | // Envolva todo o código desse arquivo em uma IIFE (incluindo esse comentário).
 2 | 
 3 | /*
 4 | Crie uma variável chamada `once`, que recebe `false` como seu valor.
 5 | Crie um loop que execute enquanto essa variável for verdadeira. Dentro do
 6 | loop, mostre no console a mensagem:
 7 | 'Entrou ao menos uma vez!'
 8 | Qual loop você deve usar para que essa mensagem seja mostrada no console?
 9 | */
10 | // ?
11 | 
12 | /*
13 | Crie um objeto chamado `person`, que receba as seguintes propriedades:
14 | - 'name', 'age', 'weight' e 'birthday'. Preencha com os valores corretos
15 | para o nome, idade, peso e data de nascimento dessa pessoa.
16 | */
17 | // ?
18 | 
19 | /*
20 | Use um loop para percorrer o objeto criado acima, mostrando no console
21 | a frase:
22 | 'The [PROPERTY] of person is [VALUE]'
23 | Aproveite e crie uma variável `counter` que vai contar quantas propriedades
24 | esse objeto tem.
25 | Após o loop, mostre a frase:
26 | 'The person has [COUNTER] properties'
27 | */
28 | // ?
29 | 
30 | /*
31 | Crie uma função chamada `moreThan`, que vai verificar se a pessoa (objeto
32 | criado acima) é mais velha que a idade passada por parâmetro.
33 | Se verdadeiro, retornar `true`. Senão, retornar false.
34 | Após a função, mostrar a mensagem no console:
35 | 'The person has more than 25 years old? [TRUE/FALSE]'
36 | */
37 | // ?
38 | 
39 | /*
40 | Faça um loop de 0 a 20, que adicione cada número como um item de um
41 | array chamado `numbers`. Se o contador for maior que 10, saia do loop.
42 | Mostre no console os números no array.
43 | */
44 | console.log( 'De 0 a 10:' );
45 | // ?
46 | 
47 | /*
48 | Faça outro loop de 0 a 20, que adicione a um array chamado `numbers` (já
49 | criado acima, só precisa ser reiniciado) números de 0 a 20, inclusive
50 | esses. Se o número for ímpar, pular para o próximo número.
51 | Mostrar no console os números do array.
52 | */
53 | console.log( 'Pares de 0 a 20:' );
54 | // ?
55 | 


--------------------------------------------------------------------------------
/challenge-12/challenge-12.js:
--------------------------------------------------------------------------------
  1 | /*
  2 | Envolva todo o conteúdo desse arquivo em uma IIFE.
  3 | */
  4 | 
  5 | /*
  6 | Crie um objeto chamado `person`, com as propriedades:
  7 |     `name`: String
  8 |     `lastname`: String
  9 |     `age`: Number
 10 | Preencha cada propriedade com os seus dados pessoais, respeitando o tipo
 11 | de valor para cada propriedade.
 12 | */
 13 | // ?
 14 | console.log( 'Propriedades de "person":' );
 15 | 
 16 | /*
 17 | Mostre no console, em um array, todas as propriedades do objeto acima.
 18 | Não use nenhuma estrutura de repetição, nem crie o array manualmente.
 19 | */
 20 | // ?
 21 | 
 22 | /*
 23 | Crie um array vazio chamado `books`.
 24 | */
 25 | // ?
 26 | 
 27 | /*
 28 | Adicione nesse array 3 objetos, que serão 3 livros. Cada livro deve ter a
 29 | seguintes propriedades:
 30 | `name`: String
 31 | `pages`: Number
 32 | */
 33 | // ?
 34 | console.log( '\nLista de livros:' );
 35 | 
 36 | /*
 37 | Mostre no console todos os livros.
 38 | */
 39 | // ?
 40 | 
 41 | console.log( '\nLivro que está sendo removido:' );
 42 | /*
 43 | Remova o último livro, e mostre-o no console.
 44 | */
 45 | // ?
 46 | 
 47 | console.log( '\nAgora sobraram somente os livros:' );
 48 | /*
 49 | Mostre no console os livros restantes.
 50 | */
 51 | // ?
 52 | 
 53 | /*
 54 | Converta os objetos que ficaram em `books` para strings.
 55 | */
 56 | // ?
 57 | console.log( '\nLivros em formato string:' );
 58 | 
 59 | /*
 60 | Mostre os livros nesse formato no console:
 61 | */
 62 | // ?
 63 | 
 64 | /*
 65 | Converta os livros novamente para objeto.
 66 | */
 67 | // ?
 68 | console.log( '\nAgora os livros são objetos novamente:' );
 69 | 
 70 | /*
 71 | Mostre no console todas as propriedades e valores de todos os livros,
 72 | no formato abaixo:
 73 |     "[PROPRIEDADE]: [VALOR]"
 74 | */
 75 | // ?
 76 | 
 77 | /*
 78 | Crie um array chamado `myName`. Cada item desse array deve ser uma letra do
 79 | seu nome. Adicione seu nome completo no array.
 80 | */
 81 | // ?
 82 | console.log( '\nMeu nome é:' );
 83 | 
 84 | /*
 85 | Juntando todos os itens do array, mostre no console seu nome.
 86 | */
 87 | // ?
 88 | 
 89 | console.log( '\nMeu nome invertido é:' );
 90 | 
 91 | /*
 92 | Ainda usando o objeto acima, mostre no console seu nome invertido.
 93 | */
 94 | // ?
 95 | 
 96 | console.log( '\nAgora em ordem alfabética:' );
 97 | /*
 98 | Mostre todos os itens do array acima, odenados alfabéticamente.
 99 | */
100 | // ?
101 | 


--------------------------------------------------------------------------------
/challenge-13/challenge-13.js:
--------------------------------------------------------------------------------
  1 | /*
  2 | Envolva todo o código desse desafio em uma IIFE.
  3 | */
  4 | 
  5 | /*
  6 | Crie um array e mostre no console a representação em String desse array,
  7 | usando o método visto na aula 13.
  8 | */
  9 | console.log( 'O array em formato de string é:' );
 10 | // ?
 11 | 
 12 | /*
 13 | Crie 2 arrays `sul` e `sudeste`, que serão as regiões do Brasil.
 14 | Cada array deve conter os estados dessa região.
 15 | */
 16 | // ?
 17 | 
 18 | /*
 19 | Crie uma variável chamada `brasil`, que irá receber as duas regiões
 20 | concatenadas. Mostre o `brasil` no console.
 21 | */
 22 | console.log( '\nAlguns Estados do Brasil:' );
 23 | // ?
 24 | 
 25 | /*
 26 | Adicione 3 novos estados da região Norte no início do array e mostre no console.
 27 | */
 28 | console.log( '\nMais estados adicionados:' );
 29 | // ?
 30 | 
 31 | /*
 32 | Remova o primeiro estado do array `brasil` e mostre-o no console.
 33 | */
 34 | console.log( '\nEstado removido:' );
 35 | // ?
 36 | 
 37 | /*
 38 | Crie um novo array chamado `newSul`, que receba somente os estados do sul,
 39 | pegando do array `brasil`. Não remova esses itens de `brasil`.
 40 | */
 41 | // ?
 42 | 
 43 | /*
 44 | Mostre no console os estados que estão em `newSul`.
 45 | */
 46 | console.log( '\nEstados do Sul do Brasil:' );
 47 | // ?
 48 | 
 49 | /*
 50 | Mostre no console todos os estados que estão em `brasil`.
 51 | */
 52 | console.log( '\nAlguns Estados do Brasil:' );
 53 | // ?
 54 | 
 55 | /*
 56 | Crie um novo array chamado `nordeste`, que tenha os estados do nordeste.
 57 | */
 58 | // ?
 59 | 
 60 | /*
 61 | Mostre no console os estados do nordeste.
 62 | */
 63 | console.log( '\nEstados do Nordeste:' );
 64 | // ?
 65 | 
 66 | /*
 67 | Remova de `brasil` os estados do `sudeste`, colocando-os em uma variável
 68 | chamada `newSudeste`.
 69 | */
 70 | // ?
 71 | 
 72 | /*
 73 | Adicione os estados do `nordeste` ao array `brasil`. Esses estados devem
 74 | ficar no mesmo nível que os estados já existentes, não em um array separado.
 75 | */
 76 | // ?
 77 | 
 78 | /*
 79 | Mostre no console os estados em `newSudeste`.
 80 | */
 81 | console.log( '\nEstados em newSudeste:' );
 82 | // ?
 83 | 
 84 | /*
 85 | Mostre no console os estados do `brasil`.
 86 | */
 87 | console.log( '\nAlguns estados do Brasil:' );
 88 | // ?
 89 | 
 90 | /*
 91 | usando forEach, percorra o array `brasil` e gere um novo array chamado
 92 | `newBrasil`. Esse array deve ter cada item como um objeto, com as
 93 | propriedades:
 94 | - `id`: que será o índice do array `brasil`,
 95 | - `estado`: que será o estado do array `brasil`.
 96 | */
 97 | // ?
 98 | 
 99 | /*
100 | Mostre o array `newBrasil` no console
101 | */
102 | console.log( '\nnewBrasil:' );
103 | // ?
104 | 
105 | /*
106 | Percorra o array `brasil` e verifique se os estados tem mais de 7 letras cada,
107 | atribuindo o resultado à uma variável. Se tiver, mostre no console a frase:
108 | - "Sim, todos os estados tem mais de 7 letras!"
109 | Senão, mostre no console:
110 | - "Nem todos os estados tem mais de 7 letras!"
111 | */
112 | console.log( '\nTodos os estados de `brasil` tem mais de 7 letras?' );
113 | // ?
114 | 
115 | /*
116 | Percorra o array `brasil` e verifique se o Ceará está incluído, atribuindo o
117 | resultado à uma variável. Se esse estado existir no array, mostrar a frase no
118 | console:
119 | - "Ceará está incluído!"
120 | Senão, mostrar a frase:
121 | - "Ceará não foi incluído :("
122 | */
123 | console.log( '\nCeará está incluído em `brasil`?' );
124 | // ?
125 | 
126 | /*
127 | Percorra o array `newBrasil` e crie um novo array que some 1 no ID de cada
128 | objeto desse array, e adicione a frase abaixo na propriedade `estado`:
129 | - "[ESTADO] pertence ao Brasil."
130 | Atribua o novo array a uma variável chamada `map`.
131 | */
132 | // ?
133 | 
134 | /*
135 | Mostre no console o array criado acima:
136 | */
137 | console.log( '\nnewBrasil agora com mais informações:' );
138 | // ?
139 | 
140 | /*
141 | Filtre o array criado acima, retornando somente os estados que tiverem
142 | ID par. Atribua o valor à uma variável chamada `filter`.
143 | */
144 | // ?
145 | 
146 | /*
147 | Mostre o array filtrado acima no console.
148 | */
149 | console.log( '\nEstados com ID par:' );
150 | // ?


--------------------------------------------------------------------------------
/challenge-14/challenge-14.js:
--------------------------------------------------------------------------------
 1 | /*
 2 | Envolva todo o código desse desafio em uma IIFE.
 3 | */
 4 | 
 5 | /*
 6 | Crie um array chamado numberObjects. Esse array deve ter 10 elementos. Cada
 7 | elemento será um objeto no formato:
 8 | { number: [NUMBER] }
 9 | Os números devem ser de 1 a 10.
10 | Mostre esse array no console.
11 | */
12 | console.log( 'Number Objects Array:' );
13 | // ?
14 | 
15 | /*
16 | Crie um array chamado `justNumbers`, que terá como elementos somente os
17 | números do array criado acima. Mostre esse novo array no console.
18 | */
19 | console.log( '\nJust Numbers:' );
20 | // ?
21 | 
22 | /*
23 | Crie um novo array chamado `justMod2Or3`, que receberá do array criado acima
24 | somente os números que forem divisíveis por 2 ou 3. Mostre esse novo array
25 | no console.
26 | */
27 | console.log( '\nJust module of division by 2 or 3:' );
28 | // ?
29 | 
30 | /*
31 | Declare uma variável chamada operation que receba, do array criado acima,
32 | um valor reduzido pela seguinte operação:
33 | - Somar 1 ao último valor retornado;
34 | - Multiplicar o resultado pelo valor atual.
35 | O cálculo deve começar com zero.
36 | Mostre o resultado no console.
37 | */
38 | console.log( '\nOperation:' );
39 | // ?
40 | 
41 | /*
42 | Faça o mesmo cálculo passado acima, mas começando do último item para o
43 | primeiro. O nome da variável deve ser operation2. Mostre o resultado no
44 | console.
45 | */
46 | console.log( '\nOperation 2:' );
47 | // ?
48 | 
49 | /*
50 | Crie um array chamado `name`. Cada elemento desse array deve ser uma sílaba
51 | do seu nome. Vamos reduzir esse array, juntando todas as sílabas, mas usando
52 | a "língua do P".
53 | PS.: Lembra da língua do "P"? Não? A língua do "P" é uma brincadeira
54 | infantil, onde você coloca a letra "P" antes de cada sílaba de uma palavra
55 | falada, como se você estivesse falando em código xD
56 | */
57 | console.log( '\nSeu nome na língua do "P":' );
58 | // ?
59 | 
60 | /*
61 | Crie uma variável chamada `inversedName`, que reduzirá o array em uma string
62 | e atribuirá o seu nome invertido (usando o array criado acima).
63 | */
64 | console.log( '\nInversed Name:' );
65 | // ?
66 | 
67 | /*
68 | Mostre no console o array `numberObjects`.
69 | */
70 | console.log( '\nNumber objects' );
71 | // ?
72 | 
73 | /*
74 | Verifique se existem em algum índice de numberObjects um objeto ìgual a
75 | { number: 2 }. Se houver, mostre no console:
76 | - "Existe um objeto { number: 2 } em numberObjects!"
77 | Senão, mostre a frase:
78 | - "Não existe um objeto { number: 2 } em numberObjects :("
79 | Consegue prever o resultado? Deixe uma mensagem no console tentando explicar
80 | o que acontece ;)
81 | */
82 | console.log( '\nExiste um { number: 2 } em numberObjects?' );
83 | // ?
84 | 
85 | /*
86 | Fazendo o mesmo do exercício acima, mas começando a buscar do último índice,
87 | será que obtemos um resultado diferente? Faça a busca a partir do índice 2.
88 | */
89 | console.log( '\nE buscando a partir do último índice, o { number: 2 } existe?' );
90 | // ?
91 | 
92 | /*
93 | Verifique se `justMod2Or3` é um array. Se for, mostre-o no console, no
94 | formato de String.
95 | */
96 | console.log( '\njustMod2Or3 é um array? Se for, a representação dele em String é:' );
97 | // ?
98 | 


--------------------------------------------------------------------------------
/challenge-15/challenge-15.js:
--------------------------------------------------------------------------------
 1 | /*
 2 | Envolva todo o código desse desafio em uma IIFE.
 3 | Crie um arquivo chamado index.html e adicione esse script ao HTML.
 4 | */
 5 | 
 6 | /*
 7 | Crie uma função construtora chamada "Person". Esse construtor deve ter
 8 | as seguintes características:
 9 | - Deve receber 3 parâmetros: `name`, `lastName` e `age`;
10 | - Deverá ter 3 propriedades:
11 |   - `name` - que receberá o valor do parâmetro `name`;
12 |   - `lastName` - que receberá o valor do parâmetro `lastName`;
13 |   - `age` - que receberá o valor do parâmetro `age`;
14 | - Deverá ter 3 métodos:
15 |   - `getFullName` - que deve retornar o nome completo do objeto criado,
16 |   no formato:
17 |     - "[NAME] [LASTNAME]"
18 |   - `getAge` - que deverá retornar a idade (age);
19 |   - `addAge` - esse método não deverá ter nenhum parâmetro, mas ao invocá-lo
20 |   iremos passar um único argumento, que é a quantidade de anos que devem ser
21 |   adicionados à idade original (age). Esse método deverá retornar o objeto
22 |   que será instanciado.
23 | */
24 | // ?
25 | 
26 | /*
27 | Crie 3 novos objetos usando o construtor acima. Os objetos serão novas
28 | pessoas. As variáveis deverão ser o primeiro nome da pessoa. Passe os
29 | parâmetros corretamente para o construtor para criar as novas pessoas.
30 | Mostre as 3 novas pessoas criadas no console (Um console.log por pessoa).
31 | */
32 | console.log( 'Novas pessoas criadas à partir de Person:' );
33 | // ?
34 | 
35 | /*
36 | Mostre no console o nome completo de cada pessoa.
37 | */
38 | console.log( '\nNomes das pessoas:' );
39 | // ?
40 | 
41 | /*
42 | Mostre no console as idades de cada pessoa, com a frase:
43 | - "[NOME COMPLETO] tem [IDADE] anos."
44 | */
45 | console.log( '\nIdade das pessoas:' );
46 | // ?
47 | 
48 | /*
49 | Adicione alguns anos à cada pessoa, e mostre no console a nova idade de
50 | cada um. A frase deverá ser no formato:
51 | - "[NOME COMPLETO] agora tem [NOVA IDADE] anos."
52 | */
53 | console.log( '\nNova idade das pessoas:' );
54 | // ?


--------------------------------------------------------------------------------
/challenge-16/challenge-16.js:
--------------------------------------------------------------------------------
 1 | /*
 2 | 1. Envolva todo o conteúdo desse desafio em uma IIFE.
 3 | 2. Adicione a diretiva 'use strict';
 4 | 3. Crie um arquivo index.html e adicione esse script à ele.
 5 | */
 6 | 
 7 | /*
 8 | Declare uma variável chamada `name` que receba seu primeiro nome.
 9 | Mostre no console todas as letras do seu nome separadas, com a frase:
10 | - "[LETRA] é a [POSIÇÃO]ª letra do meu nome."
11 | Ex: no caso do nome ser "Fernando", deve mostrar as frases:
12 | - "F é a 1ª letra do meu nome."
13 | - "e é a 2ª letra do meu nome."
14 | E assim por diante, até a última.
15 | */
16 | console.log( 'As letras do seu nome:' );
17 | // ?
18 | 
19 | /*
20 | - Declare uma variável chamada `fullName`, que receba seu nome completo,
21 | escrito no formato de slug (caixa baixa e palavras separadas por um traço).
22 | Ex: o nome "Fernando Daciuk" ficaria "fernando-daciuk"
23 | - Faça a primeira letra de cada nome ficar em caixa alta, e troque o traço
24 | por um espaço.
25 | - Detalhe: o código que você escrever abaixo deve funcionar para qualquer
26 | nome, então fique à vontade para usar as artimanhas que já viu até agora no
27 | curso para fazer isso funcionar corretamente :)
28 | - Mostre no console o nome no formato slug, e o resultado final. Use um
29 | console.log para cada formato.
30 | */
31 | console.log( '\nNome convertido à partir de um slug:' );
32 | // ?
33 | 
34 | /*
35 | - Crie um array com 5 nomes. Reduza esses nomes a uma única string, separando
36 | cada nome por vírgula. Entre o penúltimo e o último nome, o separador deve
37 | ser um "e". No final, concatene com a frase: " são meus amigos.".
38 | O resultado final deve ficar mais ou menos assim:
39 | - "João, Maria, Roberto, Pedro e Marcos são meus amigos."
40 | - Detalhe: o código abaixo deve funcionar com um array de qualquer tamanho.
41 | 5 nomes foi somente uma sugestão ;)
42 | */
43 | console.log( '\nMeus amigos:' );
44 | // ?
45 | 
46 | /*
47 | Usando o replace(), faça a string "Roberto" virar "Roberta".
48 | Mostre o resultado no console.
49 | */
50 | console.log( '\nEra "Roberto", agora é:' );
51 | // ?
52 | 
53 | /*
54 | Mostre no console a parte "nando" da string "Fernando". Use o método que
55 | faz a busca do final para o início da string.
56 | */
57 | console.log( '\nParte de uma string:' );
58 | // ?
59 | 
60 | /*
61 | Declare uma variável chamada `myName`, que receba o seu primeiro nome,
62 | escrito de forma natural.
63 | Mostre no console esse nome, mas com as letras intercalando entre maiúsculas
64 | e minúsculas.
65 | - Detalhe: o código abaixo deve funcionar da mesma forma para qualquer nome,
66 | de qualquer tamanho, escrito de qualquer forma.
67 | Ex.: Nomes que deveriam funcionar: "Fernando", "RoBertO", "gabriEla", etc.
68 | */
69 | console.log( '\nNome com letras intercaladas entre caixa alta e baixa:' );
70 | // ?


--------------------------------------------------------------------------------
/challenge-17/challenge-17.js:
--------------------------------------------------------------------------------
 1 | /*
 2 | 1. Envolva todo o conteúdo desse desafio em uma IIFE.
 3 | 2. Adicione a diretiva 'use strict';
 4 | 3. Crie um arquivo index.html e adicione esse script à ele.
 5 | */
 6 | 
 7 | /*
 8 | Em todos os exercícios desse desafio, nós vamos utilizar expressões
 9 | regulares! Para isso, iremos usar o texto abaixo. Coloque-o em uma
10 | variável chamada `text`:
11 | "Manuel Marques de Sousa, Conde de Porto Alegre (Rio Grande, 13 de junho de 1804 – Rio de Janeiro, 18 de julho de 1875), apelidado de "O Centauro de Luvas", foi um militar, político, abolicionista e monarquista brasileiro."
12 | */
13 | // ?
14 | 
15 | /*
16 | Vamos começar com umas brincadeiras fáceis :D
17 | Troque o nome "Manuel Marques de Sousa" pelo seu nome, e mostre o resultado
18 | no console:
19 | */
20 | console.log( 'Adicionando seu nome no texto:' );
21 | // ?
22 | 
23 | /*
24 | Agora, substitua a palavra "brasileiro" por sua cidade natal e mostre no
25 | console.
26 | Ex: Se você for da São Paulo, substitua por "paulista".
27 | */
28 | console.log( '\nTrocando naturalidade:' );
29 | // ?
30 | 
31 | /*
32 | Substitua todos os números por um traço `-`. Cada caractere de número deve
33 | ser um traço. Mostre o resultado no console:
34 | */
35 | console.log( '\nTrocando números por -:' );
36 | // ?
37 | 
38 | /*
39 | Substitua todas as letras (somente letras) de "D" maiúsculo até "h"
40 | minúsculo por "0" (número zero). Mostre o resultado no console:
41 | */
42 | console.log( '\nTrocando de "D" a "h" por "0":' );
43 | // ?
44 | 
45 | /*
46 | Substitua todos os "A" (maiúsculos ou minúsculos) por "4".
47 | Mostre o resultado no console:
48 | */
49 | console.log( '\nTrocando "A" e "a" por "4":' );
50 | // ?
51 | 
52 | /*
53 | Substitua a frase "O Centauro de Luvas", deixando-a em caixa alta, usando
54 | o método `toUpperCase()`. Mostre o resultado no console:
55 | */
56 | console.log( '\n"O Centauro de Luvas" em caixa alta:' );
57 | // ?
58 | 
59 | /*
60 | Agora iremos substituir as datas no formato "13 de junho de 1804" para
61 | "13/06/1804". A primeira coisa a fazer é criar uma função chamada
62 | `getMonthNumber`, que irá receber um parâmetro (será o nome do mês) e deverá
63 | retornar o número correspondente a esse mês.
64 | Ex: Se o usuário entrar com "março", deve retornar "03" (em string mesmo).
65 | Números com menos de dois dígitos devem ter um zero na frente.
66 | Crie então a função e mostre no console os retornos para os meses de março,
67 | setembro e dezembro.
68 | Use um console.log para cada mês, usando a frase:
69 | "O mês de [NOME DO MÊS] é representado pelo número [NÚMERO DO MÊS]."
70 | */
71 | console.log( '\nMeses representados por números:' );
72 | // ?
73 | 
74 | /*
75 | Agora, declare uma variável chamada `regexDate` que irá receber a expressão
76 | regular que irá fazer o match com as datas. Crie grupos de captura para o
77 | dia, o mês e o ano. Para os meses, você pode fazer o match somente com os
78 | meses que estão no texto, não precisa adicionar todos.
79 | Com o que vimos até agora, você consegue fazer :D
80 | Mostre a regex no console.
81 | */
82 | console.log( '\nRegex que vai fazer o match com as datas do texto:' );
83 | // ?
84 | 
85 | /*
86 | Agora crie a função que irá fazer o replace dos dados. A função será chamada
87 | de `replaceDate`. Ela deve retornar a data no formato:
88 | "[DIA]/[MÊS]/[ANO]"
89 | Após criar a função, faça o replace das datas no texto, mostrando no
90 | console o resultado.
91 | */
92 | console.log( '\nReplace de datas:' );
93 | // ?
94 | 


--------------------------------------------------------------------------------
/challenge-18/challenge-18.js:
--------------------------------------------------------------------------------
 1 | /*
 2 | 1. Envolva todo o conteúdo desse desafio em uma IIFE.
 3 | 2. Adicione a diretiva 'use strict';
 4 | 3. Crie um arquivo index.html e adicione esse script à ele.
 5 | */
 6 | 
 7 | /*
 8 | Crie uma função chamada `cleanCPF`, que receba um CPF por parâmetro, e
 9 | retorne esse CPF limpo (somente os números).
10 | Usando os CPFs abaixo, mostre no console que a limpeza funciona para todos
11 | eles! Use um console.log para cada CPF.
12 | - "049-214 3421-1"
13 | - "210.458.522-05"
14 | - "735 500 794 - 22"
15 | - "101.123-131x32"
16 | */
17 | console.log( 'Limpando CPFs:' );
18 | // ?
19 | 
20 | /*
21 | Usando os CPFs limpos acima, deixe-os com a formatação correta de CPF.
22 | Ex.: "999.999.999-99"
23 | Mostre o resultado no console.
24 | */
25 | console.log( '\nFormatando CPFs corretamente:' );
26 | // ?
27 | 
28 | /*
29 | Crie uma expressão regular que faça match com as palavras "junho" ou "julho",
30 | usando o mínimo de caracteres possíveis na regex.
31 | Para garantir que a regex funciona, teste-a usando o método match. Se houver
32 | o match, o método retorna um array com os matches. Caso contrário, ele
33 | retornará null.
34 | Mostre no console o resultado do match para a frase:
35 | "Os meses de janeiro, junho e julho começam com a letra j."
36 | O resultado deve ser:
37 | ["junho", "julho"]
38 | */
39 | console.log( '\nMatch com as palavras "junho" ou "julho" para a frase "Os meses de janeiro, junho e julho começam com a letra j.":' );
40 | // ?
41 | 
42 | /*
43 | Crie uma expressão regular que faça o match com a abertura de uma tag
44 | HTML qualquer.
45 | Ex.: "<div>", "<section>", "<blockquote>".
46 | Use o método match e faça o teste com a marcação abaixo:
47 | "<div><section><blockquote>Texto <img /></blockquote></section></div>"
48 | O resultado deve ser:
49 | ["<div>", "<section>", "<blockquote>"]
50 | */
51 | console.log( '\nMatch com a abertura de uma tag HTML:' );
52 | // ?
53 | 
54 | /*
55 | Crie uma expressão regular que faça o match com uma tag HTML vazia, casando
56 | com a abertura e fechamento da tag.
57 | Ex.: "<div></div>", "<section></section>", "<blockquote></blockquote>".
58 | Use o método match e faça o teste com a marcação abaixo:
59 | "<div><ul><li></li><li></li><li><span></span></li></ul></div>"
60 | O resultado deve ser:
61 | ["<li></li>", "<li></li>", "<span></span>"]
62 | */
63 | console.log( '\nMatch com tags HTML vazias (abertura e fechamento da tag):' );
64 | // ?
65 | 
66 | /*
67 | Vamos complicar um pouco agora :D
68 | 
69 | Crie uma expressão regular que faça o match com um texto existente dentro de
70 | uma tag HTML. O texto deve ser capturado e substituído por:
71 | 'O texto dentro da tag "[NOME DA TAG]" é "[TEXTO]"'
72 | 
73 | Use a marcação abaixo para fazer o replace:
74 | "<h1>Título da página</h1><p>Este é um parágrafo</p><footer>Rodapé</footer>"
75 | 
76 | A marcação deve permanecer como está, somente o texto deve ser substituído.
77 | No replace, utilize quebras de linha para deixar uma tag por linha.
78 | 
79 | O resultado deve ser esse:
80 | <h1>O texto dentro da tag "h1" é "Título da página"</h1>
81 | <p>O texto dentro da tag "p" é "Este é um parágrafo"</p>
82 | <footer>O texto dentro da tag "footer" é "Rodapé"</footer>
83 | 
84 | Uma dica: faça o match aos poucos. Para facilitar o teste, use o site
85 | https://regex101.com/#javascript e verifique se as capturas estão
86 | corretas, para depois aplicar no código ;)
87 | */
88 | console.log( '\nFazer replace dos textos das tags:' );
89 | // ?


--------------------------------------------------------------------------------
/challenge-19/challenge-19.js:
--------------------------------------------------------------------------------
 1 | /*
 2 | 1. Envolva todo o conteúdo desse desafio em uma IIFE.
 3 | 2. Adicione a diretiva 'use strict';
 4 | 3. Crie um arquivo index.html e adicione esse script à ele.
 5 | */
 6 | 
 7 | /*
 8 | Alguns detalhes importantes que faltou falar na aula:
 9 | 1. O objeto RegExp() pode receber um segundo parâmetro, que são as flags:
10 | - var justNumbersAndLetters = new RegExp( '[\\da-z]', 'gi' );
11 | 2. Como a expressão regular passada para o objeto RegExp() é uma string,
12 | ela pode ser concatenada para gerar uma regex em tempo de execução,
13 | diferente da regex literal, onde toda a regex precisa estar pronta antes
14 | da utilização.
15 | */
16 | 
17 | /*
18 | - Usando o construtor de Regex, crie uma regex que case somente com números
19 | no início da string. O match precisa ser feito para todas as
20 | correspondências de qualquer string, não somente para a primeira, ainda que
21 | esta tenha muitas linhas, deve sempre casar com números no início de cada
22 | linha, independente de quantos caracteres de número estiverem juntos.
23 | - Atribua essa regex à uma variável chamada `justNumbersRegex` e mostre-a
24 | no console:
25 | */
26 | console.log( 'Regex para números usando o construtor:' );
27 | // ?
28 | 
29 | /*
30 | Verifique se a regex acima casa com o texto na variável `text`, mostrando o
31 | resultado no console. O resultado deve ser:
32 | "[ '10', '50' ]"
33 | */
34 | var text = '10 anos.\n50 discos vendidos.\nE nem 10% dos meus amigos o conhece.';
35 | console.log( '\nNúmeros no início da linha do texto:\n' + text, '\n' );
36 | // ?
37 | 
38 | /*
39 | - Crie uma regex que case com números no final de uma string. Atribua a
40 | regex à uma variável chamada `numbersAtTheEnd`.
41 | - A regex deve casar com todas as correspondências de qualquer string, ainda
42 | que esta tenha muitas linhas, deve sempre casar com números no fim de cada
43 | linha, independente de quantos caracteres de número estiverem juntos.
44 | Mostre a regex no console:
45 | */
46 | console.log( '\nRegex para números somente no final das linhas:' );
47 | // ?
48 | 
49 | /*
50 | Verifique se a regex acima casa com o texto na variável `otherText`,
51 | mostrando o resultado no console.
52 | O resultado deve ser:
53 | "[ '12', '6' ]"
54 | */
55 | var otherText = 'Silvio Santos, nome artístico de Senor Abravanel (Rio de Janeiro, 12\n de dezembro de 1930), é um apresentador de televisão e empresário brasileiro.\n Proprietário do Grupo Silvio Santos, que inclui empresas como a Liderança\n Capitalização (administradora da loteria Tele Sena), a Jequiti Cosméticos e o\n Sistema Brasileiro de Televisão (mais conhecido como SBT), Silvio Santos possui\n um patrimônio avaliado em aproximadamente 6\n bilhões de reais.';
56 | console.log( '\nNúmeros no final da linha:\n\n', otherText, '\n' );
57 | // ?
58 | 
59 | /*
60 | Vamos criar um método que vai testar se uma classe CSS existe em uma
61 | marcação HTML.
62 | - Primeiro, crie uma função chamada `hasClass`;
63 | - Essa função receberá dois parâmetros: o primeiro chamado `markup`, que
64 | será a marcação HTML testada, e o segundo `cssClass`, que será a classe que
65 | iremos testar;
66 | - A função deve retornar `true` se a classe existir na marcação e `false`
67 | caso contrário;
68 | - A marcação usada para testar deve ser a que está na variável `markup`
69 | abaixo;
70 | - Não altere a marcação na variável markup!
71 | - Faça o teste, mostrando no console o resultado para as seguintes classes:
72 | - "container", "text", "date", "excerpt" e "main".
73 | - O console deve exibir a frase:
74 | "[RESULTADO] para a classe [CLASSE]"
75 | - Ex. de resposta:
76 | "true para a classe container"
77 | - Teste uma classe por vez (um console.log por classe).
78 | - Lembrando que a função deve funcionar para qualquer marcação HTML e para
79 | qualquer classe que for testada. Os dados passados no exercício são somente
80 | para exemplificar.
81 | */
82 | var markup = '<main>\n  <div class="container">\n    <span class="text date"></span>\n    <p class=\'excerpt\'></p>\n  </div>\n</main>';
83 | console.log( '\nQuais classes CSS existem na marcação abaixo?\n\n', markup, '\n' );
84 | // ?
85 | 


--------------------------------------------------------------------------------
/challenge-20/challenge-20.js:
--------------------------------------------------------------------------------
  1 | /*
  2 | 1. Envolva todo o conteúdo desse desafio em uma IIFE.
  3 | 2. Adicione a diretiva 'use strict';
  4 | 3. Passe por parâmetro para a IIFE os objetos window e document.
  5 | 4. Dessa vez não é necessário criar um HTML. Ele já existe, e vamos utilizar
  6 | a marcação criada nele para fazer nosso desafio ;)
  7 | 
  8 | O HTML NÃO PODE ser alterado!
  9 | */
 10 | 
 11 | /*
 12 | Ao carregar a página, pergunte ao usuário "Qual o seu nome?". Atribua o
 13 | resultado à uma variável chamada `username`. Se o usuário não digitar um
 14 | nome, `username` deve receber "Desconhecido".
 15 | Com a resposta, mostre um alert com a mensagem "Bem vindo [USERNAME]!"
 16 | */
 17 | // ?
 18 | 
 19 | /*
 20 | Agora, pergunte ao usuário "Qual o seu e-mail?", atribuindo o resultado à
 21 | uma variável chamada `email`.
 22 | */
 23 | // ?
 24 | 
 25 | /*
 26 | - Selecione o input de "Nome", atribuindo-o à uma variável chamada
 27 | `$inputUsername`.
 28 | */
 29 | // ?
 30 | 
 31 | /*
 32 | - Selecione o input de "Email", atribuindo-o à uma variável chamada
 33 | `$inputEmail`.
 34 | */
 35 | // ?
 36 | 
 37 | /*
 38 | - Selecione o campo de "Mensagem", atribuindo-o à uma variável chamada
 39 | `$message`.
 40 | */
 41 | // ?
 42 | 
 43 | /*
 44 | - Selecione o botão de envio do formulário, atribuindo-o à uma variável
 45 | chamada `$button`.
 46 | */
 47 | // ?
 48 | 
 49 | /*
 50 | Preencha os campos de "Nome" e "Email" que estão no documento com os valores
 51 | entrados pelo usuário.
 52 | */
 53 | // ?
 54 | 
 55 | /*
 56 | Adicione um listener de evento de click ao botão que faça o seguinte:
 57 | 1. Verificar se todos os campos estão preenchidos:
 58 | - Mostrar um alert para cada campo não preenchido, como abaixo:
 59 | - Se o campo de "Nome" não estiver preenchido, mostrar:
 60 |     - "Preencha o nome do usuário!"
 61 | - Se o campo de "Email" não estiver preenchido, mostrar:
 62 |     - "Preencha o e-mail!"
 63 | - Se o campo de "Mensagem" não estiver preenchido, mostrar:
 64 |     - "Preencha a mensagem!"
 65 | - Se o campo de "Email" for inválido, mostrar:
 66 |     - "Entre com um e-mail válido!"
 67 | 
 68 | 2. Para verificar se o e-mail é válido use a função `isValidEmail`, passando
 69 | o e-mail que foi entrado no campo de "Email" por parâmetro. (A função
 70 | `isValidEmail` será criada logo abaixo).
 71 | 
 72 | 3. Se tudo estiver OK, pergunte ao usuário:
 73 |     - "Tem certeza que deseja enviar o formulário?"
 74 | Se for confirmado, mostre um alerta com a mensagem:
 75 |     - "Enviado com sucesso!"
 76 | Caso contrário, mostre um alerta com a mensagem:
 77 |     - "Não enviado."
 78 | */
 79 | // ?
 80 | 
 81 | /*
 82 | Crie uma função chamada `isValidEmail`, que será usada na validação do
 83 | envio do formulário.
 84 | Essa função deve receber o e-mail por parâmetro e verificar se é um e-mail
 85 | válido.
 86 | As regras para validação são:
 87 |     - O nome do usuário (antes do arroba), pode ser qualquer caractere
 88 |     alfanumérico, incluindo o underscore, sinal de "+" e o ponto;
 89 |     - Após o arroba, o domínio pode conter somente caracteres alfanuméricos
 90 |     e o underscore;
 91 |     - Para a extensão, o domínio deve vir seguido de um ponto, e no mínimo
 92 |     2 caracteres alfanuméricos;
 93 |     - O final do domínio é opcional, mas se existir, deve começar com um
 94 |     ponto, seguido de no máximo 2 caracteres alfanuméricos.
 95 | 
 96 | Alguns e-mails válidos que podem ser usados para testar:
 97 |     - "meu.email+categoria@gmail.com"
 98 |     - "juca_malandro@bol.com.br"
 99 |     - "pedrobala@hotmail.uy"
100 |     - "sandro@culinaria.dahora"
101 | 
102 | Alguns e-mails inválidos:
103 |     - "walter-da-silva@maraca.br"
104 |     - "rita-marica@titica.a.b"
105 |     - "agua_@evida.br.com"
106 | */
107 | // ?


--------------------------------------------------------------------------------
/challenge-20/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | <head>
 4 |     <meta charset="utf-8" />
 5 |     <title>Challenge 20</title>
 6 |     <style>
 7 |         body { font-family: sans-serif }
 8 |         label { display: block }
 9 |         input { margin-bottom: 10px }
10 |     </style>
11 | </head>
12 | <body>
13 |     <form action="." method="get">
14 |         <div>
15 |             <label>Nome:</label>
16 |             <input type="text" />
17 |         </div>
18 | 
19 |         <div>
20 |             <label>E-mail:</label>
21 |             <input type="email" />
22 |         </div>
23 | 
24 |         <div>
25 |             <label>Mensagem</label>
26 |             <textarea cols="30" rows="10"></textarea>
27 |         </div>
28 | 
29 |         <div>
30 |             <button type="submit">Enviar</button>
31 |         </div>
32 |     </form>
33 | 
34 |     <script src="challenge-20.js"></script>
35 | </body>
36 | </html>


--------------------------------------------------------------------------------
/challenge-21/challenge-21.js:
--------------------------------------------------------------------------------
 1 | /*
 2 | O desafio de hoje será um pequeno projeto: um cronômetro!
 3 | As regras para criação do cronômetro são as seguintes:
 4 | 1. Crie um arquivo index.html e adicione esse script a ele;
 5 | 2. Crie um campo `input` do tipo `text`, e inicie-o com um valor 0 (zero).
 6 | Ele será o nosso cronômetro;
 7 | 3. Crie 3 botões para as ações do cronômetro: Start, Stop e Reset;
 8 | 4. Ao clicar em Start, o valor do campo deve ser incrementado de 1 em 1, a
 9 | cada segundo;
10 | 5. Ao clicar em Stop, o cronômetro deve parar de contar;
11 | 6. Ao clicar em Reset, o cronômetro deve zerar e parar de contar.
12 | 
13 | Utilize o atributo data-js para nomear o campo e os botões. Você pode
14 | usar o nome que achar melhor, desde que ele seja semântico, ou seja, o nome
15 | dado ao elemento HTML deve definir o que o elemento é ou o que ele faz.
16 | */
17 | // ?


--------------------------------------------------------------------------------
/challenge-22/challenge-22.js:
--------------------------------------------------------------------------------
 1 |   /*
 2 |   Crie dois objetos, que serão duas pessoas. Cada um deve ter as propriedades
 3 |   `name` e `lastName`, preenchidos com o nome e sobrenome da pessoa.
 4 |   */
 5 |   // ?
 6 | 
 7 |   /*
 8 |   Agora crie uma função chamada `getFullName` que retorne as propriedades
 9 |   `name` e `lastName` dos objetos acima, formando um nome completo.
10 |   A função não deve receber nenhum parâmetro, mas as propriedades `name` e
11 |   `lastName` devem ser dinâmicas.
12 |   A mesma função deve servir para as duas pessoas (ou qualquer outra que for
13 |   criada).
14 |   Depois disso, invoque essa função, mostrando no console o nome completo das
15 |   pessoas que foram criadas anteriormente, passando as pessoas acima como
16 |   contexto da função. Use um console.log por pessoa.
17 |   */
18 |   console.log( 'O nome das pessoas é:' );
19 |   // ?
20 | 
21 |   /*
22 |   Crie uma função chamada `sum`. Essa função pode receber uma lista de
23 |   parâmetros variável, e deverá retornar a soma de todos eles.
24 |   Não use estruturas de repetição para somar os argumentos.
25 |   Na primeira linha, dentro da função, deixe um console.log para mostrar todos
26 |   os parâmetros passados para essa função.
27 |   */
28 |   // ?
29 | 
30 |   /*
31 |   Mostre no console que a função acima funciona, invocando-a em 3 console.log
32 |   diferentes, com quantidades variáveis de parâmetros passados.
33 |   */
34 |   console.log( '\nSomar alguns números:' );
35 |   // ?
36 | 
37 |   /*
38 |   Declare uma variável chamada `userEntry`, que irá receber alguns valores
39 |   entrados pelo usuário. Mostre para o usuário a seguinte frase:
40 |   "Entre com alguns números que serão somados:"
41 |   */
42 |   // ?
43 | 
44 |   /*
45 |   Mostre no console o valor entrado pelo usuário:
46 |   */
47 |   console.log( '\nEntrada do usuário:' );
48 |   // ?
49 | 
50 |   /*
51 |   Crie uma função chamada `justNumbers`, que recebe por parâmetro uma string
52 |   e remove tudo o que não for número, retornando um array somente com os números
53 |   da string. Mostre a representação em string dessa função no console.
54 |   */
55 |   console.log( '\nFunção que limpa entrada do usuário (somente números):' );
56 |   // ?
57 | 
58 |   /*
59 |   Usando a função acima, faça a limpeza dos valores entrados pelo usuário,
60 |   atribuindo o resultado à uma variável `numbers`.
61 |   */
62 |   console.log( '\nEntrada do usuário limpa. Somente números:' );
63 |   // ?
64 | 
65 |   /*
66 |   Agora com o array de números, utilize a função `sum` para somar todos os
67 |   números desse array e mostre o resultado no console.
68 |   */
69 |   console.log( '\nSomar números entrados pelo usuário:' );
70 |   // ?
71 | 


--------------------------------------------------------------------------------
/challenge-23/challenge-23.js:
--------------------------------------------------------------------------------
 1 | /*
 2 | Vamos desenvolver mais um projeto. A ideia é fazer uma mini-calculadora.
 3 | As regras são:
 4 | 
 5 | - Deve ter somente 1 input, mas não deve ser possível entrar dados nesse input
 6 | diretamente;
 7 | - O input deve iniciar com valor zero;
 8 | - Deve haver 10 botões para os números de 0 a 9. Cada botão deve ser um número;
 9 | - Deve haver 4 botões para as operações principais: soma (+), subtração(-),
10 | multiplicação(x) e divisão(÷);
11 | - Deve haver um botão de "igual" (=) que irá calcular os valores e um botão "CE"
12 | que irá limpar o input, deixando-o com valor 0;
13 | 
14 | - A cada número pressionado, o input deve atualizar concatenando cada valor
15 | digitado, como em uma calculadora real;
16 | - Ao pressionar um botão com uma das 4 operações, deve aparecer o símbolo da
17 | operação no input. Se o último caractere no input já for um símbolo de alguma
18 | operação, esse caractere deve ser substituído pelo último pressionado.
19 | Exemplo:
20 | - Se o input tem os valores: "1+2+", e for pressionado o botão de
21 | multiplicação (x), então no input deve aparecer "1+2x".
22 | - Ao pressionar o botão de igual, o resultado do cálculo deve ser mostrado no
23 | input;
24 | - Ao pressionar o botão "CE", o input deve ficar zerado.
25 | */
26 | 


--------------------------------------------------------------------------------
/challenge-24/challenge-24.js:
--------------------------------------------------------------------------------
 1 | /*
 2 | Nossa calculadora agora está funcional! A ideia desse desafio é modularizar
 3 | o código, conforme vimos na aula anterior. Quebrar as responsabilidades
 4 | em funções, onde cada função faça somente uma única coisa, e faça bem feito.
 5 | 
 6 | - Remova as duplicações de código;
 7 | - agrupe os códigos que estão soltos em funções (declarações de variáveis,
 8 | listeners de eventos, etc);
 9 | - faça refactories para melhorar esse código, mas de forma que o mantenha com a
10 | mesma funcionalidade.
11 | */
12 | 
13 | var $visor = document.querySelector('[data-js="visor"]');
14 | var $buttonsNumbers = document.querySelectorAll('[data-js="button-number"]');
15 | var $buttonsOperations = document.querySelectorAll('[data-js="button-operation"]');
16 | var $buttonCE = document.querySelector('[data-js="button-ce"]');
17 | var $buttonEqual = document.querySelector('[data-js="button-equal"]');
18 | 
19 | Array.prototype.forEach.call($buttonsNumbers, function(button) {
20 |   button.addEventListener('click', handleClickNumber, false);
21 | });
22 | Array.prototype.forEach.call($buttonsOperations, function(button) {
23 |   button.addEventListener('click', handleClickOperation, false);
24 | });
25 | $buttonCE.addEventListener('click', handleClickCE, false);
26 | $buttonEqual.addEventListener('click', handleClickEqual, false);
27 | 
28 | function handleClickNumber() {
29 |   $visor.value += this.value;
30 | }
31 | 
32 | function handleClickOperation() {
33 |   $visor.value = removeLastItemIfItIsAnOperator($visor.value);
34 |   $visor.value += this.value;
35 | }
36 | 
37 | function handleClickCE() {
38 |   $visor.value = 0;
39 | }
40 | 
41 | function isLastItemAnOperation(number) {
42 |   var operations = ['+', '-', 'x', '÷'];
43 |   var lastItem = number.split('').pop();
44 |   return operations.some(function(operator) {
45 |     return operator === lastItem;
46 |   });
47 | }
48 | 
49 | function removeLastItemIfItIsAnOperator(number) {
50 |   if(isLastItemAnOperation(number)) {
51 |     return number.slice(0, -1);
52 |   }
53 |   return number;
54 | }
55 | 
56 | function handleClickEqual() {
57 |   $visor.value = removeLastItemIfItIsAnOperator($visor.value);
58 |   var allValues = $visor.value.match(/\d+[+x÷-]?/g);
59 |   $visor.value = allValues.reduce(function(accumulated, actual) {
60 |     var firstValue = accumulated.slice(0, -1);
61 |     var operator = accumulated.split('').pop();
62 |     var lastValue = removeLastItemIfItIsAnOperator(actual);
63 |     var lastOperator = isLastItemAnOperation(actual) ? actual.split('').pop() : '';
64 |     switch(operator) {
65 |       case '+':
66 |         return ( Number(firstValue) + Number(lastValue) ) + lastOperator;
67 |       case '-':
68 |         return ( Number(firstValue) - Number(lastValue) ) + lastOperator;
69 |       case 'x':
70 |         return ( Number(firstValue) * Number(lastValue) ) + lastOperator;
71 |       case '÷':
72 |         return ( Number(firstValue) / Number(lastValue) ) + lastOperator;
73 |     }
74 |   });
75 | }
76 | 


--------------------------------------------------------------------------------
/challenge-24/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="pt-br">
 3 | <head>
 4 |   <meta charset="utf-8">
 5 |   <title>Challenge 24 - Calculator</title>
 6 | </head>
 7 | <body>
 8 |   <input type="text" value="0" readonly data-js="visor">
 9 |   <div class="buttons-numbers">
10 |     <button data-js="button-number" value="0">0</button>
11 |     <button data-js="button-number" value="1">1</button>
12 |     <button data-js="button-number" value="2">2</button>
13 |     <button data-js="button-number" value="3">3</button>
14 |     <button data-js="button-number" value="4">4</button>
15 |     <button data-js="button-number" value="5">5</button>
16 |     <button data-js="button-number" value="6">6</button>
17 |     <button data-js="button-number" value="7">7</button>
18 |     <button data-js="button-number" value="8">8</button>
19 |     <button data-js="button-number" value="9">9</button>
20 |   </div>
21 | 
22 |   <div class="operations">
23 |     <button data-js="button-operation" value="+">+</button>
24 |     <button data-js="button-operation" value="-">-</button>
25 |     <button data-js="button-operation" value="x">x</button>
26 |     <button data-js="button-operation" value="÷">÷</button>
27 |     <button data-js="button-equal" value="=">=</button>
28 |     <button data-js="button-ce" value="ce">CE</button>
29 |   </div>
30 | 
31 |   <script src="challenge-24.js"></script>
32 | </body>
33 | </html>
34 | 


--------------------------------------------------------------------------------
/challenge-25/challenge-25.js:
--------------------------------------------------------------------------------
 1 | /*
 2 | Essa semana você terá dois desafios:
 3 | 1) Revisar todo o contéudo passado até aqui, e ver se você realmente entendeu
 4 | tudo o que foi passado! Se tiver dúvidas, anote, e então abra issues,
 5 | ou comente no seu pull request mesmo, que eu irei ajudá-lo a entender
 6 | o que não ficou tão claro das aulas anteriores.
 7 | É essencial que você entenda todo o conteúdo que foi passado até aqui,
 8 | para que possamos prosseguir para a parte mais avançada do curso :D
 9 | 
10 | 2) Estudar eventos!
11 | Acesse a página do MDN:
12 | https://developer.mozilla.org/en-US/docs/Web/Events#Categories
13 | 
14 | Tente aplicar na prática alguns dos eventos que estão ali e coloque nesse
15 | desafio os experimentos legais que você conseguir desenvolver :D
16 | */
17 | 


--------------------------------------------------------------------------------
/challenge-26/challenge-26.js:
--------------------------------------------------------------------------------
 1 | /*
 2 | O desafio dessa semana é criar uma mini library (biblioteca) para
 3 | reutilizarmos nossos códigos quando fizermos manipulação de DOM!
 4 | 
 5 | Requisitos:
 6 | - O nome da lib deve ser "DOM".
 7 | - Ela deve ser uma função construtora, que receberá uma string por parâmetro.
 8 | Essa string será o nó do DOM a ser selecionado;
 9 | - No construtor, você deve atribuir à `this.element` todos os elementos
10 | do DOM selecionados;
11 | - Extenda a lib para ter os métodos `on`, `off` e `get`.
12 | - O método `on` irá adicionar um listener de evento a todos os elementos
13 | selecionados.
14 | - O método `off` irá remover o listener de evento de todos os elementos
15 | selecionados.
16 | - O método `get` deve retornar os elementos.
17 | - O código abaixo deve funcionar corretamente após a lib criada.
18 | 
19 | Dica: olhe os erros que acontecem no console, e vá resolvendo um a um.
20 | Só passe para o próximo problema quando tiver resolvido o anterior :)
21 | */
22 | // ?
23 | 
24 | var $a = new DOM('[data-js="link"]');
25 | $a.on('click', function(e) {
26 |   e.preventDefault();
27 |   console.log('clicou');
28 | });
29 | 
30 | console.log('Elementos selecionados:', $a.get());
31 | console.log('$a é filho de body?', $a.get()[0].parentNode === document.body);
32 | 


--------------------------------------------------------------------------------
/challenge-26/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | <head>
 4 |   <meta charset="UTF-8">
 5 |   <title>Document</title>
 6 | </head>
 7 | <body>
 8 |   <a data-js="link" href="">Link 1</a>
 9 |   <a data-js="link" href="">Link 2</a>
10 | 
11 |   <script src="challenge-26.js"></script>
12 | </body>
13 | </html>
14 | 


--------------------------------------------------------------------------------
/challenge-27/challenge-27.js:
--------------------------------------------------------------------------------
 1 | /*
 2 | Aproveitando a lib DOM que fizemos na semana anterior, crie agora para ela
 3 | métodos semelhantes aos que existem no array, mas que sirvam para os
 4 | elementos do DOM selecionados.
 5 | Crie os seguintes métodos:
 6 | - forEach, map, filter, reduce, reduceRight, every e some.
 7 | 
 8 | Crie também métodos que verificam o tipo do objeto passado por parâmetro.
 9 | Esses métodos não precisam depender de criar um novo elmento do DOM, podem
10 | ser métodos estáticos.
11 | 
12 | Métodos estáticos não obrigam o uso do `new`, podendo ser usados diretamente
13 | no objeto, como nos exemplos abaixo:
14 | DOM.isArray([1, 2, 3]); // true
15 | DOM.isFunction(function() {}); // true
16 | DOM.isNumber('numero'); // false
17 | 
18 | Crie os seguintes métodos para verificação de tipo:
19 | - isArray, isObject, isFunction, isNumber, isString, isBoolean, isNull.
20 | O método isNull deve retornar `true` se o valor for null ou undefined.
21 | */
22 | 


--------------------------------------------------------------------------------
/challenge-28/challenge-28.js:
--------------------------------------------------------------------------------
 1 |   /*
 2 |   No HTML:
 3 |   - Crie um formulário com um input de texto que receberá um CEP e um botão
 4 |   de submit;
 5 |   - Crie uma estrutura HTML para receber informações de endereço:
 6 |   "Logradouro, Bairro, Estado, Cidade e CEP." Essas informações serão
 7 |   preenchidas com os dados da requisição feita no JS.
 8 |   - Crie uma área que receberá mensagens com o status da requisição:
 9 |   "Carregando, sucesso ou erro."
10 | 
11 |   No JS:
12 |   - O CEP pode ser entrado pelo usuário com qualquer tipo de caractere, mas
13 |   deve ser limpo e enviado somente os números para a requisição abaixo;
14 |   - Ao submeter esse formulário, deve ser feito um request Ajax para a URL:
15 |   "https://viacep.com.br/ws/[CEP]/json/", onde [CEP] será o CEP passado
16 |   no input criado no HTML;
17 |   - Essa requisição trará dados de um CEP em JSON. Preencha campos na tela
18 |   com os dados recebidos.
19 |   - Enquanto os dados são buscados, na área de mensagens de status, deve mostrar
20 |   a mensagem: "Buscando informações para o CEP [CEP]..."
21 |   - Se não houver dados para o CEP entrado, mostrar a mensagem:
22 |   "Não encontramos o endereço para o CEP [CEP]."
23 |   - Se houver endereço para o CEP digitado, mostre a mensagem:
24 |   "Endereço referente ao CEP [CEP]:"
25 |   - Utilize a lib DOM criada anteriormente para facilitar a manipulação e
26 |   adicionar as informações em tela.
27 |   */
28 | 


--------------------------------------------------------------------------------
/challenge-29/challenge-29.js:
--------------------------------------------------------------------------------
 1 | (function() {
 2 |   'use strict';
 3 | 
 4 |   /*
 5 |   Vamos estruturar um pequeno app utilizando módulos.
 6 |   Nosso APP vai ser um cadastro de carros. Vamos fazê-lo por partes.
 7 |   A primeira etapa vai ser o cadastro de veículos, de deverá funcionar da
 8 |   seguinte forma:
 9 |   - No início do arquivo, deverá ter as informações da sua empresa - nome e
10 |   telefone (já vamos ver como isso vai ser feito)
11 |   - Ao abrir a tela, ainda não teremos carros cadastrados. Então deverá ter
12 |   um formulário para cadastro do carro, com os seguintes campos:
13 |     - Imagem do carro (deverá aceitar uma URL)
14 |     - Marca / Modelo
15 |     - Ano
16 |     - Placa
17 |     - Cor
18 |     - e um botão "Cadastrar"
19 | 
20 |   Logo abaixo do formulário, deverá ter uma tabela que irá mostrar todos os
21 |   carros cadastrados. Ao clicar no botão de cadastrar, o novo carro deverá
22 |   aparecer no final da tabela.
23 | 
24 |   Agora você precisa dar um nome para o seu app. Imagine que ele seja uma
25 |   empresa que vende carros. Esse nosso app será só um catálogo, por enquanto.
26 |   Dê um nome para a empresa e um telefone fictício, preechendo essas informações
27 |   no arquivo company.json que já está criado.
28 | 
29 |   Essas informações devem ser adicionadas no HTML via Ajax.
30 | 
31 |   Parte técnica:
32 |   Separe o nosso módulo de DOM criado nas últimas aulas em
33 |   um arquivo DOM.js.
34 | 
35 |   E aqui nesse arquivo, faça a lógica para cadastrar os carros, em um módulo
36 |   que será nomeado de "app".
37 |   */
38 | 
39 | })();
40 | 


--------------------------------------------------------------------------------
/challenge-29/company.json:
--------------------------------------------------------------------------------
1 | {
2 |   "name": "Your company name",
3 |   "phone": "(11) 3333-2222"
4 | }
5 | 


--------------------------------------------------------------------------------
/challenge-30/challenge-30.js:
--------------------------------------------------------------------------------
 1 | /*
 2 | A loja de carros será nosso desafio final. Na aula anterior, você fez a parte
 3 | do cadastro dos carros. Agora nós vamos começar a deixar ele com cara de
 4 | projeto mesmo.
 5 | 
 6 | Crie um novo repositório na sua conta do GitHub, com o nome do seu projeto.
 7 | 
 8 | Na hora de criar, o GitHub te dá a opção de criar o repositório com um
 9 | README. Use essa opção.
10 | 
11 | Após criar o repositório, clone ele na sua máquina.
12 | 
13 | Crie uma nova branch chamada `challenge-30`, e copie tudo o que foi feito no
14 | desafio da aula anterior para esse novo repositório, nessa branch
15 | `challenge-30`.
16 | 
17 | Adicione um arquivo na raiz desse novo repositório chamado `.gitignore`.
18 | O conteúdeo desse arquivo deve ser somente as duas linhas abaixo:
19 | 
20 | node_modules
21 | npm-debug.log
22 | 
23 | Faça as melhorias que você achar que são necessárias no seu código, removendo
24 | duplicações, deixando-o o mais legível possível, e então suba essa alteração
25 | para o repositório do seu projeto.
26 | 
27 | Envie um pull request da branch `challenge-30` para a `master` e cole aqui
28 | nesse arquivo, dentro do `console.log`, o link para o pull request no seu
29 | projeto.
30 | */
31 | 
32 | console.log('Link do pull request do seu projeto');
33 | 


--------------------------------------------------------------------------------
/challenge-31/challenge-31.js:
--------------------------------------------------------------------------------
 1 | /*
 2 | Agora vamos criar a funcionalidade de "remover" um carro. Adicione uma nova
 3 | coluna na tabela, com um botão de remover.
 4 | 
 5 | Ao clicar nesse botão, a linha da tabela deve ser removida.
 6 | 
 7 | Faça um pull request no seu repositório, na branch `challenge-31`, e cole
 8 | o link do pull request no `console.log` abaixo.
 9 | 
10 | Faça um pull request, também com a branch `challenge-31`, mas no repositório
11 | do curso, para colar o link do pull request do seu repo.
12 | */
13 | 
14 | console.log('Link do pull request do seu projeto');
15 | 


--------------------------------------------------------------------------------
/challenge-32/challenge-32.js:
--------------------------------------------------------------------------------
 1 | /*
 2 | Já temos as funcionalidades de adicionar e remover um carro. Agora, vamos persistir esses dados, 
 3 | salvando-os temporariamente na memória de um servidor.
 4 | 
 5 | Nesse diretório do `challenge-32` tem uma pasta `server`. É um servidor simples, em NodeJS, para 
 6 | que possamos utilizar para salvar as informações dos nossos carros.
 7 | 
 8 | Para utilizá-lo, você vai precisar fazer o seguinte:
 9 | 
10 | - Via terminal, acesse o diretório `server`;
11 | - execute o comando `npm install` para instalar as dependências;
12 | - execute `node app.js` para iniciar o servidor.
13 | 
14 | Ele irá ser executado na porta 3000, que pode ser acessada via browser no endereço: 
15 | `http://localhost:3000`
16 | 
17 | O seu projeto não precisa estar rodando junto com o servidor. Ele pode estar em outra porta.
18 | As mudanças que você irá precisar fazer no seu projeto são:
19 | 
20 | - Para listar os carros cadastrados ao carregar o seu projeto, faça um request GET no endereço
21 | `http://localhost:3000/car`
22 | - Para cadastrar um novo carro, faça um POST no endereço `http://localhost:3000/car`, enviando
23 | os seguintes campos:
24 |   - `image` com a URL da imagem do carro;
25 |   - `brandModel`, com a marca e modelo do carro;
26 |   - `year`, com o ano do carro;
27 |   - `plate`, com a placa do carro;
28 |   - `color`, com a cor do carro.
29 | 
30 | Após enviar o POST, faça um GET no `server` e atualize a tabela para mostrar o novo carro cadastrado.
31 | 
32 | Crie uma branch `challenge-32` no seu projeto, envie um pull request lá e cole nesse arquivo a URL
33 | do pull request.
34 | */
35 | console.log('Link do pull request do seu projeto');
36 | 


--------------------------------------------------------------------------------
/challenge-32/server/app.js:
--------------------------------------------------------------------------------
 1 | 'use strict';
 2 | 
 3 | var express = require('express');
 4 | var cors = require('cors');
 5 | var bodyParser = require('body-parser');
 6 | var app = express();
 7 | var port = process.env.PORT || 3000;
 8 | var routes = require('./routes');
 9 | 
10 | app.use(cors());
11 | app.use(bodyParser.urlencoded({ extended: false }));
12 | app.use(bodyParser.json());
13 | 
14 | app.get('/', function(req, res) {
15 |   res.json({ message: 'hi' });
16 | });
17 | 
18 | app.use('/car', routes);
19 | 
20 | app.listen(port, function() {
21 |   console.log('Listening on port http://localhost:%d', port);
22 | });
23 | 


--------------------------------------------------------------------------------
/challenge-32/server/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "rest-api",
 3 |   "version": "0.1.0",
 4 |   "dependencies": {
 5 |     "body-parser": "^1.14.2",
 6 |     "cors": "^2.7.1",
 7 |     "express": "^4.13.3"
 8 |   }
 9 | }
10 | 


--------------------------------------------------------------------------------
/challenge-32/server/routes/index.js:
--------------------------------------------------------------------------------
 1 | 'use strict';
 2 | 
 3 | var express = require('express');
 4 | var router = express.Router();
 5 | var data = [];
 6 | 
 7 | router.get('/', function(req, res) {
 8 |   console.log('[GET] /car:', data)
 9 |   res.json(data);
10 | });
11 | 
12 | router.post('/', function(req, res) {
13 |   data.push({
14 |     image: req.body.image,
15 |     brandModel: req.body.brandModel,
16 |     year: req.body.year,
17 |     plate: req.body.plate,
18 |     color: req.body.color
19 |   });
20 |   console.log('[POST] /car:', JSON.stringify({
21 |     body: req.body,
22 |     data
23 |   }, null, 2))
24 |   res.json({ message: 'success' });
25 | });
26 | 
27 | module.exports = router;
28 | 


--------------------------------------------------------------------------------
/challenge-33/challenge-33.js:
--------------------------------------------------------------------------------
 1 | /*
 2 | Hora de finalizar nosso projeto!
 3 | 
 4 | Já temos o cadastro funcionando e persistindo em memória;
 5 | Já estamos deletando o carro da tabela (no frontend).
 6 | 
 7 | Mas se você perceber, se você recarregar a tela, o carro ainda vai estar lá.
 8 | Agora você precisa fazer com que, ao clicar no botão de deletar, o carro seja
 9 | removido da tabela e também seja deletado do servidor.
10 | 
11 | Para fazer isso, você precisa enviar o verbo HTTP "DELETE" para a mesma URL
12 | que você faz o POST para cadastrar o carro:
13 | `http://localhost:3000/car`, só que, ao invés de enviar todas as informações
14 | do carro, como você faz para cadastrar, você deve enviar somente a placa
15 | do carro.
16 | 
17 | Fazendo isso, ao recarregar a tela, a tabela deve mostrar os carros atualizados.
18 | 
19 | A lógica do servidor que está criada nesso diretório desse desafio é o mesmo
20 | do desafio anterior, com a diferença que, nesse desafio, nós temos a
21 | implementação da regra para a deleção do carro =)
22 | 
23 | A regra é a mesma das anteriores: crie uma branch `challenge-33` no seu
24 | repositório do GitHub, e envie o pull request para lá.
25 | 
26 | Depois, envie um pull request no repositório do curso, colocando no console.log
27 | abaixo a URL do pull request no seu repositório.
28 | */
29 | console.log('Link do pull request do seu projeto');
30 | 


--------------------------------------------------------------------------------
/challenge-33/server/app.js:
--------------------------------------------------------------------------------
 1 | 'use strict';
 2 | 
 3 | var express = require('express');
 4 | var cors = require('cors');
 5 | var bodyParser = require('body-parser');
 6 | var app = express();
 7 | var port = process.env.PORT || 3000;
 8 | var routes = require('./routes');
 9 | 
10 | app.use(cors());
11 | app.use(bodyParser.urlencoded({ extended: false }));
12 | app.use(bodyParser.json());
13 | 
14 | app.get('/', function(req, res) {
15 |   res.json({ message: 'hi' });
16 | });
17 | 
18 | app.use('/car', routes);
19 | 
20 | app.listen(port, function() {
21 |   console.log('Listening on port http://localhost:%d', port);
22 | });
23 | 


--------------------------------------------------------------------------------
/challenge-33/server/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "rest-api",
 3 |   "version": "0.1.0",
 4 |   "dependencies": {
 5 |     "body-parser": "^1.14.2",
 6 |     "cors": "^2.7.1",
 7 |     "express": "^4.13.3"
 8 |   }
 9 | }
10 | 


--------------------------------------------------------------------------------
/challenge-33/server/routes/index.js:
--------------------------------------------------------------------------------
 1 | 'use strict';
 2 | 
 3 | var express = require('express');
 4 | var router = express.Router();
 5 | var data = [];
 6 | 
 7 | router.get('/', function(req, res) {
 8 |   res.json(data);
 9 | });
10 | 
11 | router.post('/', function(req, res) {
12 |   data.push({
13 |     image: req.body.image,
14 |     brandModel: req.body.brandModel,
15 |     year: req.body.year,
16 |     plate: req.body.plate,
17 |     color: req.body.color
18 |   });
19 |   res.json({ message: 'success' });
20 | });
21 | 
22 | router.delete('/', function(req, res) {
23 |   data = data.filter(function(car) {
24 |     return car.plate !== req.body.plate;
25 |   });
26 |   res.json({ message: 'success' });
27 | });
28 | 
29 | module.exports = router;
30 | 


--------------------------------------------------------------------------------
/summary.md:
--------------------------------------------------------------------------------
 1 | ## Sumário
 2 | 
 3 | Aqui você pode ver todo o conteúdo do curso disponível:
 4 | 
 5 | - Variáveis e tipos de dados
 6 | - Operadores aritméticos
 7 | - Operadores de igualdade e relacionais
 8 | - Funções
 9 | - Operadores Lógicos
10 | - Operadores Unários
11 | - Estrutura Léxica
12 | - Instruções condicionais - IF
13 | - Truthy e Falsy
14 | - Condicional Ternário
15 | - Escopo de variáveis e funções
16 | - Retorno de funções com arrays e objetos
17 | - Parâmetros de Funções com arrays e objetos
18 | - Operador vírgula e estrutura condicional switch
19 | - Estrutura de repetição while
20 | - O operador módulo
21 | - Array - a propriedade length
22 | - Array - método "push()" e Loop "for"
23 | - A importância de nomear funções
24 | - Introdução à Functional Programming
25 | - Escopo de funções
26 | - Hoisting
27 | - IIFE - Immediately Invoked Function Expression
28 | - Wrapper Objects
29 | - typeof
30 | - Laços (Loops)
31 | - Saltos
32 | - Criação de objetos
33 | - Criação de objetos - Object.create
34 | - Métodos de objeto
35 | - Array - Métodos
36 | - Array - toString, concat, unshift, shift
37 | - slice e splice
38 | - forEach, every, some
39 | - map, filter
40 | - reduce() e reduceRight()
41 | - indexOf(), lastIndexOf() e isArray()
42 | - JS no browser
43 | - this
44 | - Objeto arguments
45 | - use strict - Criação de variáveis sem o "var"
46 | - use strict - Uso do width e global this === undefined
47 | - O operador delete, objetos e funções
48 | - Objeto String
49 | - Regex
50 | - Regex - Negação
51 | - Regex - Repetidores
52 | - Conhecendo outros símbolos usados na Regex
53 | - Métodos de string onde podemos usar regex
54 | - o objeto RegExp()
55 | - Js no browser - Selecionar elementos no DOM
56 | - Js no browser - Formulário e eventos
57 | - Sync vs async
58 | - setTimeout
59 | - setTimeout vs setInterval
60 | - Propriedades e métodos de funções
61 | - Prototype
62 | - Array-like e editorconfig
63 | - Debug
64 | - Modularização de código
65 | - Javascript inline
66 | - Eventos inline
67 | - Remover eventos
68 | - Eventos como métodos
69 | - DOM
70 | - documentFragments
71 | - Dicas de performance
72 | - Eventos para carregamento da tela
73 | - Copiar arrays
74 | - Pegar tipo correto de objetos
75 | - Ajax - método GET
76 | - try / catch 
77 | - Tratamento de dados via entrada do usuário
78 | - Module Pattern
79 | - Closures
80 | - Exportar módulo para usar em outros módulos
81 | - instanceof
82 | - element.classList
83 | - innerHTML, outerHTML e insertAdjacentHTML
84 | - Objeto Date
85 | - Objeto Math
86 | - Ajax - outros verbos
87 | - Backend para mostrar como ele recebe os dados do client
88 | - Enviar dados via Ajax
89 | - Enviar cabeçalhos via Ajax
90 | - Abortar requisição Ajax
91 | - Testes (TDD, BDD)
92 | - Ferramentas para escrever testes
93 | - Aula bônus
94 | 


--------------------------------------------------------------------------------