├── .gitignore
├── DOM
├── dark-mode-exercicio.gif
├── index.html
├── README.md
└── assets
│ ├── js
│ └── scripts.js
│ └── css
│ └── styles.css
├── modulos
├── atividade
│ ├── index.html
│ ├── main.mjs
│ ├── funcoes.mjs
│ └── README.md
├── imports-dinamicos
│ ├── modules
│ │ └── metodos.js
│ ├── main.js
│ ├── index.html
│ └── README.md
└── README.md
├── javascript-assincrono
├── api-cats.gif
├── projeto-html
│ ├── assets
│ │ ├── js
│ │ │ └── scripts.js
│ │ └── css
│ │ │ └── styles.css
│ └── index.html
├── README.md
└── LICENSE
├── map-filter-reduce
├── map
│ ├── semThis.js
│ └── comThis.js
├── reduce
│ ├── somaNumeros.js
│ └── calculaSaldo.js
├── filter
│ └── filtraPares.js
└── README.md
├── introducao-ao-javascript
├── to-do list
│ ├── assets
│ │ ├── exemplo.png
│ │ ├── styles.css
│ │ └── scripts.js
│ ├── index.html
│ └── README.md
├── README.md
└── contador
│ ├── assets
│ ├── scripts.js
│ └── styles.css
│ ├── README.md
│ └── index.html
├── orientacao-a-objetos
├── index.html
├── README.md
└── ContaBancaria.js
├── colecoes
├── sets.js
├── maps.js
└── README.md
├── README.md
├── funcoes
├── this.js
├── alunosAprovados.js
└── README.md
├── variaveis-e-tipos
├── substituiPares.js
├── palindromo.js
└── README.md
├── sintaxe-e-operadores
├── README.md
└── comparaNumeros.js
└── debug-error
├── validaArrays.js
└── README.md
/.gitignore:
--------------------------------------------------------------------------------
1 | playground.js
--------------------------------------------------------------------------------
/DOM/dark-mode-exercicio.gif:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/stebsnusch/basecamp-javascript/HEAD/DOM/dark-mode-exercicio.gif
--------------------------------------------------------------------------------
/modulos/atividade/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
--------------------------------------------------------------------------------
/javascript-assincrono/api-cats.gif:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/stebsnusch/basecamp-javascript/HEAD/javascript-assincrono/api-cats.gif
--------------------------------------------------------------------------------
/modulos/imports-dinamicos/modules/metodos.js:
--------------------------------------------------------------------------------
1 | function paintRed(el) {
2 | el.style.backgroundColor = 'red';
3 | }
4 |
5 | export { paintRed };
6 |
--------------------------------------------------------------------------------
/map-filter-reduce/map/semThis.js:
--------------------------------------------------------------------------------
1 | const array = [1, 2, 3, 4, 5];
2 |
3 | console.log(array.map((item) => item * 2));
4 |
5 | console.log(array);
6 |
--------------------------------------------------------------------------------
/introducao-ao-javascript/to-do list/assets/exemplo.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/stebsnusch/basecamp-javascript/HEAD/introducao-ao-javascript/to-do list/assets/exemplo.png
--------------------------------------------------------------------------------
/orientacao-a-objetos/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 | Teste Conta Bancária
4 |
5 |
6 |
7 |
8 |
9 |
--------------------------------------------------------------------------------
/colecoes/sets.js:
--------------------------------------------------------------------------------
1 | function uniqueElements(array) {
2 | let unique = new Set(array);
3 | return [...unique];
4 | }
5 |
6 | const arr = [30, 30, 40, 5, 223, 2049, 3034, 5];
7 |
8 | console.log(uniqueElements(arr));
9 |
--------------------------------------------------------------------------------
/modulos/README.md:
--------------------------------------------------------------------------------
1 | # Módulos
2 |
3 | Este repositório contém a atividade prática do Curso "Módulos", que faz parte do Basecamp de Javascript que minstrei pela [Digital Innovation One](https://digitalinnovation.one/).
4 |
--------------------------------------------------------------------------------
/introducao-ao-javascript/README.md:
--------------------------------------------------------------------------------
1 | # Introdução ao Javascript
2 |
3 | Projetos referentes ao curso "Introdução ao Javascript" que ministrei pela [Digital Innovation One](https://digitalinnovation.one/).
4 |
5 | - To-do List
6 | - Contador
7 |
--------------------------------------------------------------------------------
/map-filter-reduce/reduce/somaNumeros.js:
--------------------------------------------------------------------------------
1 | function somaNumeros(arr) {
2 | if (!arr || !arr.length) return;
3 | const soma = arr.reduce((prev, curr) => prev + curr);
4 |
5 | return soma;
6 | }
7 |
8 | console.log(somaNumeros([1, 1, 1, 3]));
9 |
--------------------------------------------------------------------------------
/map-filter-reduce/filter/filtraPares.js:
--------------------------------------------------------------------------------
1 | function filtraPares(arr) {
2 | if (!arr || !arr.length) return;
3 |
4 | const filteredArr = arr.filter((item) => item % 2 === 0);
5 |
6 | return filteredArr;
7 | }
8 |
9 | console.log(filtraPares([1, 2, 3, 4]));
10 |
--------------------------------------------------------------------------------
/modulos/atividade/main.mjs:
--------------------------------------------------------------------------------
1 | import { mostraIdade, mostraCidade, mostraHobby } from './funcoes.mjs';
2 |
3 | console.log(mostraIdade('Marina', 20));
4 |
5 | console.log(mostraCidade('Silvia', 'São Paulo'));
6 |
7 | console.log(mostraHobby('Carol', 'Ouvir música'));
8 |
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | # Basecamp Javascript
2 |
3 | O basecampt de Javascript é uma iniciativa da [Digital Innovation One](https://digitalinnovation.one/) para ensinar os pilares da linguagem e seus conceitos mais básicos.
4 |
5 | Neste repositório, você encontrará as atividades práticas de todos os cursos que ministrei para a iniciativa.
6 |
--------------------------------------------------------------------------------
/map-filter-reduce/map/comThis.js:
--------------------------------------------------------------------------------
1 | const orange = {
2 | price: 2,
3 | };
4 |
5 | const apple = {
6 | price: 1.5,
7 | };
8 |
9 | function mapArray() {
10 | const array = [1, 2, 3, 4, 5];
11 |
12 | return array.map(function (item) {
13 | return item * this.price;
14 | }, apple);
15 | }
16 |
17 | console.log(mapArray());
18 |
--------------------------------------------------------------------------------
/modulos/atividade/funcoes.mjs:
--------------------------------------------------------------------------------
1 | export function mostraIdade(nome, idade) {
2 | return `A idade de ${nome} é ${idade}.`;
3 | }
4 |
5 | export function mostraCidade(nome, cidade) {
6 | return `A idade de ${nome} é ${cidade}.`;
7 | }
8 |
9 | export function mostraHobby(nome, hobby) {
10 | return `A idade de ${nome} é ${hobby}!`;
11 | }
12 |
--------------------------------------------------------------------------------
/modulos/imports-dinamicos/main.js:
--------------------------------------------------------------------------------
1 | const btn = document.getElementById('myBtn');
2 | const body = document.getElementsByTagName('body')[0];
3 |
4 | const listener = function () {
5 | btn.addEventListener('click', async () => {
6 | const { paintRed } = await import('./modules/metodos.js');
7 |
8 | paintRed(body);
9 | });
10 | };
11 |
12 | listener();
13 |
--------------------------------------------------------------------------------
/introducao-ao-javascript/contador/assets/scripts.js:
--------------------------------------------------------------------------------
1 | let count = 0;
2 |
3 | const CURRENT_NUMBER = document.getElementById('currentNumber');
4 |
5 | function increment() {
6 | count++;
7 | CURRENT_NUMBER.innerHTML = count;
8 | }
9 |
10 | function decrement() {
11 | count--;
12 | CURRENT_NUMBER.innerHTML = count;
13 | }
14 |
15 | function test() {
16 | kdowkdpo;
17 | }
18 |
--------------------------------------------------------------------------------
/modulos/imports-dinamicos/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 | Document
8 |
9 |
10 | Clique aqui
11 |
12 |
13 |
14 |
--------------------------------------------------------------------------------
/funcoes/this.js:
--------------------------------------------------------------------------------
1 | function calculaIdade(anos) {
2 | return `Daqui a ${anos} anos, ${this.nome} terá ${
3 | this.idade + anos
4 | } anos de idade.`;
5 | }
6 |
7 | const pessoa1 = {
8 | nome: 'Amelia',
9 | idade: 23,
10 | };
11 |
12 | const pessoa2 = {
13 | nome: 'Márcia',
14 | idade: 20,
15 | };
16 |
17 | const pessoa3 = {
18 | nome: 'Jonas',
19 | idade: 13,
20 | };
21 |
22 | console.log(calculaIdade.call(pessoa3, 40));
23 | console.log(calculaIdade.apply(pessoa2, [24]));
24 |
--------------------------------------------------------------------------------
/colecoes/maps.js:
--------------------------------------------------------------------------------
1 | const getAdmins = (map) => {
2 | let admins = [];
3 |
4 | for ([key, value] of map) {
5 | if (value === 'ADMIN') {
6 | admins.push(key);
7 | }
8 | }
9 |
10 | return admins;
11 | };
12 |
13 | const userRoles = new Map();
14 |
15 | userRoles.set('Stephany', 'SUDO');
16 | userRoles.set('Luiz', 'ADMIN');
17 | userRoles.set('Elvira', 'ADMIN');
18 | userRoles.set('Carolina', 'USER');
19 | userRoles.set('Guilherme', 'USER');
20 |
21 | console.log(getAdmins(userRoles));
22 |
--------------------------------------------------------------------------------
/variaveis-e-tipos/substituiPares.js:
--------------------------------------------------------------------------------
1 | function substituiNumerosPares(array) {
2 | if (!array.length) return console.log(-1);
3 |
4 | const naoZero = (num) => num !== 0;
5 | const numPar = (num) => num % 2 === 0;
6 |
7 | for (let i = 0; i < array.length; i++) {
8 | if (numPar(array[i]) && naoZero(array[i])) {
9 | console.log(`trocando ${array[i]} por 0...`);
10 | array[i] = 0;
11 | } else if (!naoZero(array[i])) {
12 | console.log('Ops, você já vale 0!');
13 | }
14 | }
15 | console.log(array);
16 | }
17 |
18 | substituiNumerosPares([2, 0, 3, 5]);
19 |
--------------------------------------------------------------------------------
/map-filter-reduce/reduce/calculaSaldo.js:
--------------------------------------------------------------------------------
1 | function calculaSaldo(saldo, itens) {
2 | if (!saldo || !itens || !itens.length) return 'Envie todos os parâmetros';
3 |
4 | const saldoFinal = itens.reduce((acc, item) => acc - item.preco, saldo);
5 |
6 | return `O saldo final será de ${saldoFinal} reais`;
7 | }
8 |
9 | lista = [
10 | {
11 | preco: 2,
12 | nome: 'maçã',
13 | },
14 | {
15 | preco: 30,
16 | nome: 'roupa',
17 | },
18 | {
19 | preco: 25,
20 | nome: 'carne',
21 | },
22 | ];
23 |
24 | saldo = 100;
25 |
26 | console.log(calculaSaldo(saldo, lista));
27 |
--------------------------------------------------------------------------------
/variaveis-e-tipos/palindromo.js:
--------------------------------------------------------------------------------
1 | // solução 1
2 | function verificaPalindromo(string) {
3 | if (!string) return;
4 | console.log(string === string.split('').reverse().join(''));
5 | }
6 | verificaPalindromo('cat');
7 |
8 | // solução 2
9 |
10 | function varificaPalindromo2(string) {
11 | if (!string) return;
12 | if (!string.length) return;
13 |
14 | for (var i = 0; i < string.length / 2; i++) {
15 | if (string[i] !== string[string.length - 1 - i]) {
16 | return console.log(false);
17 | }
18 | }
19 | return console.log(true);
20 | }
21 |
22 | varificaPalindromo2('asa');
23 |
--------------------------------------------------------------------------------
/javascript-assincrono/projeto-html/assets/js/scripts.js:
--------------------------------------------------------------------------------
1 | const BASE_URL = 'https://thatcopy.pw/catapi/rest/';
2 |
3 | const getCats = async () => {
4 | try {
5 | const data = await fetch(BASE_URL);
6 | const json = await data.json();
7 | return json.webpurl;
8 | } catch (e) {
9 | console.log(e.message);
10 | }
11 | };
12 |
13 | const loadImg = async () => {
14 | const img = document.getElementsByTagName('img')[0];
15 | img.src = await getCats();
16 | };
17 |
18 | loadImg();
19 |
20 | const btn = document.getElementById('change-cat');
21 | btn.addEventListener('click', loadImg);
22 |
--------------------------------------------------------------------------------
/funcoes/alunosAprovados.js:
--------------------------------------------------------------------------------
1 | const alunos = [
2 | {
3 | nome: 'João',
4 | nota: 5,
5 | turma: '1B',
6 | },
7 | {
8 | nome: 'Sofia',
9 | nota: 9,
10 | turma: '1B',
11 | },
12 | {
13 | nome: 'Paulo',
14 | nota: 6,
15 | turma: '2C',
16 | },
17 | ];
18 |
19 | function alunosAprovados(alunos, media) {
20 | let aprovados = [];
21 |
22 | for (let i = 0; i < alunos.length; i++) {
23 | let { nota, nome } = alunos[i];
24 |
25 | if (nota >= media) {
26 | aprovados.push(nome);
27 | }
28 | }
29 |
30 | return aprovados;
31 | }
32 |
33 | console.log(alunosAprovados(alunos, 5));
34 |
--------------------------------------------------------------------------------
/javascript-assincrono/projeto-html/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 | Just... cats!
9 |
10 |
11 |
12 | Just... cats!
13 | Change cat
15 |
16 |
17 |
18 |
19 |
--------------------------------------------------------------------------------
/modulos/imports-dinamicos/README.md:
--------------------------------------------------------------------------------
1 | # Imports Dinâmicos
2 |
3 | Os imports dinâmicos não foram abordados no curso de "Módulos" porque é necessário que você tenha conhecimento prévio de Javascript Assíncrono. Sendo assim, recomendo que você volte neste repositório após completar o curso de Javascript Assíncrono que também faz parte deste Basecamp.
4 |
5 | ## Exercício
6 |
7 | Este exercício serve apenas como um exemplo de como utilizar módulos **por demanda**. Na nossa página HTML, ao clicar no botão, o fundo da página fica vermelho.
8 |
9 | Não se esqueça de utilizar a extensão "Live Server" caso você vá tentar realizar este desafio!
10 |
--------------------------------------------------------------------------------
/DOM/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 | Dark mode and Light Mode
9 |
10 |
11 |
12 | Light Mode ON
13 | Dark Mode
14 |
15 |
16 | Basecamp Javascript @ Digital Innovation One
17 |
18 |
19 |
20 |
--------------------------------------------------------------------------------
/introducao-ao-javascript/contador/README.md:
--------------------------------------------------------------------------------
1 | # Contador
2 | Neste projeto, iremos fazer a nossa primeira integração de um código Javascript com uma página HTML.
3 |
4 | ## Dicas
5 | Caso você queira ir além, aqui estão algumas dicas de coisas para tentar:
6 |
7 | 1. Tente implementar os eventos usando o método `addEventListener`.
8 | 2. Crie condicionais que desabilitam o botão de incrementar ou decrementar quando `count` chegar a um determinado valor *(ex.: 0 <= count =< 10)*.
9 | 3. Mude a cor do texto em `CURRENT_NUMBER` para vermelho quando o número for negativo.
10 |
11 | ## Bons estudos!
12 | Não esqueça de publicar a sua versão do projeto no seu Github também! :smile:
--------------------------------------------------------------------------------
/DOM/README.md:
--------------------------------------------------------------------------------
1 | # Manipulando o DOM
2 |
3 | Projeto referente ao curso "Manipulando o DOM" que ministrei pela [Digital Innovation One](https://digitalinnovation.one/).
4 |
5 | ## Atividade: Light Mode/Dark Mode
6 |
7 | 1. Crie uma estrutura básica de projeto front-end (HTML, CSS e JS)
8 | 2. Copie o HTML e o CSS deste repositório
9 | 3. Crie um arquivo chamado `scripts.js` na sua pasta `assets/js`
10 | 4. Selecione os elementos: `h1`, `button`, `footer` e `body`
11 | 5. Se os elementos possuirem a classe `dark-mode`, modifique seus estilos. Caso contrário, volte os estilos para o original
12 |
13 | ## Exemplo
14 |
15 | 
16 |
--------------------------------------------------------------------------------
/javascript-assincrono/README.md:
--------------------------------------------------------------------------------
1 | # Javascript Assíncrono
2 |
3 | Este repositório contém a atividade prática do Curso "Javascript Assíncrono", que faz parte do Basecamp de Javascript que minstrei pela [Digital Innovation One](https://digitalinnovation.one/).
4 |
5 | ## Atividade: API "catAPI"
6 |
7 | Nesta atividade, vamos criar uma página que carrega fotos aleatórias de gatinhos sempre que clicamos em um botão.
8 |
9 | 1. Utilize a API `https://thatcopy.pw/catapi/rest` para fazer as chamadas com o método `fetch()`;
10 | 2. Utilize seus conhecimentos na manipulação do DOM para criar a imagem e ativar o evento de clique do botão!
11 |
12 | ## Demo
13 |
14 | 
15 |
--------------------------------------------------------------------------------
/introducao-ao-javascript/contador/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 | Contador
8 |
9 |
10 | Olá, mundo!
11 | Este é o meu primeiro projeto Javascript.
12 |
13 | -
14 | 0
15 | +
16 |
17 |
18 |
19 |
--------------------------------------------------------------------------------
/introducao-ao-javascript/to-do list/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 | To-do list
8 |
9 |
10 | To-do list
11 |
18 |
19 |
20 |
--------------------------------------------------------------------------------
/map-filter-reduce/README.md:
--------------------------------------------------------------------------------
1 | # Map, Filter e Reduce
2 |
3 | Este repositório contém a atividade prática do Curso "Map, Filter e Reduce", que faz parte do Basecamp de Javascript que minstrei pela [Digital Innovation One](https://digitalinnovation.one/).
4 |
5 | ## Atividades
6 |
7 | ### Map
8 | - Pratique a sintaxe de multiplicação de números, uma vez utilizando o parâmetro `this` de um objeto criado por você, e depois sem ele.
9 |
10 | ### Filter
11 | - Filtre e retorne todos os números pares de um array.
12 |
13 | ### Reduce
14 | 1. Some todos os números de um array
15 | 2. Crie uma função que recebe uma lista de preços e um número representando o saldo disponível. Calcule qual será o saldo final após subtrair todos os preços da lista enviada.
--------------------------------------------------------------------------------
/sintaxe-e-operadores/README.md:
--------------------------------------------------------------------------------
1 | # Sintaxe e Operadores
2 |
3 | Este repositório contém a atividade prática do Curso "Sintaxe e Operadores", que faz parte do Basecamp de Javascript que minstrei pela [Digital Innovation One](https://digitalinnovation.one/).
4 |
5 | ## Atividade
6 |
7 | - Crie uma função que recebe dois números como parâmetros.
8 | - Confira se os números são iguais.
9 | - Confira se a soma dos números é maior que 10 ou menor que 20.
10 | - Retorne uma string dizendo "Os números `num1` e `num2` não/são iguais. Sua soma é `soma`, que é `maior/menor` que 10 e `maior/menor` que 20".
11 |
12 | Exemplo:
13 |
14 | ```
15 | Input: 1, 2
16 | Output: Os números 1 e 2 não são iguais. Sua soma é 3, que é menor que 10 e menor que 20.
17 | ```
18 |
--------------------------------------------------------------------------------
/variaveis-e-tipos/README.md:
--------------------------------------------------------------------------------
1 | # Variáveis e Tipos
2 |
3 | Neste repositório você encontrará a atividade prática proposta pelo curso "Variáveis e Tipos" do Basecamp de Javascript que ministrei pela Digital Innovation One.
4 |
5 | ## Atividade 1
6 |
7 | Verifique, de duas maneiras diferentes entre si, se uma String é um palíndromo.
8 |
9 | _Palíndromo: frase ou palavra que se pode ler, indiferentemente, da esquerda para a direita ou vice-versa (ex.: raiar, ama, ovo, radar)_
10 |
11 | ## Atividade 2
12 |
13 | Troque todos os elementos pares e diferentes de zero de um array pelo número 0. Se o array for vazio, retorne -1.
14 |
15 | Exemplo:
16 | Input -> [1, 3, 4, 6, 80, 33, 23, 90]
17 |
18 | Output -> [1, 3, 0, 0, 0, 33, 23, 0]
19 |
20 | Input -> []
21 |
22 | Output -> -1
23 |
--------------------------------------------------------------------------------
/javascript-assincrono/projeto-html/assets/css/styles.css:
--------------------------------------------------------------------------------
1 | @import url('https://fonts.googleapis.com/css2?family=Quicksand:wght@400;500;600&display=swap');
2 |
3 | body {
4 | display: flex;
5 | align-items: center;
6 | justify-content: center;
7 | font-family: 'Quicksand', sans-serif;
8 | height: 100vh;
9 | margin: 0;
10 | background-color: beige;
11 | }
12 |
13 | img {
14 | max-width: 600px;
15 | border-radius: 30px;
16 | }
17 |
18 | main {
19 | text-align: center;
20 | }
21 |
22 | button {
23 | border: 0;
24 | font-size: 1.2rem;
25 | font-weight: 500;
26 | padding: 16px;
27 | background: orangered;
28 | color: white;
29 | margin: 20px 0;
30 | cursor: pointer;
31 | transition: all 0.5s ease-in-out;
32 | }
33 |
34 | button:hover {
35 | background: orange;
36 | }
37 |
--------------------------------------------------------------------------------
/colecoes/README.md:
--------------------------------------------------------------------------------
1 | # Coleções Chaveadas
2 |
3 | Este repositório contém a atividade prática do Curso "Coleções Chaveadas", que faz parte do Basecamp de Javascript que minstrei pela [Digital Innovation One](https://digitalinnovation.one/).
4 |
5 | ## Atividade 1: Maps
6 |
7 | Crie uma função que retorna o nome dos membros de um Map que tem o papel 'ADMIN' no sistema.
8 |
9 | 1. Crie uma função `getAdmins` que recebe um `Map`;
10 | 2. Crie um Map e popule-o com nomes de usuários e seus papeis no sistema. (Ex: 'Luiz' => 'Admin');
11 | 3. Dentro de `getAdmins`, utilize o loop `for...of` para retornar uma lista com os nomes dos usu;arios que são administradores.
12 |
13 | ## Atividade 2: Sets
14 |
15 | Dado o array `[30, 30, 40, 5, 223, 2049, 3034, 5]`, retorne outro array apenas com valores únicos.
16 |
--------------------------------------------------------------------------------
/introducao-ao-javascript/to-do list/README.md:
--------------------------------------------------------------------------------
1 | # To-do list
2 |
3 | Neste projeto, iremos criar uma simples lista de tarefas.
4 |
5 | ## Instruções
6 |
7 | Antes de clonar o projeto, tente fazer seguindo as instruções abaixo:
8 |
9 | 1. Crie um campo de `input` de texto e um botão para adicionar a tarefa à lista;
10 | 2. Quando o botão for pressionado, o texto deve aparecer na lista com um `checkbox` ao lado;
11 | 3. Quando o usuário selecionar o checkbox, o item correspondente deve ficar com o texto riscado. _(ex.: ~~tarefa completa~~. dica: você pode resolver isso facilmente com CSS)_
12 |
13 | O resultado esperado é parecido com este:
14 |
15 | 
16 |
17 | ## Bons estudos!
18 |
19 | Não esqueça de publicar a sua versão do projeto no seu Github também! :smile:
20 |
--------------------------------------------------------------------------------
/debug-error/validaArrays.js:
--------------------------------------------------------------------------------
1 | function validaArrays(arr, num) {
2 | try {
3 | if (!arr && !num) throw new ReferenceError('Envie os parâmetros!');
4 |
5 | if (typeof arr !== 'object')
6 | throw new TypeError('Envie um elemento do tipo Array!');
7 |
8 | if (typeof num !== 'number')
9 | throw new TypeError('Envie um elemento do tipo Number!');
10 |
11 | if (arr.length !== num) throw new RangeError('Tamanho do array inválido!');
12 |
13 | return arr;
14 | } catch (e) {
15 | if (e instanceof RangeError) {
16 | console.log('RangeError!');
17 | console.log(e.stack);
18 | } else if (e instanceof ReferenceError) {
19 | console.log('ReferenceError!');
20 | console.log(e.stack);
21 | } else {
22 | console.log('Outro tipo de erro!');
23 | console.log(e.stack);
24 | }
25 | }
26 | }
27 |
28 | console.log(validaArrays([1, 2, 3], 0));
29 |
--------------------------------------------------------------------------------
/introducao-ao-javascript/contador/assets/styles.css:
--------------------------------------------------------------------------------
1 | @import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;600&display=swap');
2 |
3 | * {
4 | font-family: 'Open Sans', sans-serif;
5 | }
6 |
7 | body {
8 | display: flex;
9 | align-items: center;
10 | justify-content: center;
11 | flex-direction: column;
12 | background-color: rgb(177, 225, 255);
13 | }
14 |
15 | button {
16 | height: 40px;
17 | width: 40px;
18 | border-radius: 50%;
19 | border: 2px solid lightcoral;
20 | background-color: rgb(241, 214, 214);
21 | color: lightcoral;
22 | font-size: 16pt;
23 | font-weight: 600;
24 | text-align: center;
25 | }
26 |
27 | #counter {
28 | display: flex;
29 | }
30 |
31 | #currentNumber {
32 | display: flex;
33 | align-items: center;
34 | margin: 0 20px;
35 | font-size: 16pt;
36 | }
--------------------------------------------------------------------------------
/funcoes/README.md:
--------------------------------------------------------------------------------
1 | # Funções
2 |
3 | Projetos referentes ao curso "Funções" que ministrei pela [Digital Innovation One](https://digitalinnovation.one/).
4 |
5 | ## Atividade 1: Alunos Aprovados
6 |
7 | 1. Crie uma função que recebe o array `alunos` e um número que irá representar a média final;
8 | 2. Percorra o array e popule um novo array auxiliar apenas com os alunos cujas notas são maiores ou iguais à média final;
9 | 3. Utilize a técnica "object destructuring" para manipular as propriedades desejadas de cada aluno.
10 |
11 | ## Atividade 2: This
12 |
13 | Dada a função `calculaIdade`, utilize os métodos call e apply para modificar o valor de `this`. Crie seus próprios objetos para esta atividade!
14 |
15 | ```js
16 | function calculaIdade(anos) {
17 | return `Daqui a ${anos} anos, ${this.nome} terá ${
18 | this.idade + anos
19 | } anos de idade.`;
20 | }
21 | ```
22 |
--------------------------------------------------------------------------------
/modulos/atividade/README.md:
--------------------------------------------------------------------------------
1 | # Atividade
2 |
3 | Esta atividade tem como objetivo que você veja **no console do seu navegador** como os módulos funcionam.
4 |
5 | 1. Instale a extensão "Live Server" no seu VSCode;
6 | 2. Crie um arquivo com uma estrutura HTML padrão;
7 | 3. Crie dois arquivos `.js` ou `.mjs`, um chamado `funcoes` e outro chamado `main`;
8 | 4. No arquivo `funcoes`:
9 | 1. Crie uma função chamada `mostraIdade`, que recebe `nome` e `idade` e retorna a string: `A idade de ${nome} é ${idade}`;
10 | 2. Siga o mesmo padrão para outras funções como `mostraCidade` e `mostraHobby`;
11 | 3. Exporte estas funções.
12 | 5. No arquivo `main`:
13 | 1. Importe as funções do arquivo `funcoes`;
14 | 2. Faça a chamada de todas elas;
15 | 6. Utilizando a extensão "Live Server", abra o seu navegador e veja no console que as informações foram logadas corretamente.
16 |
--------------------------------------------------------------------------------
/sintaxe-e-operadores/comparaNumeros.js:
--------------------------------------------------------------------------------
1 | function comparaNumeros(num1, num2) {
2 | const primeiraFrase = criaPrimeiraFrase(num1, num2);
3 | const segundaFrase = criaSegundaFrase(num1, num2);
4 |
5 | return `${primeiraFrase} ${segundaFrase}`;
6 | }
7 |
8 | function criaPrimeiraFrase(num1, num2) {
9 | let primeiraFrase = `Os números ${num1} e ${num2}`;
10 | let simNao = 'não';
11 |
12 | if (num1 === num2) {
13 | simNao = '';
14 | }
15 |
16 | return `${primeiraFrase} ${simNao} são iguais.`;
17 | }
18 |
19 | function criaSegundaFrase(num1, num2) {
20 | const soma = num1 + num2;
21 | let comparaDez = 'menor';
22 | let comparaVinte = 'menor';
23 |
24 | if (soma > 10) {
25 | comparaDez = 'maior';
26 | }
27 |
28 | if (soma > 20) {
29 | comparaVinte = 'maior';
30 | }
31 |
32 | return `Sua soma é ${soma}, que é ${comparaDez} do que 10 e ${comparaVinte} do que 20.`;
33 | }
34 |
35 | console.log(comparaNumeros(10, 10));
36 |
--------------------------------------------------------------------------------
/introducao-ao-javascript/to-do list/assets/styles.css:
--------------------------------------------------------------------------------
1 | @import url("https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;600&display=swap");
2 |
3 | * {
4 | font-family: "Open Sans", sans-serif;
5 | }
6 |
7 | body {
8 | display: flex;
9 | align-items: center;
10 | justify-content: center;
11 | flex-direction: column;
12 | }
13 |
14 | button {
15 | border: 1px solid rgb(105, 197, 255);
16 | border-radius: 5px;
17 | background-color: rgb(227, 248, 255);
18 | color: rgb(105, 197, 255);
19 | text-align: center;
20 | padding: 5px;
21 | }
22 |
23 | input[type="text"] {
24 | padding: 5px;
25 | border-radius: 5px;
26 | border: 1px solid black;
27 | }
28 |
29 | #tasks {
30 | display: flex;
31 | flex-direction: column;
32 | margin-top: 20px;
33 | }
34 |
35 | .task-item {
36 | display: flex;
37 | align-items: center;
38 | margin-bottom: 10px;
39 | }
40 |
41 | :checked + label {
42 | text-decoration: line-through;
43 | color: grey;
44 | }
45 |
--------------------------------------------------------------------------------
/DOM/assets/js/scripts.js:
--------------------------------------------------------------------------------
1 | function changeMode() {
2 | changeClasses();
3 | changeText();
4 | }
5 |
6 | function changeClasses() {
7 | button.classList.toggle(darkModeClass);
8 | h1.classList.toggle(darkModeClass);
9 | body.classList.toggle(darkModeClass);
10 | footer.classList.toggle(darkModeClass);
11 | }
12 |
13 | function changeText() {
14 | const lightMode = 'Light Mode';
15 | const darkMode = 'Dark Mode';
16 |
17 | if (body.classList.contains(darkModeClass)) {
18 | button.innerHTML = lightMode;
19 | h1.innerHTML = darkMode + ' ON';
20 | return;
21 | }
22 |
23 | button.innerHTML = darkMode;
24 | h1.innerHTML = lightMode + ' ON';
25 | }
26 |
27 | const darkModeClass = 'dark-mode';
28 | const button = document.getElementById('mode-selector');
29 | const h1 = document.getElementById('page-title');
30 | const body = document.getElementsByTagName('body')[0];
31 | const footer = document.getElementsByTagName('footer')[0];
32 |
33 | button.addEventListener('click', changeMode);
34 |
--------------------------------------------------------------------------------
/introducao-ao-javascript/to-do list/assets/scripts.js:
--------------------------------------------------------------------------------
1 | const form = document.getElementById('task-form');
2 | const taskList = document.getElementById('tasks');
3 |
4 | form.onsubmit = function (e) {
5 | e.preventDefault();
6 | const inputField = document.getElementById('task-input');
7 | addTask(inputField.value);
8 | form.reset();
9 | };
10 |
11 | function addTask(description) {
12 | const taskContainer = document.createElement('div');
13 | const newTask = document.createElement('input');
14 | const taskLabel = document.createElement('label');
15 | const taskDescriptionNode = document.createTextNode(description);
16 |
17 | newTask.setAttribute('type', 'checkbox');
18 | newTask.setAttribute('name', description);
19 | newTask.setAttribute('id', description);
20 |
21 | taskLabel.setAttribute('for', description);
22 | taskLabel.appendChild(taskDescriptionNode);
23 |
24 | taskContainer.classList.add('task-item');
25 | taskContainer.appendChild(newTask);
26 | taskContainer.appendChild(taskLabel);
27 |
28 | taskList.appendChild(taskContainer);
29 | }
30 |
--------------------------------------------------------------------------------
/javascript-assincrono/LICENSE:
--------------------------------------------------------------------------------
1 | MIT License
2 |
3 | Copyright (c) 2021 Stephany Nusch
4 |
5 | Permission is hereby granted, free of charge, to any person obtaining a copy
6 | of this software and associated documentation files (the "Software"), to deal
7 | in the Software without restriction, including without limitation the rights
8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 |
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 |
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 | SOFTWARE.
22 |
--------------------------------------------------------------------------------
/DOM/assets/css/styles.css:
--------------------------------------------------------------------------------
1 | @import url('https://fonts.googleapis.com/css2?family=Quicksand:wght@300;400;600&display=swap');
2 |
3 | body {
4 | background-color: #e5e8e8;
5 | color: #4e545c;
6 | margin: 0;
7 | font-family: 'Quicksand';
8 | }
9 |
10 | body.dark-mode {
11 | background-color: #000401;
12 | color: #e5e8e8;
13 | }
14 |
15 | main {
16 | height: 100vh;
17 | width: 100%;
18 | display: flex;
19 | flex-direction: column;
20 | align-items: center;
21 | justify-content: center;
22 | }
23 |
24 | footer {
25 | width: 100%;
26 | background-color: #4e545c;
27 | padding: 16px;
28 | color: #e5e8e8;
29 | position: fixed;
30 | bottom: 0;
31 | text-align: center;
32 | font-weight: 400;
33 | }
34 |
35 | footer.dark-mode {
36 | background-color: #8d9797;
37 | color: #000401;
38 | }
39 |
40 | button {
41 | border-radius: 40px;
42 | font-size: 1.5rem;
43 | height: 60px;
44 | width: 200px;
45 | border: none;
46 | background-color: #4e545c;
47 | color: #e5e8e8;
48 | transition: all 0.5s linear;
49 | }
50 |
51 | button:hover {
52 | background-color: #000401;
53 | }
54 |
55 | button.dark-mode {
56 | background-color: #e5e8e8;
57 | color: #4e545c;
58 | }
59 |
60 | button.dark-mode:hover {
61 | background-color: #4e545c;
62 | color: #e5e8e8;
63 | }
64 |
--------------------------------------------------------------------------------
/orientacao-a-objetos/README.md:
--------------------------------------------------------------------------------
1 | # Orientação a Objetos
2 |
3 | Este repositório contém a atividade prática do Curso "Orientação a Objetos", que faz parte do Basecamp de Javascript que minstrei pela [Digital Innovation One](https://digitalinnovation.one/).
4 |
5 | ## Atividade: Conta Bancária
6 |
7 | Nesta atividade, vamos testar os conceitos de Orientação a Objetos simulando a criação de diversos tipos de contas bancárias e operações disponíveis em cada uma.
8 |
9 | 1. Crie a classe `ContaBancaria`, que possui os parâmetros `agencia`, `numero`, `tipo` e `saldo`;
10 | 2. Dentro de `ContaBancaria`, construa o getter e o setter de `saldo`;
11 | 3. Dentro de `ContaBancaria`, crie os métodos `sacar` e `depositar`;
12 | 4. Crie uma classe-filha chamada `ContaCorrente` que herda todos esses parâmetros e ainda possua o parâmetro `cartaoCredito`;
13 | 5. Ainda em `ContaCorrente`, construa o getter e o setter de `cartaoCredito`;
14 | 6. Ainda em `ContaCorrente`, faça com que o `tipo` seja 'conta corrente' por padrão;
15 | 7. Crie uma classe-filha chamada `ContaPoupanca` que herda todos os parâmetros de `ContaBancaria`;
16 | 8. Crie uma classe-filha chamada `ContaUniversitaria` que herda todos os parâmetros de `ContaBancaria`;
17 | 9. Faça com que o método `saque` de `ContaUniversitaria` apenas seja capaz de sacar valores **menores que 500 reais**.
18 |
--------------------------------------------------------------------------------
/debug-error/README.md:
--------------------------------------------------------------------------------
1 | # Tratamento de Erros
2 |
3 | Projeto referente ao curso "Tratamento de Erros" que ministrei pela [Digital Innovation One](https://digitalinnovation.one/).
4 |
5 | ## Atividade: validação de erros por tipo
6 |
7 | O objetivo é que a função receba um array e retorne ele caso o seu tamanho corresponda ao número enviado como parâmetro na função. Caso contrário, um erro será lançado.
8 |
9 | - Crie uma função que recebe um array e um número
10 | - Realize as seguintes validações
11 | - Se os parâmetros não forem enviados, lance um erro do tipo `ReferenceError`
12 | - Se o array não for do tipo 'object', lance um erro do tipo `TypeError`
13 | - Se o número não for do tipo 'number', lance um erro do tipo `TypeError`
14 | - Se o tamanho do array for diferente do número enviado como parâmetro, lance um erro do tipo `RangeError`
15 | - Utilize a declaração `try...catch`
16 | - Filtre as chamadas de catch por cada tipo de erro utilizando o operador `instanceof`
17 |
18 | ## Links Auxiliares
19 |
20 | - [Objeto Error](https://developer.mozilla.org/pt-BR/docs/Web/JavaScript/Reference/Global_Objects/Error)
21 | - [instanceof](https://developer.mozilla.org/pt-BR/docs/Web/JavaScript/Reference/Operators/instanceof)
22 | - [typeof](https://developer.mozilla.org/pt-BR/docs/Web/JavaScript/Reference/Operators/typeof)
23 | - [try...catch](https://developer.mozilla.org/pt-BR/docs/Web/JavaScript/Reference/Statements/try...catch)
24 |
--------------------------------------------------------------------------------
/orientacao-a-objetos/ContaBancaria.js:
--------------------------------------------------------------------------------
1 | class ContaBancaria {
2 | constructor(agencia, numero, tipo) {
3 | this.agencia = agencia;
4 | this.numero = numero;
5 | this.tipo = tipo;
6 | this._saldo = 0;
7 | }
8 |
9 | sacar(valor) {
10 | if (valor > this._saldo) {
11 | return console.log('Saque negado; saldo insuficiente!');
12 | }
13 |
14 | this._saldo = this._saldo - valor;
15 | return this._saldo;
16 | }
17 |
18 | depositar(valor) {
19 | this._saldo = this._saldo + valor;
20 | return this._saldo;
21 | }
22 |
23 | set saldo(valor) {
24 | this._saldo = valor;
25 | }
26 |
27 | get saldo() {
28 | return this._saldo;
29 | }
30 | }
31 |
32 | class ContaCorrente extends ContaBancaria {
33 | constructor(agencia, numero, cartaoCredito) {
34 | super(agencia, numero);
35 | this.tipo = 'corrente';
36 | this._cartaoCredito = cartaoCredito;
37 | }
38 |
39 | set cartaoCredito(valor) {
40 | this._cartaoCredito = valor;
41 | }
42 |
43 | get cartaoCredito() {
44 | return this._cartaoCredito;
45 | }
46 | }
47 |
48 | class ContaPoupanca extends ContaBancaria {
49 | constructor(agencia, numero) {
50 | super(agencia, numero);
51 | this.tipo = 'poupança';
52 | }
53 | }
54 |
55 | class ContaUniversitaria extends ContaBancaria {
56 | constructor(agencia, numero) {
57 | super(agencia, numero);
58 | this.tipo = 'universitária';
59 | }
60 |
61 | sacar(valor) {
62 | if (valor > 500) {
63 | return 'Operação negada.';
64 | }
65 |
66 | this._saldo = this._saldo - valor;
67 | return this._saldo;
68 | }
69 | }
70 |
71 | const minhaConta = new ContaCorrente(1, 211, true);
72 | const contaUni = new ContaUniversitaria(2, 333);
73 |
--------------------------------------------------------------------------------