项目作者: DanielObara

项目描述 :
JS @Rocketseat Challenge Excercises :book:
高级语言: JavaScript
项目地址: git://github.com/DanielObara/Javascript-Rocketseat.git
创建时间: 2019-03-01T18:08:41Z
项目社区:https://github.com/DanielObara/Javascript-Rocketseat

开源协议:MIT License

下载



Starter


JS Rocketseat Challenge Excercises :book:

This project is just the final exercises of each Rocketseat Javascript course module JavaScript Starter 🎓



GitHub language count


Made by DanielObara


License


Repository size



GitHub last commit


Stargazers

Exercícios Módulo 01 - Introdução JavaScript :point_up:

:one: exercício :pencil:

Crie uma função que dado o objeto a seguir:

  1. var endereco = {
  2. rua: "Rua dos pinheiros",
  3. numero: 1293,
  4. bairro: "Centro",
  5. cidade: "São Paulo",
  6. uf: "SP"
  7. };

Retorne o seguinte conteúdo:

O usuário mora em São Paulo / SP, no bairro Centro, na rua "Rua dos Pinheiros" com nº 1293.

:two: exercício :pencil:

Crie uma função que dado um intervalo (entre x e y) exiba todos número pares:

  1. function pares(x, y) {
  2. // código aqui
  3. }
  4. pares(32, 321);

:three: exercício :pencil:

Escreva uma função que verifique se o vetor de habilidades passado possui a habilidade “Javascript”
e retorna um booleano true/false caso exista ou não.

  1. function temHabilidade(skills) {
  2. // código aqui
  3. }
  4. var skills = ["Javascript", "ReactJS", "React Native"];
  5. temHabilidade(skills); // true ou false

Dica: para verificar se um vetor contém um valor, utilize o método indexOf.

:four: exercício :pencil:

Escreva uma função que dado um total de anos de estudo retorna o quão experiente o usuário é:

  1. function experiencia(anos) {
  2. // código aqui
  3. }
  4. var anosEstudo = 7;
  5. experiencia(anosEstudo);
  6. // De 0-1 ano: Iniciante
  7. // De 1-3 anos: Intermediário
  8. // De 3-6 anos: Avançado
  9. // De 7 acima: Jedi Master

:five: exercício :pencil:

Dado o seguinte vetor de objetos:

  1. var usuarios = [
  2. {
  3. nome: "Diego",
  4. habilidades: ["Javascript", "ReactJS", "Redux"]
  5. },
  6. {
  7. nome: "Gabriel",
  8. habilidades: ["VueJS", "Ruby on Rails", "Elixir"]
  9. }
  10. ];

Escreva uma função que produza o seguinte resultado:

O Diego possui as habilidades: Javascript, ReactJS, Redux O Gabriel possui as habilidades: VueJS, Ruby on Rails, Elixir

Dica: Para percorrer um vetor você deve utilizar a sintaxe for…of e para unir valores de um array
com um separador utilize o join.

Exercícios Módulo 02 - Manipulando a DOM :v:

:one: exercício :pencil:

Crie um botão que ao ser clicado cria um novo elemento em tela com a forma de um quadrado
vermelho com 100px de altura e largura. Sempre que o botão for clicado um novo quadrado deve
aparecer na tela.

:two: exercício :pencil:

Utilizando o resultado do primeiro desafio, toda vez que o usuário passar o mouse por cima de
algum quadrado troque sua cor para uma cor aleatória gerada pela função abaixo:

  1. function getRandomColor() {
  2. var letters = "0123456789ABCDEF";
  3. var color = "#";
  4. for (var i = 0; i < 6; i++) {
  5. color += letters[Math.floor(Math.random() * 16)];
  6. }
  7. return color;
  8. }
  9. var newColor = getRandomColor(); // #E943F0

:three: exercício :pencil:

A partir do seguinte vetor:

  1. var nomes = ["Diego", "Gabriel", "Lucas"];

Preencha uma lista <ul> no HTML com os itens da seguinte forma:

● Diego
● Gabriel
● Lucas

:four: exercício :pencil:

Seguindo o resultado do exercício anterior adicione um input em tela e um botão como a seguir:

  1. <input type="text" name="nome">
  2. <button onClick="adicionar()">Adicionar</button>

Ao clicar no botão, a função adicionar() deve ser disparada adicionando um novo item a lista de
nomes baseado no nome preenchido no input e renderizando o novo item em tela juntos aos
demais itens anteriores. Além disso, o conteúdo do input deve ser apagado após o clique.

Exercícios Módulo 03 - App de ToDos :

Criado aplicativo Todo List no qual armazena os dados na localStorage. Cria e exclui itens na lista de Todo’s.

Exercícios Módulo 04 - JS Assíncrono :

:one: exercício
Crie uma função que recebe a idade de um usuário e retorna uma Promise que depois de 2
segundos retornará se usuário é maior ou não que 18 anos. Se o usuário ter mais que 18 anos de
idade o resultado deve cair no .then, caso contrário, no .catch

  1. function checaIdade(idade) {
  2. // Retornar uma promise
  3. }
  4. checaIdade(20)
  5. .then(function() {
  6. console.log("Maior que 18");
  7. })
  8. .catch(function() {
  9. console.log("Menor que 18");
  10. });

:two: exercício
Crie uma tela com um
<input> que deve receber o nome de um usuário no Github. Após digitar o
nome do usuário e clicar no botão buscar a aplicação deve buscar pela API do Github (conforme
URL abaixo) os dados de repositórios do usuário e mostrá-los em tela:
URL de exemplo: https://api.github.com/users/diego3g/repos
Basta alterar “diego3g” pelo nome do usuário.

  1. <input type="text" name="user">
  2. <button onclick="">Adicionar</button>

Depois de preencher o input e adicionar, a seguinte lista deve aparecer abaixo:

  1. <ul>
  2. <li>repo1</li>
  3. <li>repo2</li>
  4. <li>repo3</li>
  5. <li>repo4</li>
  6. <li>repo5</li>
  7. </ul>

:three: exercício
A partir do resultado do exemplo anterior adicione um indicador de carregamento em tela no lugar
da lista apenas enquanto a requisição estiver acontecendo:

  1. <li>Carregando...</li>

Além disso, adicione uma mensagem de erro em tela caso o usuário no Github não exista.
Dica: Quando o usuário não existe, a requisição irá cair no .catch com código de erro 404.

🤔 Como contribuir

  • Faça um fork desse repositório;
  • Cria uma branch com a sua feature: git checkout -b minha-feature;
  • Faça commit das suas alterações: git commit -m 'feat: Minha nova feature';
  • Faça push para a sua branch: git push origin minha-feature.

Depois que o merge da sua pull request for feito, você pode deletar a sua branch.

:memo: Licença

Esse projeto está sob a licença MIT. Veja o arquivo LICENSE para mais detalhes.