// Declarando variáveis em JS
const PI = 3.14; // constante
let num1 = 1234; // variável
var num2 = 4321; // modo antigo
hello = 'World'  // var global

// === indica que a variável deve ter o mesmo valor e ser do mesmo tipo
// no caso, age precisa ser o número 18, não apenas uma string '18'
if ( age >= 18 ){ 
  console.log('You can drink!!');
} else if ( age === 17 ){
  console.log('You almost can drink!!');
} else {
  console.log('You really should not drink...');
}

// ternário
console.log( x >= 18 ? 'Can drink!' : 'Cannot drink!');

// while
while( x < 3 ){
  console.log(x);
  x++;
}

// for clássico
for( x = 1; x < 3; x++ ){
  console.log(x);
}

// for parecido com each de ruby
arr = ["James", "Lars", "Robert", "Kirk"];
arr.forEach(function(name, index, array){
  console.log("Name is: " + name);
  console.log("It's index is: " + index);
  console.log("The array is: " + array)
});

// Jeito antigo
function square(x){
  return x**2;
}

// Jeito novo
const square = (x) => {
  return x**2;
}

// Jeito novo, com return implicito
const square = x => x**2;

// JSON (Javascript Object Notation)
// Nada mais é do que uma hash
const aluno = {
  name: 'Rafael',
  age:  22
}

// Conseguimos acessar as informações de um objeto
// de duas maneiras distintas
console.log(aluno['name']);
console.log(aluno.age);

// retorna o tipo do parâmetro passado
typeof(2); // => 'number'
typeof(2.1); // => 'number'

// parse de string para número, em base decimal (10)
Number.parseInt('42', 10);

// parse de número para string
(42).toString();

// upcase
'João'.toUpperCase();

// downcase
'João'.toLowerCase();

// interpolação 
// => string entre ` (backticks), código entre '${}'
family = 'Starks'
console.log(`I am team ${family}`);

// Seleciona o elemento da página que possua
// o id="banner"
banner = document.querySelector('#banner');
// ou
banner = document.getElementById('banner');

// Seleciona todos os elementos da página que
// possuam a classe 'avatar'
banner = document.querySelector('.avatar');

// O que há de texto dentro do banner?
console.log(banner.innerText);

// O que há de código HTML dentro do banner?
console.log(banner.innerHTML);

banner = document.getElementById('banner');

// cria um elemento do tipo <h1></h1>
h1 = document.createElement('h1');

// cria um elemento de texto
text = document.createElement("Hello world!");

// insere o elemento dentro de um 'pai'
h1.appendChild(text);

// insere o elemento no banner da página
banner.insertAdjacentHTML('beforeend', h1);
// Posição a declarar no primeiro parametro de 'insertAdjacentHTML'

// <!-- beforebegin -->
// <div id='banner'>
// <!-- afterbegin -->
// ..... conteúdo já existente .....
// <!-- beforeend -->
// </div>
// <!-- afterend -->

banner = document.getElementById('banner');

// cria um elemento do tipo <h1></h1>
h1 = document.createElement('h1');

// cria um elemento de texto
text = document.createElement("Hello world!");

// insere o elemento dentro de um 'pai'
h1.appendChild(text);

// insere o elemento no banner da página
banner.insertAdjacentHTML('beforeend', h1);
// Posição a declarar no primeiro parametro de 'insertAdjacentHTML'

// <!-- beforebegin -->
// <div id='banner'>
// <!-- afterbegin -->
// ..... conteúdo já existente .....
// <!-- beforeend -->
// </div>
// <!-- afterend -->

banner = banner.querySelector('#banner');

// recupera uma 'array' de classes do elemento;
banner.classList;

// adiciona uma classe ao elemento
banner.classList.add('red');
// remove uma classe do elemento, se houver
banner.classList.remove('red');
// Se há uma classe, remova-a. Se não há, adicione
banner.classList.toggle('red');

// recupera todo o estilo do elemento;
banner.style;

// esconda-o da página
banner.style.display = 'none';
// mostre-o na página
banner.style.display = 'block'; // ou qualquer outro

<div id='banner' dataset-id='123' dataset-name='joao'>
    <h1> Hello World! </h1>
    <!-- ... -->
</div>

banner = banner.querySelector('#banner');

console.log(banner.dataset.id); // => '123'
console.log(banner.dataset.name); // => 'Joao'

// element: o elemento que sofrerá a interação
// change: o tipo de interação que será feita
// func: a função a ser executada quando a interação for feita no elemento
element.addEventListener(change, func);

// quando o botão for pressionado, todas as imagens
// terão a classe 'avatar' ativada ou desativada

button = document.querySelector("#avatamize");
change = 'click';

const avatamize = () => {
  // pegue todas as imagens
  imgs = document.querySelectorAll('img');

  // para cada uma delas
  imgs.forEach((img) => {
    // ative ou desative a classe 'avatar'
    img.classList.toggle('avatar');
  });
}

// adicione o event listener ao botão
button.addEventListener(change, avatamize);

// quando um botão for pressionado, somente ele terá
// sua cor transformada para verde

buttons = document.querySelector("button");

// o event listener é adicionado a um elemento apenas
// não podemos fazer 'buttons.addEventListener...'
buttons.forEach((button) => {
  // o event listener passa como parâmetro para nossa
  // função o evento ocorrido (event)
  button.addEventListener('click', (event) => {
    console.log(event);

    // event.currentTarget nos retorna o elemento interagido
    console.log(event.currentTarget);
    event.currentTarget.style.backgroundColor = 'green';
  });
});

// Oh meu deus, é um JSON!
{
    nome: 'João',
    familia: 'Starks'
}

link = "http://localhost:8000/"
// faça a requisição e mostre a resposta dela
fetch(link).then((response) => console.log(response))

link = "http://localhost:8000/"

// Para mandar informações em Body, precisamos seguir alguns
// passos minimos:
// 1. Mudar o método (Verbo)
let method = 'POST';
// 2. Montar nosso Body em JSON
let body = {nome: 'João', familia: 'Starks'};
// 3. Transformar nosso JSON para String usando JSON.stringify
body = JSON.stringify(body)
// 4. Montar um JSON com o method e o Body criados
let info = {method: method, info: info}

// faça a requisição, passando estas informações
fetch(link, info).then((response) => console.log(response))

link = "http://localhost:8000/"

// A estrutura mais comum de um fetch é transformar
// a resposta em JSON primeiro, e então utilizá-la
fetch(link)
  .then(response => response.json())
  .then((data) => {
    // O que quisermos fazer com o que for retornado
  });