https://github.com/anabrtorres/javascript-rocketseat

Exercises from JavaScript Starter course | Rocketseat 🖥️🚀
https://github.com/anabrtorres/javascript-rocketseat

html javascript javascript-rocketseat rocketseat

Last synced: 8 months ago
JSON representation

Exercises from JavaScript Starter course | Rocketseat 🖥️🚀

• Host: GitHub
• URL: https://github.com/anabrtorres/javascript-rocketseat
• Owner: anabrtorres
• Created: 2020-09-24T23:44:12.000Z (over 5 years ago)
• Default Branch: master
• Last Pushed: 2020-11-02T14:02:20.000Z (over 5 years ago)
• Last Synced: 2025-03-16T23:24:29.693Z (12 months ago)
• Topics: html, javascript, javascript-rocketseat, rocketseat
• Language: JavaScript
• Homepage: https://app.rocketseat.com.br/starter
• Size: 52.7 KB
• Stars: 2
• Watchers: 1
• Forks: 0
• Open Issues: 1
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

          
# JavaScript | Rocketseat

Exercises from Module 1 to 4 of the Rocketseat JavaScript Starter 🖥️🚀




Introdução JavaScript

Manipulando a DOM

App de To-Dos

JS Assíncrono



Módulo 01 - Introdução JavaScript 

Exercício #1

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" com nº 1293.


Exercício #2

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);



Exercício #3

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.


Exercício #4

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



Exercício #5

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.


Módulo 02 - Manipulando a DOM

Exercício #1

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.


Exercício #2

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



Exercício #3

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



Exercício #4

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="add()" > 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.




Módulo 03 - App de To-Dos 



Exercício #1

Faça uma lista de to-do com os seguintes elementos:

var todos = [

    'Fazer café',

    'Estudar Javascrpt',

    'Acesar curriculo'

];



Exercício #2

Faça a renderização dos to-dos utilizando uma função.

function renderTodos() {

    // Renderize os to-dos

}renderTodos();



Exercício #3

Adicione um input e um button para adicionar novos to-dos à lista quando o botão é clicado.

function addTodo() {

    // Adicione um to-do

}buttonElement.onclick = addTodo;



Exercício #4

Inclua a função de deletar to-dos quando selecionado.

function deleteTodo(pos) {

    // Delete um to-do

}



Exercício #5

Salve os dados no armazenamento local usando o Storage.

function saveToStorage() {    

    // Salve no Storage

}



Módulo 04 - JS Assíncrono

Exercício #1

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");

 });



Exercício #2

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 >


Exercício #3

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.