# Curso JavaScript - RocketSeat :rocket:

[toc]

## 1 Intro

Treinamento Gratuíto RocketSeat JavaScript.
***[:books: > Site do treinamento](https://rocketseat.com.br/starter/curso-gratuito-javascript)***
***[:computer: > Editor Online para testes de codigo](https://playcode.io/online-javascript-editor)***

### Variáveis e dados

var nome = 'Ice';  // string
var idade = 23;    // int
var peso = 83.5;   // float
var humano = true; // boolean

var alunos = ['ice','bergs','brow'];

var aluno = {
    nome: alunos[0],
    idade: 23,
    peso: 83.5,
    humano: true
}

console.log(alunos);
console.log(alunos[1]);

console.log(aluno);
console.log(aluno.idade);

---

### Operações matemáticas

var x = 10, y = 5;
// (* / % + - )
var resultado = x + y;

// Equivalentes...
x = x + 3;
x += 3;
// funcionam demais funcões tambem!
x *= 3;
x /= 3;
x -= 3;

x *= y;

console.log(x);

---

### Funções

function soma(numero1, numero2) {
    var resultado = numero1 + numero2;
    return resultado;
}

var continha = soma(1,2);
console.log(continha);

---

### Condicionais

function retornaSexo(sexo) {
    // if ( a == b ) // valores iguais 
    // if ( a === b ) //valores e tipos iguais
    if (sexo === 'M') {
        return 'Masculino';
    } else if (sexo === 'F') {
        return 'Feminino';
    } else {
        return 'Indefinido';
    }
 }

function retornaSexo2(sexo) { //com switch
    switch(sexo) {
    case 'M':
        return 'Masculino';
    case 'F':
        return 'Feminino';
    default:
        return 'Indefinido';
    }
}

var resultado = retornaSexo('M');
console.log(continha);

---

### Operadores Lógicos

// AND, OR, NOT

var sexo = 'M', idade = 23;

// AND
if (sexo === 'M' && idate >= 20) {
console.log('OK!');
}
// OR
if (sexo === 'M' || idate >= 20) {
console.log('OK!');
}
//NOT
if (sexo != 'M' || idate >= 20) { //apenas nao valor
console.log('OK!');
}
if (sexo !== 'M' || idate >= 20) {//apenas nao valor e tipo
console.log('OK!');
}

// populando variaveis com respostas..
var masculino;

if (sexo === 'M') {
    masculino = true;
} else {
    masculino = false;
}
// enxugando estrutura com mesmo resultado...
var masculino = (sexo === 'M');
console.log(masculino);

---

### Condição ternária

//vamos reescrever if para um 'inline' (condicao ternaria)...
var sexo = 'M';
if (sexo === 'M') {
    return 'Masculino';
} else {
    return 'Feminino';
}

// Abaixo reescrita...
var retorno = (sexo === 'M') ? 'Masculino' : 'Feminino';
console.log(retorno);

---

### Estruturas de repetição

// for, while

for (var i = 0; i <= 100; i++) {
    console.log(i);
}

var j = 0;
while (j <= 100) {
    console.log(j);
    j++;
}

---

### Intervalo e timeout

function exibeAlgo() {
    console.log('Hello World!');
}

// executa a função xxxx a cada yyy milisegundos..
setInterval(exibeAlgo,1000);

// executa a função xxxx UMA VEZ depois yyy milisegundos..
setTimeout(exibeAlgo,5000);

---

### Desafio 01 - Exercícios: Módulo 01

#### 1º exercício
Crie uma função que dado o objeto a seguir:

var endereco = {
    rua: "Rua dos pinheiros",
    numero: 1293,
    bairro: "Centro",
    cidade: "São Paulo",
    uf: "SP"
};

Retorne o seguinte conteúdo:

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

##### Solução:

 var endereco = {
    rua: "Rua dos pinheiros",
    numero: 1293,
    bairro: "Centro",
    cidade: "São Paulo",
    uf: "SP"
};
console.log(`O usuário mora em ${endereco.cidade} / ${endereco.uf}, no bairro ${endereco.bairro}, na rua ${endereco.rua}" com nº ${endereco.numero}.`);

#### 2º exercício
Crie uma função que dado um intervalo (entre x e y) exiba todos número pares:

function pares(x, y) {  
// código aqui
}

pares(32, 321);

##### Solução:

 function pares(x, y) {  
  // vamos correr nosso intervalo
  for ( var numero = x; numero <= y; numero++) {
    // vamos ver se a divisao do numero atual por 2 retorna 0(é Par)
    if ((numero % 2) === 0) {
      // vamos imprimir os pares...
      console.log(numero);  
    }
  }
}
pares(32, 321);

#### 3º exercício
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.

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

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

##### Solução:

 //Solucao didática
function temHabilidade(skills) {  
  // funcao indexOf retorna posição do array caso encontre alvo.
  var posicaoArray = skills.indexOf('Javascript');
  // vamos verificar se posição retornada >= 0 (-1 indica não encontrado!)
  if (posicaoArray >= 0) {
    return true;
  } else {
    return false;
  }
}

// Solução curta
function temHabilidade2(skills) {  
    return ( skills.indexOf('Javascript') >= 0 );
}

function temHabilidade3(skills) {
  return skills.indexOf("Javascript") !== -1;
}

var skills = ["Javascript", "ReactJS", "React Native"];

// vamos ajustar para conseguir ver saída
console.log(temHabilidade(skills));
console.log(temHabilidade2(skills));
console.log(temHabilidade3(skills));

#### 4º exercício
Escreva uma função que dado um total de anos de estudo retorna o quão experiente o usuário é:

function experiencia(anos) {  
// código aqui
}

var anosEstudo = 7;
experiencia(anosEstudo);

// De 0-1 ano: Iniciante
// De 1-3 anos: Intermediário
// De 3-6 anos: Avançado
// De 7 acima: Jedi Master

##### Solução:

 function experiencia(anos) {  
  switch(anos) {
    case 0:
    case 1:
      return 'Iniciante';
    case 2:
    case 3:
      return 'Intermediário';
    case 4:
    case 5:
    case 6:
      return 'Avançado';
    default:
      return 'Jedi Master';
  }
}

function experiencia2(anos) {
  if (anos <= 1) {
    return "Iniciante";
  } else if (anos <= 3) {
    return "Intermediário";
  } else if (anos <= 6) {
    return "Avançado";
  } else {
    return "Jedi Master";
  }
}

var anosEstudo = 7;

console.log(experiencia(anosEstudo));
console.log(experiencia2(anosEstudo));

#### 5º exercício
Dado o seguinte vetor de objetos:

var usuarios = [
    {
        nome: "Diego",
        habilidades: ["Javascript", "ReactJS", "Redux"]
    },
    {
        nome: "Gabriel",
        habilidades: ["VueJS", "Ruby on Rails", "Elixir"]
    }
];

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++.*

##### Solução:

 var usuarios = [
    {
        nome: "Diego",
        habilidades: ["Javascript", "ReactJS", "Redux"]
    },
    {
        nome: "Gabriel",
        habilidades: ["VueJS", "Ruby on Rails", "Elixir"]
    }
];

var usuario;

for (usuario of usuarios) {
    console.log(`O ${usuario.nome} possui as habilidates: ${usuario.habilidades.join(', ')}`);
}

---

## Manipulando a DOM

### Eventos Inline

<html>
  <head>
    <title>Curso Javascript</title>
  </head>
  <body>
    <div id="app">
      <button onclick="mostraAlerta()" onmouseover="mostraAlerta2()">
        Me pressione
      </button>
    </div>
    <script>
      function mostraAlerta() {
        console.log("Botao Clicado!");
      }
      function mostraAlerta2() {
        console.log("Mouse Over!");
      }
    </script>
  </body>
</html>

---

### Trabalhando com a DOM

<html>
  <head>
    <title>Curso Javascript</title>
  </head>
  <body>
    <div id="app">
      <input type="text" name="nome" id="nome" />
      <button class="botao">Adicionar</button>
    </div>
    <script>
      // Abordagens iniciais..
      var inputElement = document.getElementById("nome");
      var inputElement2 = document.getElementsByTagName("input");
      var inputElement3 = document.getElementsByTagName("input")[0]; // para retornar posicao do array direto...
      var inputElement4 = document.getElementsByClassName("botao");

      var inputElement5 = document.querySelector("body div#app input");
      var inputElement6 = document.querySelector("div#app input");
      var inputElement7 = document.querySelector("input[name=nome]"); // querySelector retorna apenas 1 item...
      var inputElement7 = document.querySelectorAll("input"); //para retornar mais de 1 item...

      console.log(inputElement);
      console.log(inputElement2);
      console.log(inputElement3);
      console.log(inputElement4);
      console.log(inputElement5);
      console.log(inputElement6);
      console.log(inputElement7);
      // FIM Abordagens iniciais..

      var btnElement = document.querySelector("button.botao");
      btnElement.onclick = function() {
        console.log("Botão clicado!");
      };
      btnElement.onmouseover = function() {
        console.log("Mouse Over!");
      };
    </script>
  </body>
</html>

---

### Lidando com Elementos

<html>
  <head>
    <title>Curso Javascript</title>
  </head>
  <body>
    <div id="app">
      <input type="text" id="nome" />
    </div>
    <script>
      // vamos criar um elemento 'a'
      var linkElement = document.createElement("a");
      //linkElement.href = "http://www.google.com"; //OU isso
      linkElement.setAttribute("href", "http://www.google.com");
      linkElement.setAttribute("title", "Site Google");

      //vamos incluir um texto em nosso 'a'
      var textElement = document.createTextNode("Acessar Site");
      linkElement.appendChild(textElement);

      // vamos incluir nosso link como filha da div app..
      var containerElement = document.querySelector("#app");
      containerElement.appendChild(linkElement);

      //vamos excluir um elemento existente na tela
      var inputElement = document.querySelector("#nome");
      containerElement.removeChild(inputElement);
    </script>
  </body>
</html>

---
### Alterando Estilos

<html>
  <head>
    <title>Curso Javascript</title>
  </head>
  <body>
    <div id="app">
      <div class="box"></div>
    </div>
    <script>
      var boxElement = document.querySelector(".box");
      boxElement.style.width = 100;
      boxElement.style.height = 100;
      boxElement.style.backgroundColor = "#f00";
    </script>
  </body>
</html>

---
### Desafio

### Exercícios: Módulo 02

#### 1º exercício
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.

##### Solução:

 <html>
  <head>
    <title>Curso Javascript</title>
  </head>
  <body>
    <div id="app">
      <button id="addBox">Adicionar Caixa</button>
    </div>
    <script>
      function adicionaBox() {
        // Vamos criar nossa caixa
        var boxElement = document.createElement("div");
        boxElement.style.width = 100;
        boxElement.style.height = 100;
        boxElement.style.backgroundColor = "#f00";
        // vamos encontrar instanciar nosso contanerElement
        var contanerElement = document.querySelector("#app");
        // vamos incluir como filho do containerElement nossas boxes
        contanerElement.appendChild(boxElement);
      }
      // vamos gerar a ação do nosso botao
      var buttonElement = document.querySelector("#addBox");
      buttonElement.onclick = adicionaBox;
    </script>
  </body>
</html>

---

#### 2º exercício
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:

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

##### Solução:

 <html>
  <head>
    <title>Curso Javascript</title>
  </head>
  <body>
    <div id="app">
      <button id="addBox">Adicionar Caixa</button>
    </div>
    <script>
      // funcao para criar nossa box
      function adicionaBox() {
        // Vamos criar nossa caixa e definir style
        var boxElement = document.createElement("div");
        boxElement.style.width = 100;
        boxElement.style.height = 100;
        boxElement.style.backgroundColor = "#f00";

        // vamos inserir acao de troca de background em caso de mouseOver
        boxElement.onmouseover = function() {
          boxElement.style.backgroundColor = getRandomColor();
        };

        // vamos encontrar instanciar nosso contanerElement
        var contanerElement = document.querySelector("#app");
        // vamos incluir como filho do containerElement nossas boxes
        contanerElement.appendChild(boxElement);
      }

      // funcao para gerar cor aleatória
      function getRandomColor() {
        var letters = "0123456789ABCDEF";
        var color = "#";
        for (var i = 0; i < 6; i++) {
          color += letters[Math.floor(Math.random() * 16)];
        }
        return color;
      }

      // vamos gerar a ação do nosso botao
      var buttonElement = document.querySelector("#addBox");
      buttonElement.onclick = adicionaBox;
    </script>
  </body>
</html>

---

#### 3º exercício
A partir do seguinte vetor:

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

Preencha uma lista (`<ul>`) no HTML com os itens da seguinte forma:
● Diego
● Gabriel
● Lucas

##### Solução:

 <html>
  <head>
    <title>Curso Javascript</title>
  </head>
  <body>
    <div id="app"></div>

    <ul id="lista"></ul>

    <script>
      // lista de nomes
      var nomes = ["Diego", "Gabriel", "Lucas"];
      var listElement = document.querySelector("#lista");

      for (nome of nomes) {
        liElement = document.createElement("li");
        textElement = document.createTextNode(nome);

        liElement.appendChild(textElement);
        listElement.appendChild(liElement);
      }
    </script>
  </body>
</html>

---

#### 4º exercício

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

<input type="text" name="nome">
<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.

##### Solução:

 <html>
  <head>
    <title>Curso Javascript</title>
  </head>
  <body>
    <div id="app"></div>

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

    <ul id="lista"></ul>

    <script>
      // lista de nomes
      var nomes = ["Diego", "Gabriel", "Lucas"];
      var listElement = document.querySelector("#lista");

      for (nome of nomes) {
        liElement = document.createElement("li");
        textElement = document.createTextNode(nome);

        liElement.appendChild(textElement);
        listElement.appendChild(liElement);
      }

      function adicionar() {
        // vamos pegar nosso encontrar nosso campo input
        var inputElement = document.querySelector("input[name=nome]");

        // vamos criar nosso li
        liElement = document.createElement("li");
        // vamos popular textnode com nosso value
        textElement = document.createTextNode(inputElement.value);
        // vamos jogar na tela
        liElement.appendChild(textElement);
        listElement.appendChild(liElement);
        // Vamos zerar campo input
        inputElement.value = null;
      }
    </script>
  </body>
</html>

---

## App ToDos
---
### Estrutura do app

index.html

<html>
  <head>
    <title>Curso Javascript - App ToDo</title>
  </head>
  <body>
    <div id="app">
        <ul>
          <li>
            Fazer café
            <a href="#">excluir</a>
          </li>
          <li>
            Estudar
            <a href="#">excluir</a>
          </li>
          <li>
            Acessar Comunidade
            <a href="#">excluir</a>
          </li>
        </ul>

        <input type="text" placeholder="Digite um ToDo" />
        <button>Adicionar</button>
    </div>
    <script src="todo.js"></script>
  </body>
</html>

todo.js

console.log('teste');

---
### iniciando aplicacao
index.html

<html>
  <head>
    <title>Curso Javascript - App ToDo</title>
  </head>
  <body>
    <div id="app">
      <ul></ul>
      <input type="text" placeholder="Digite um ToDo" />
      <button>Adicionar</button>
    </div>
    <script src="todo.js"></script>
  </body>
</html>

todo.js

var listElement = document.querySelector("#app ul");
var inputElement = document.querySelector("#app input");
var buttonElement = document.querySelector("#app button");

var todos = ["Fazer cafe", "Estudaar", "Acessar comunidade"];

---

### Renderizando ToDos
index.html

<html>
  <head>
    <title>Curso Javascript - App ToDo</title>
  </head>
  <body>
    <div id="app">
      <ul></ul>
      <input type="text" placeholder="Digite um ToDo" />
      <button>Adicionar</button>
    </div>
    <script src="todo.js"></script>
  </body>
</html>

todo.js

var listElement = document.querySelector("#app ul");
var inputElement = document.querySelector("#app input");
var buttonElement = document.querySelector("#app button");

var todos = ["Fazer cafe", "Estudar", "Acessar comunidade"];

function renderTodos() {
  for (todo of todos) {
    var todoElement = document.createElement("li");
    var todoText = document.createTextNode(todo);

    todoElement.appendChild(todoText);
    listElement.appendChild(todoElement);
  }
}

renderTodos();

---

### Criando ToDos
index.html

<html>
  <head>
    <title>Curso Javascript - App ToDo</title>
  </head>
  <body>
    <div id="app">
      <ul></ul>
      <input type="text" placeholder="Digite um ToDo" />
      <button>Adicionar</button>
    </div>
    <script src="todo.js"></script>
  </body>
</html>

todo.js

var listElement = document.querySelector("#app ul");
var inputElement = document.querySelector("#app input");
var buttonElement = document.querySelector("#app button");

var todos = ["Fazer cafe", "Estudar", "Acessar comunidade"];

function renderTodos() {
  listElement.innerHTML = "";

  for (todo of todos) {
    var todoElement = document.createElement("li");
    var todoText = document.createTextNode(todo);

    todoElement.appendChild(todoText);
    listElement.appendChild(todoElement);
  }
}

renderTodos();

function addTodo() {
  var todoText = inputElement.value;

  todos.push(todoText);
  inputElement.value = "";
  renderTodos();
}

buttonElement.onclick = addTodo;

---

### Excluindo ToDos
index.html

<html>
  <head>
    <title>Curso Javascript - App ToDo</title>
  </head>
  <body>
    <div id="app">
      <ul></ul>
      <input type="text" placeholder="Digite um ToDo" />
      <button>Adicionar</button>
    </div>
    <script src="todo.js"></script>
  </body>
</html>

todo.js

var listElement = document.querySelector("#app ul");
var inputElement = document.querySelector("#app input");
var buttonElement = document.querySelector("#app button");

var todos = ["Fazer cafe", "Estudar", "Acessar comunidade"];

function renderTodos() {
  listElement.innerHTML = "";

  for (todo of todos) {
    var todoElement = document.createElement("li");
    var todoText = document.createTextNode(todo);

    var linkElement = document.createElement("a");
    linkElement.setAttribute("href", "#");

    var pos = todos.indexOf(todo);
    linkElement.setAttribute("onclick", "deleteTodo(" + pos + ")");

    var linkText = document.createTextNode("Excluir");
    linkElement.appendChild(linkText);

    todoElement.appendChild(todoText);
    todoElement.appendChild(linkElement);

    listElement.appendChild(todoElement);
  }
}

renderTodos();

function addTodo() {
  var todoText = inputElement.value;

  todos.push(todoText);
  inputElement.value = "";
  renderTodos();
}

buttonElement.onclick = addTodo;

function deleteTodo(pos) {
  todos.splice(pos, 1);
  renderTodos();
}

---

### Salvando no Storage
index.html

<html>
  <head>
    <title>Curso Javascript - App ToDo</title>
  </head>
  <body>
    <div id="app">
      <ul></ul>
      <input type="text" placeholder="Digite um ToDo" />
      <button>Adicionar</button>
    </div>
    <script src="todo.js"></script>
  </body>
</html>

todo.js

var listElement = document.querySelector("#app ul");
var inputElement = document.querySelector("#app input");
var buttonElement = document.querySelector("#app button");

var todos = JSON.parse(localStorage.getItem("list_todos")) || [];

function renderTodos() {
  listElement.innerHTML = "";

  for (todo of todos) {
    var todoElement = document.createElement("li");
    var todoText = document.createTextNode(todo);

    var linkElement = document.createElement("a");
    linkElement.setAttribute("href", "#");

    var pos = todos.indexOf(todo);
    linkElement.setAttribute("onclick", "deleteTodo(" + pos + ")");

    var linkText = document.createTextNode("Excluir");
    linkElement.appendChild(linkText);

    todoElement.appendChild(todoText);
    todoElement.appendChild(linkElement);

    listElement.appendChild(todoElement);
  }
}

renderTodos();

function addTodo() {
  var todoText = inputElement.value;

  todos.push(todoText);
  inputElement.value = "";
  renderTodos();
  saveToStorage();
}

buttonElement.onclick = addTodo;

function deleteTodo(pos) {
  todos.splice(pos, 1);
  renderTodos();
  saveToStorage();
}

function saveToStorage() {
  localStorage.setItem("list_todos", JSON.stringify(todos));
}

---

## JS Assincrono

### Requisições AJAX

index.html

<html>
  <head>
    <title>Curso Javascript</title>
  </head>
  <body>
    <div id="app"></div>
    <script src="main.js"></script>
  </body>
</html>

main.js

var xhr = new XMLHttpRequest();

xhr.open("GET", "https://api.github.com/users/woneybranga");
xhr.send(null);

xhr.onreadystatechange = function() {
  if (xhr.readyState === 4) {
    console.log(JSON.parse(xhr.responseText));
  }
}

---
### Promisses

index.html

<html>
  <head>
    <title>Curso Javascript</title>
  </head>
  <body>
    <div id="app"></div>
    <script src="main.js"></script>
  </body>
</html>

main.js

var minhaPromisse = function() {
  return new Promise(function(resolve, reject) {
    var xhr = new XMLHttpRequest();
    xhr.open("GET", "https://api.github.com/users/woneybranga");
    xhr.send(null);

    xhr.onreadystatechange = function() {
      if (xhr.readyState === 4) {
        if (xhr.status === 200) {
          resolve(JSON.parse(xhr.responseText));
        } else {
          reject("Erro na Reqisicao");
        }
      }
    };
  });
};

minhaPromisse()
  .then(function(response) {
    console.log(response);
  })
  .catch(function(error) {
    console.warn(error);
  });

---
### Utilizando Axios

<html>
  <head>
    <title>Curso Javascript</title>
  </head>
  <body>
    <div id="app"></div>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    <script src="main.js"></script>
  </body>
</html>

axios
  .get("https://api.github.com/users/woneybranga")
  .then(function(response) {
    console.log(response);
  })
  .catch(function(error) {
    console.warn(error);
  });

---

### Desafio - Exercícios: Módulo 04

#### 1º 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==

function checaIdade(idade) {
 // Retornar uma promise
}
checaIdade(20)
 .then(function() {
 console.log("Maior que 18");
 })
 .catch(function() {
 console.log("Menor que 18");
 });

##### Solução

var checaIdade = function(idade) {
  return new Promise(function(resolve, reject) {
    if (idade >= 18) {
      resolve();
    } else {
      reject();
    }
  });
};

checaIdade(18)
  .then(function() {
    console.log("Maior que 18");
  })
  .catch(function() {
    console.log("Menor que 18");
  });

#### 2º 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.

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

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

<ul>
 <li>repo1</li>
 <li>repo2</li>
 <li>repo3</li>
 <li>repo4</li>
 <li>repo5</li>
</ul>

---
##### Solução
index.html

<html>
  <head>
    <title>Curso Javascript</title>
  </head>
  <body>
    <div id="app">
      <input type="text" name="usuario" value="woneybranga" />
      <button id="consultar">Consultar</button>
      <ul id="lista"></ul>
      <div id="erro"></div>
    </div>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    <script src="main.js"></script>
  </body>
</html>

main.js

var app = document.querySelector("#app");
var erroElement = document.querySelector("#erro");
var inputElement = document.querySelector("input[name=usuario]");
var btnElement = document.querySelector("#consultar");
var listElement = document.querySelector("#lista");

function pegaRepos(userGit) {
  axios
    .get("https://api.github.com/users/" + userGit + "/repos")
    .then(function(response) {
      listElement.innerHTML = "";
      for (iten of response.data) {
        var liElement = document.createElement("li");
        var liText = document.createTextNode(iten.name);
        liElement.appendChild(liText);
        listElement.appendChild(liElement);
      }
    })
    .catch(function(error) {
      listElement.innerHTML = "";
      var h3Element = document.createElement("h3");
      var h3Text = document.createTextNode("Erro 404!");
      h3Element.appendChild(h3Text);
      erroElement.appendChild(h3Element);
    });
}

function processaBtn() {
  listElement.innerHTML = "";
  erroElement.innerHTML = "";
  pegaRepos(inputElement.value);
}

btnElement.onclick = processaBtn;

---
#### 3º 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:

<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.
---
##### Solução
index.html

<html>
  <head>
    <title>Curso Javascript</title>
  </head>
  <body>
    <div id="app">
      <input type="text" name="usuario" value="woneybranga" />
      <button id="consultar">Consultar</button>
      <ul id="lista"></ul>
      <div id="erro"></div>
    </div>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    <script src="main.js"></script>
  </body>
</html>

main.js

var app = document.querySelector("#app");
var erroElement = document.querySelector("#erro");
var inputElement = document.querySelector("input[name=usuario]");
var btnElement = document.querySelector("#consultar");
var listElement = document.querySelector("#lista");

function pegaRepos(userGit) {
  axios
    .get("https://api.github.com/users/" + userGit + "/repos")
    .then(function(response) {
      listElement.innerHTML = "";
      for (iten of response.data) {
        var liElement = document.createElement("li");
        var liText = document.createTextNode(iten.name);
        liElement.appendChild(liText);
        listElement.appendChild(liElement);
      }
    })
    .catch(function(error) {
      listElement.innerHTML = "";
      var h3Element = document.createElement("h3");
      var h3Text = document.createTextNode("Erro 404!");
      h3Element.appendChild(h3Text);
      erroElement.appendChild(h3Element);
    });
}

function processaBtn() {
  listElement.innerHTML = "";
  erroElement.innerHTML = "";
  tagCarregando();
  pegaRepos(inputElement.value);
}

function tagCarregando() {
  var liElement = document.createElement("li");
  var liText = document.createTextNode("Carregando...");
  liElement.appendChild(liText);
  listElement.appendChild(liElement);
}

btnElement.onclick = processaBtn;

---