├── .github
    ├── logo.png
    └── logo.svg
├── .vscode
    └── launch.json
├── ExerciciosModulo1
    └── ExerciciosModulo1.js
├── ExerciciosModulo2
    └── ExerciciosModulo2.html
├── ExerciciosModulo3
    ├── AulaModulo3.html
    └── todo.js
├── ExerciciosModulo4
    ├── ES6RestSpread.js
    ├── ExercerciciosModulo4.html
    └── ExerciciosModulo4.js
├── LICENSE.md
└── README.md


/.github/logo.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/DanielObara/Javascript-Rocketseat/4bae4f288bd11cda1ffe94de7ce2e3daee65939d/.github/logo.png


--------------------------------------------------------------------------------
/.github/logo.svg:
--------------------------------------------------------------------------------
 1 | <svg xmlns="http://www.w3.org/2000/svg" width="200" height="200" viewBox="0 0 200 200">
 2 |   <g id="Group_1556" data-name="Group 1556" transform="translate(0)">
 3 |     <g id="Group_1494" data-name="Group 1494" transform="translate(0 0)">
 4 |       <rect id="Rectangle_4" data-name="Rectangle 4" width="200" height="200" rx="5" fill="#f7df1e"/>
 5 |     </g>
 6 |     <g id="javascript" transform="translate(28.023 28.023)">
 7 |       <path id="Path_3057" data-name="Path 3057" d="M0,0H143.954V143.954H0Z" transform="translate(0)" fill="#f7df1e"/>
 8 |       <path id="Path_3058" data-name="Path 3058" d="M67.312,176.581l12.107-7.327c2.336,4.141,4.461,7.645,9.558,7.645,4.885,0,7.966-1.911,7.966-9.344V117H111.81v50.762c0,15.4-9.027,22.408-22.2,22.408-11.894,0-18.8-6.16-22.3-13.594m52.574-1.592,12.106-7.009c3.187,5.2,7.329,9.027,14.656,9.027,6.161,0,10.089-3.08,10.089-7.328,0-5.1-4.036-6.9-10.832-9.876l-3.716-1.595c-10.727-4.565-17.842-10.3-17.842-22.407,0-11.151,8.5-19.648,21.771-19.648,9.452,0,16.249,3.293,21.133,11.895l-11.577,7.435c-2.549-4.566-5.309-6.372-9.558-6.372-4.354,0-7.116,2.761-7.116,6.372,0,4.46,2.761,6.267,9.133,9.028l3.717,1.593c12.638,5.417,19.753,10.939,19.753,23.363,0,13.382-10.514,20.709-24.638,20.709-13.806,0-22.727-6.584-27.081-15.187" transform="translate(-33.151 -51.808)"/>
 9 |     </g>
10 |   </g>
11 | </svg>
12 | 


--------------------------------------------------------------------------------
/.vscode/launch.json:
--------------------------------------------------------------------------------
 1 | {
 2 | 	// Use IntelliSense to learn about possible attributes.
 3 | 	// Passe o mouse para ver as descrições dos atributos existentes.
 4 | 	// Para obter mais informações, visite: https://go.microsoft.com/fwlink/?linkid=830387
 5 | 	"version": "0.2.0",
 6 | 	"configurations": [
 7 | 		{
 8 | 			"type": "chrome",
 9 | 			"request": "launch",
10 | 			"name": "Launch Chrome against localhost",
11 | 			"url": "http://localhost:8080",
12 | 			"webRoot": "${workspaceFolder}"
13 | 		}
14 | 	]
15 | }


--------------------------------------------------------------------------------
/ExerciciosModulo1/ExerciciosModulo1.js:
--------------------------------------------------------------------------------
 1 | //Exercicio 1:
 2 | var endereco = {
 3 |   rua: "Rua dos pinheiros",
 4 |   numero: 1293,
 5 |   bairro: "Centro",
 6 |   cidade: "São Paulo",
 7 |   uf: "SP"
 8 | };
 9 | const { rua, numero, bairro, cidade, uf } = endereco;
10 | console.log(`O usuário mora em ${cidade} / ${uf}, no bairro
11 | ${bairro}, na rua "${rua}" com nº ${numero}.`);
12 | 
13 | /*--------------------------------------------------------------------------------------------------*/
14 | //Exercicio 2:
15 | const pares = (x, y) => {
16 |   for (var i = x; i <= y; i++) {
17 |     if (i % 2 === 0) {
18 |       console.log(i);
19 |     }
20 |   }
21 | };
22 | pares(1, 20);
23 | /*--------------------------------------------------------------------------------------------------*/
24 | //Exercicio 3:
25 | const validaSkill = skills => {
26 |   if (skills.indexOf("Javascript") !== -1) {
27 |     return console.log("Tem a skill");
28 |   } else {
29 |     console.log("Não tem a skill");
30 |   }
31 | };
32 | var skills = ["Boostrap", "React", "CSS", "HTML"];
33 | validaSkill(skills);
34 | validaSkill([...skills, "Javascript"]);
35 | /*--------------------------------------------------------------------------------------------------*/
36 | //Exercício 4:
37 | const calcExp = age => {
38 |   switch (true) {
39 |     case age >= 0 && age <= 1:
40 |       console.log(`Você tem ${age} anos de exp, seu nível é: Iniciante`);
41 |       break;
42 |     case age >= 1 && age <= 3:
43 |       console.log(`Você tem ${age} anos de exp, seu nível
44 | é: Intermediário`);
45 |       break;
46 |     case age >= 3 && age <= 6:
47 |       console.log(`Você tem
48 | ${age} anos de exp, seu nível é: Avançado`);
49 |       break;
50 |     default:
51 |       console.log(`Você
52 | tem ${age} anos de exp, seu nível é: Jedi Master `);
53 |       break;
54 |   }
55 | };
56 | calcExp(1);
57 | calcExp(3);
58 | calcExp(6);
59 | calcExp(10);
60 | /*--------------------------------------------------------------------------------------------------*/
61 | //Exercício 5
62 | 
63 | var usuarios = [
64 |   {
65 |     nome: "Diego",
66 |     habilidades: ["Javascript", "ReactJS", "Redux"]
67 |   },
68 |   { nome: "Gabriel", habilidades: ["VueJS", "Ruby on Rails", "Elixir"] }
69 | ];
70 | 
71 | const showMessage = usuarios => {
72 |   for (const user of usuarios) {
73 |     const { nome, habilidades } = user;
74 |     console.log(`O ${nome} possui as habilidades: ${habilidades.join(", ")}`);
75 |   }
76 | };
77 | 


--------------------------------------------------------------------------------
/ExerciciosModulo2/ExerciciosModulo2.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 |   <head>
 4 |     <meta charset="utf-8" />
 5 |     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
 6 |     <title>Page Title</title>
 7 |     <meta name="viewport" content="width=device-width, initial-scale=1" />
 8 |   </head>
 9 |   <body>
10 |     <div></div>
11 |     <button id="new">
12 |       Criar quadrado vermelho
13 |     </button>
14 | 
15 |     <div id="squad"></div>
16 | 
17 |     <ul></ul>
18 | 
19 |     <input type="text" id="nome" />
20 |     <button onclick="adicionar()">Adicionar</button>
21 | 
22 |     <script>
23 |       var btnElement = document.getElementById("new");
24 |       var squaresElement = document.getElementById("squad");
25 |       btnElement.onclick = function() {
26 |         var square = document.createElement("div");
27 |         square.style.width = "100px";
28 |         square.style.height = "100px";
29 |         square.style.backgroundColor = "#F00";
30 | 
31 |         square.onmouseover = function() {
32 |           square.style.backgroundColor = getRandomColor();
33 |         };
34 |         squaresElement.appendChild(square);
35 |       };
36 | 
37 |       function getRandomColor() {
38 |         var letters = "0123456789ABCDEF";
39 |         var color = "#";
40 |         for (var i = 0; i < 6; i++) {
41 |           color += letters[Math.floor(Math.random() * 16)];
42 |         }
43 |         return color;
44 |       }
45 | 
46 |       var names = [
47 |         "DANIEL OBARA",
48 |         "DIEGO FERNANDES",
49 |         "CUBO MÁGICO",
50 |         "CAHFEH ZHOTTYS"
51 |       ];
52 |       //pegando elemento UL
53 |       var elementoLista = document.querySelector("ul");
54 | 
55 |       //peganddo o input text element
56 |       var inputNewName = document.getElementById("nome");
57 | 
58 |       //percorrendo nome da lista de nomes
59 |       for (name of names) {
60 |         //chamando função que insere o nome
61 |         adicionaItem(name);
62 |       }
63 | 
64 |       //Adicionando item ao elemento li filho do elemento ul
65 |       function adicionaItem(name) {
66 |         console.log("TCL: adicionaItem -> name", name);
67 |         //pegando elemento li filho de ul
68 |         var elementoFilho = document.createElement("li");
69 | 
70 |         //criando o texto para inserir no li
71 |         var textoDoFilho = document.createTextNode(name);
72 | 
73 |         //inserindo texto ao elemento li
74 |         elementoFilho.appendChild(textoDoFilho);
75 | 
76 |         //inserindo o li ao elemento ul
77 |         elementoLista.appendChild(elementoFilho);
78 |       }
79 |       function adicionar() {
80 |         adicionaItem(inputNewName.value);
81 | 
82 |         inputNewName.value = "";
83 |       }
84 |     </script>
85 |   </body>
86 | </html>
87 | 


--------------------------------------------------------------------------------
/ExerciciosModulo3/AulaModulo3.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 |   <head>
 4 |     <meta charset="UTF-8" />
 5 |     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 6 |     <meta http-equiv="X-UA-Compatible" content="ie=edge" />
 7 |     <title>Curso Javascript mdulo 3</title>
 8 |   </head>
 9 |   <body>
10 |     <div id="app">
11 |       <ul></ul>
12 | 
13 |       <input type="text" placeholder="Digite um todo" />
14 |       <button onclick="">Acidionar</button>
15 |     </div>
16 | 
17 |     <script src="todo.js"></script>
18 |   </body>
19 | </html>
20 | 


--------------------------------------------------------------------------------
/ExerciciosModulo3/todo.js:
--------------------------------------------------------------------------------
 1 | var listElement = document.querySelector("#app ul");
 2 | var inputElement = document.querySelector("#app input");
 3 | var buttonElement = document.querySelector("#app button");
 4 | 
 5 | //Preenchendo a lista de Todos pegando da storage e caso esteja vazio, inserir um Array vazio
 6 | var todos = JSON.parse(localStorage.getItem("list_todos")) || [];
 7 | 
 8 | //Função que renderiza os todos.
 9 | function renderTodos() {
10 |   //limpando o html antes de renderizar novamente
11 |   //caso não limpassemos e salvasse um novo todo, toda a lista se repetiria.
12 |   listElement.innerHTML = "";
13 |   for (todo of todos) {
14 |     console.log("TCL: renderTodos -> todo", todo);
15 |     //Criando elemento li
16 |     var todoElement = document.createElement("li");
17 | 
18 |     //Criando o texto do li
19 |     var todoText = document.createTextNode(todo);
20 | 
21 |     //Criando o elemento link a
22 |     var linkElement = document.createElement("a");
23 |     linkElement.setAttribute("href", "#");
24 | 
25 |     var pos = todos.indexOf(todo);
26 | 
27 |     linkElement.setAttribute("onclick", "deleteTodo(" + pos + ")");
28 | 
29 |     //Criando to texto do link a
30 |     var linkText = document.createTextNode("Exluir");
31 | 
32 |     linkElement.appendChild(linkText);
33 | 
34 |     todoElement.appendChild(todoText);
35 | 
36 |     todoElement.appendChild(linkElement);
37 | 
38 |     listElement.appendChild(todoElement);
39 |   }
40 | }
41 | renderTodos();
42 | function addTodo() {
43 |   var todoText = inputElement.value;
44 |   console.log("TCL: addTodo -> todoText", todoText);
45 |   todos.push(todoText);
46 |   inputElement.value = "";
47 |   renderTodos();
48 |   savaToStorage();
49 | }
50 | 
51 | buttonElement.onclick = addTodo;
52 | 
53 | function deleteTodo(pos) {
54 |   todos.splice(pos, 1);
55 |   renderTodos();
56 |   savaToStorage();
57 | }
58 | 
59 | function savaToStorage() {
60 |   localStorage.setItem("list_todos", JSON.stringify(todos));
61 | }
62 | 


--------------------------------------------------------------------------------
/ExerciciosModulo4/ES6RestSpread.js:
--------------------------------------------------------------------------------
 1 | 
 2 | const user = {
 3 | 	nomes: ["Daniel", "Joãos", "Brunos", "Zyad", "Guilherme"],
 4 | 	empresa: {
 5 | 		nome: "WeeCode",
 6 | 		site: "www.weecode.com.br"
 7 | 	}
 8 | };
 9 | // Usando desestruturação do obj no primeiro nivel
10 | const { nomes } = user;
11 | console.log(nomes); // ["Daniel", "Joãos", "Bruno", "Zyad", "Guilherme"]
12 | 
13 | // É o mesmo que:
14 | const nomes1 = user.nomes;
15 | console.log(nomes1); // ["Daniel", "Joãos", "Bruno", "Zyad", "Guilherme"]
16 | // Atribuindo a outroa const no momento de desestruturação
17 | const { nomes: nomes2 } = user;
18 | 
19 | // Ops.. esqueci do Cristão pois ele está de férias.
20 | // Aplicando o Rest em um array
21 | console.log([...nomes2, "Cristian"]);
22 | 
23 | // Ou assim com Spread e rest ao mesmo tempo
24 | const novoArr = [...nomes2, "Cristian"];
25 | console.log(novoArr);
26 | 
27 | // Usando desestruturação do obj no segundo nivel (Um 'atributo' objeto dentro de um objeto)
28 | const {
29 | 	empresa: { site }
30 | } = user;
31 | console.log(site); // www.weecode.com.br


--------------------------------------------------------------------------------
/ExerciciosModulo4/ExercerciciosModulo4.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 |   <head>
 4 |     <meta charset="UTF-8" />
 5 |     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 6 |     <meta http-equiv="X-UA-Compatible" content="ie=edge" />
 7 |     <title>Document</title>
 8 |   </head>
 9 |   <body>
10 |     <div>
11 |       <ul></ul>
12 |       <input type="text" id="user" />
13 |       <button onclick="getUserRepo()">Adicionar</button>
14 |     </div>
15 |     <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
16 |     <script src="ExerciciosModulo4.js"></script>
17 |   </body>
18 | </html>
19 | 


--------------------------------------------------------------------------------
/ExerciciosModulo4/ExerciciosModulo4.js:
--------------------------------------------------------------------------------
 1 | const isMajor = idade => {
 2 |   return new Promise((resolve, reject) => {
 3 |     setTimeout(() => {
 4 |       idade >= 18 ? resolve() : reject();
 5 |     }, 2000);
 6 |   });
 7 | };
 8 | 
 9 | isMajor(8)
10 |   .then(function() {
11 |     console.log("Maior que 18");
12 |   })
13 |   .catch(function() {
14 |     console.log("Menor que 18");
15 |   });
16 | 
17 | var inputName = document.getElementById("user");
18 | var dataList = document.querySelector("ul");
19 | const getUserRepo = name => {
20 |   var user = inputName.value;
21 |   if (!user) {
22 |     renderError();
23 |     alert("Preencha o campo");
24 |   }
25 |   renderLoading();
26 |   axios
27 |     .get(`https://api.github.com/users/${user}/repos`)
28 |     .then(response => {
29 |       fillList(response.data);
30 |     })
31 |     .catch(error => {
32 |       alert("Não foi possível efetuar a busca!");
33 |       renderError(error);
34 |     });
35 | };
36 | 
37 | function renderLoading(loading) {
38 |   dataList.innerHTML = "";
39 |   var textElement = document.createTextNode("Carregando...");
40 |   var loadingElement = document.createElement("li");
41 |   loadingElement.appendChild(textElement);
42 |   dataList.appendChild(loadingElement);
43 | }
44 | 
45 | function renderError(loading) {
46 |   dataList.innerHTML = "";
47 |   var user = inputName.value;
48 |   var msgUserEmpty = !user ? "Preencha o usuário" : "Erro ao efetuar busca";
49 | 
50 |   var textElement = document.createTextNode(msgUserEmpty);
51 |   var errorElement = document.createElement("li");
52 |   errorElement.style.color = "#F00";
53 |   errorElement.appendChild(textElement);
54 |   dataList.appendChild(errorElement);
55 | }
56 | 
57 | const fillList = repositorios => {
58 |   console.log("TCL: repositorios", repositorios);
59 |   dataList.innerHTML = "";
60 | 
61 |   for (repo of repositorios) {
62 |     const reponame = document.createTextNode(repo.name);
63 |     const repoItem = document.createElement("li");
64 | 
65 |     repoItem.appendChild(reponame);
66 |     dataList.appendChild(repoItem);
67 |   }
68 | };
69 | 


--------------------------------------------------------------------------------
/LICENSE.md:
--------------------------------------------------------------------------------
1 | Copyright 2019 - Rocketseat
2 | 
3 | Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
4 | 
5 | The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
6 | 
7 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
8 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
  1 | <h1 align="center">
  2 |     <img alt="Starter" title="Javascript Starter"src=".github/logo.svg" width="200px" />
  3 | </h1>
  4 | 
  5 | <h3 align="center">
  6 |   JS Rocketseat Challenge Excercises :book:
  7 | </h3>
  8 | 
  9 | <p align="center">This project is just the final exercises of each Rocketseat Javascript course module <a href="https://skylab.rocketseat.com.br/journey/starter">JavaScript Starter</a> 🎓
 10 | </p>
 11 | 
 12 | <p align="center">
 13 |   
 14 |   <img alt="GitHub language count" src="https://img.shields.io/github/languages/count/danielobara/Javascript-Rocketseat?color=%2304D361">
 15 | 
 16 |   <a href="https://www.linkedin.com/in/danielobara/">
 17 |     <img alt="Made by DanielObara" src="https://img.shields.io/badge/made%20by-DanielObara-%2304D361">
 18 |   </a>
 19 | 
 20 |   <img alt="License" src="https://img.shields.io/badge/license-MIT-%2304D361">
 21 |   
 22 |   <a>
 23 |     <img alt="Repository size" src="https://img.shields.io/github/repo-size/danielobara/Javascript-Rocketseat.svg">
 24 |   </a>
 25 |   
 26 |   <a href="https://github.com/danielobara/Javascript-Rocketseat/commits/master">
 27 |     <img alt="GitHub last commit" src="https://img.shields.io/github/last-commit/danielobara/Javascript-Rocketseat.svg">
 28 |   </a>
 29 |    <a href="https://github.com/DanielObara/Javascript-Rocketseat/stargazers">
 30 |     <img alt="Stargazers" src="https://img.shields.io/github/stars/danielobara/Javascript-Rocketseat?style=social">
 31 |   </a>
 32 | </p>
 33 | 
 34 | ### Exercícios Módulo 01 - Introdução JavaScript :point_up:
 35 | 
 36 | :one:** exercício** :pencil:
 37 | 
 38 | Crie uma função que dado o objeto a seguir:
 39 | 
 40 | ```
 41 | var endereco = {
 42 | 		rua: "Rua dos pinheiros",
 43 | 		numero: 1293,
 44 | 		bairro: "Centro",
 45 | 		cidade: "São Paulo",
 46 | 		uf: "SP"
 47 | };
 48 | ```
 49 | 
 50 | Retorne o seguinte conteúdo:
 51 | 
 52 | `O usuário mora em São Paulo / SP, no bairro Centro, na rua "Rua dos Pinheiros" com nº 1293.`
 53 | 
 54 | :two:** exercício** :pencil:
 55 | 
 56 | Crie uma função que dado um intervalo (entre x e y) exiba todos número pares:
 57 | 
 58 | ```
 59 | function pares(x, y) {
 60 | // código aqui
 61 | }
 62 | pares(32, 321);
 63 | ```
 64 | 
 65 | :three:** exercício** :pencil:
 66 | 
 67 | Escreva uma função que verifique se o vetor de habilidades passado possui a habilidade "Javascript"
 68 | e retorna um booleano true/false caso exista ou não.
 69 | 
 70 | ```
 71 | function temHabilidade(skills) {
 72 | // código aqui
 73 | }
 74 | var skills = ["Javascript", "ReactJS", "React Native"];
 75 | temHabilidade(skills); // true ou false
 76 | ```
 77 | 
 78 | _Dica: para verificar se um vetor contém um valor, utilize o método indexOf._
 79 | 
 80 | :four:** exercício** :pencil:
 81 | 
 82 | Escreva uma função que dado um total de anos de estudo retorna o quão experiente o usuário é:
 83 | 
 84 | ```
 85 | function experiencia(anos) {
 86 | // código aqui
 87 | }
 88 | var anosEstudo = 7;
 89 | experiencia(anosEstudo);
 90 | // De 0-1 ano: Iniciante
 91 | // De 1-3 anos: Intermediário
 92 | // De 3-6 anos: Avançado
 93 | // De 7 acima: Jedi Master
 94 | ```
 95 | 
 96 | :five:** exercício** :pencil:
 97 | 
 98 | Dado o seguinte vetor de objetos:
 99 | 
100 | ```
101 | var usuarios = [
102 | {
103 | nome: "Diego",
104 | habilidades: ["Javascript", "ReactJS", "Redux"]
105 | },
106 | {
107 | nome: "Gabriel",
108 | habilidades: ["VueJS", "Ruby on Rails", "Elixir"]
109 | }
110 | ];
111 | ```
112 | 
113 | Escreva uma função que produza o seguinte resultado:
114 | 
115 | `O Diego possui as habilidades: Javascript, ReactJS, Redux O Gabriel possui as habilidades: VueJS, Ruby on Rails, Elixir`
116 | 
117 | _Dica: Para percorrer um vetor você deve utilizar a sintaxe for...of e para unir valores de um array
118 | com um separador utilize o join._
119 | 
120 | ### **Exercícios Módulo 02** - Manipulando a DOM :v:
121 | 
122 | :one:** exercício** :pencil:
123 | 
124 | Crie um botão que ao ser clicado cria um novo elemento em tela com a forma de um quadrado
125 | vermelho com 100px de altura e largura. Sempre que o botão for clicado um novo quadrado deve
126 | aparecer na tela.
127 | 
128 | :two:** exercício** :pencil:
129 | 
130 | Utilizando o resultado do primeiro desafio, toda vez que o usuário passar o mouse por cima de
131 | algum quadrado troque sua cor para uma cor aleatória gerada pela função abaixo:
132 | 
133 | ```
134 | function getRandomColor() {
135 |  var letters = "0123456789ABCDEF";
136 |  var color = "#";
137 |  for (var i = 0; i < 6; i++) {
138 |  color += letters[Math.floor(Math.random() * 16)];
139 |  }
140 |  return color;
141 | }
142 | var newColor = getRandomColor(); // #E943F0
143 | ```
144 | 
145 | :three:** exercício** :pencil:
146 | 
147 | A partir do seguinte vetor:
148 | 
149 | ```
150 | var nomes = ["Diego", "Gabriel", "Lucas"];
151 | ```
152 | 
153 | Preencha uma lista ```<ul>``` no HTML com os itens da seguinte forma:
154 | 
155 | ● Diego
156 | ● Gabriel
157 | ● Lucas
158 | 
159 | :four:** exercício** :pencil:
160 | 
161 | Seguindo o resultado do exercício anterior adicione um input em tela e um botão como a seguir:
162 | 
163 | ```
164 | <input type="text" name="nome">
165 | <button onClick="adicionar()">Adicionar</button>
166 | ```
167 | 
168 | Ao clicar no botão, a função adicionar() deve ser disparada adicionando um novo item a lista de
169 | nomes baseado no nome preenchido no input e renderizando o novo item em tela juntos aos
170 | demais itens anteriores. Além disso, o conteúdo do input deve ser apagado após o clique.
171 | 
172 | 
173 | ### **Exercícios Módulo 03** - App de ToDos :
174 | 
175 | Criado aplicativo Todo List no qual armazena os dados na localStorage. Cria e exclui itens na lista de Todo's.
176 | 
177 | 
178 | ### **Exercícios Módulo 04** - JS Assíncrono :
179 | 
180 | :one:** exercício**
181 | Crie uma função que recebe a idade de um usuário e retorna uma Promise que depois de 2
182 | segundos retornará se usuário é maior ou não que 18 anos. Se o usuário ter mais que 18 anos de
183 | idade o resultado deve cair no `.then,` caso contrário, no `.catch`
184 | 
185 | ```
186 | function checaIdade(idade) {
187 |  // Retornar uma promise
188 | }
189 | checaIdade(20)
190 |  .then(function() {
191 |  console.log("Maior que 18");
192 |  })
193 |  .catch(function() {
194 |  console.log("Menor que 18");
195 |  });
196 | 
197 | ```
198 | 
199 | :two:** exercício**
200 | Crie uma tela com um
201 | `<input>` que deve receber o nome de um usuário no Github. Após digitar o
202 | nome do usuário e clicar no botão buscar a aplicação deve buscar pela API do Github (conforme
203 | URL abaixo) os dados de repositórios do usuário e mostrá-los em tela:
204 | URL de exemplo: https://api.github.com/users/diego3g/repos
205 | Basta alterar "diego3g" pelo nome do usuário.
206 | 
207 | ```
208 | <input type="text" name="user">
209 | <button onclick="">Adicionar</button>
210 | ```
211 | 
212 | Depois de preencher o input e adicionar, a seguinte lista deve aparecer abaixo:
213 | 
214 | ```
215 | <ul>
216 |  <li>repo1</li>
217 |  <li>repo2</li>
218 |  <li>repo3</li>
219 |  <li>repo4</li>
220 |  <li>repo5</li>
221 | </ul>
222 | ```
223 | 
224 | :three:** exercício**
225 | A partir do resultado do exemplo anterior adicione um indicador de carregamento em tela no lugar
226 | da lista apenas enquanto a requisição estiver acontecendo:
227 | 
228 | ```
229 | <li>Carregando...</li>
230 | ```
231 | 
232 | Além disso, adicione uma mensagem de erro em tela caso o usuário no Github não exista.
233 | Dica: Quando o usuário não existe, a requisição irá cair no .catch com código de erro 404.
234 | 
235 | ## 🤔 Como contribuir
236 | 
237 | - Faça um fork desse repositório;
238 | - Cria uma branch com a sua feature: `git checkout -b minha-feature`;
239 | - Faça commit das suas alterações: `git commit -m 'feat: Minha nova feature'`;
240 | - Faça push para a sua branch: `git push origin minha-feature`.
241 | 
242 | Depois que o merge da sua pull request for feito, você pode deletar a sua branch.
243 | 
244 | ## :memo: Licença
245 | 
246 | Esse projeto está sob a licença MIT. Veja o arquivo [LICENSE](LICENSE.md) para mais detalhes.
247 | 


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