├── resolucoes
    ├── 39.js
    ├── 05.js
    ├── 10.js
    ├── 03.js
    ├── 26.js
    ├── 11.js
    ├── 15.js
    ├── 04.js
    ├── 21.js
    ├── 30.html
    ├── 20.js
    ├── 07.js
    ├── 13.js
    ├── 42.js
    ├── 27.js
    ├── 19.js
    ├── 25.js
    ├── 12.js
    ├── 29.js
    ├── 40.js
    ├── 18.js
    ├── 14.js
    ├── 16.js
    ├── 02.js
    ├── 28.js
    ├── 43.html
    ├── 33.html
    ├── 17.js
    ├── 32.html
    ├── 41.js
    ├── 01.js
    ├── 06.js
    ├── 24.js
    ├── 44.html
    ├── 45.html
    ├── 31.html
    ├── 34.html
    ├── 37.html
    ├── 23.js
    ├── 22.js
    ├── 38.html
    ├── 09.html
    ├── 08.html
    ├── 35.html
    └── 36.html
└── README.md


/resolucoes/39.js:
--------------------------------------------------------------------------------
 1 | /*
 2 |     Desafio 39 - Temporizador personalizado
 3 | */
 4 | 
 5 | function executeAfterTimer(seconds, callback) {
 6 |     console.log('wait for it...');
 7 |     setTimeout(callback, seconds*1000);
 8 | }
 9 | 
10 | executeAfterTimer(2, () => console.log('callback was called'));


--------------------------------------------------------------------------------
/resolucoes/05.js:
--------------------------------------------------------------------------------
 1 | /*
 2 |     Desafio 05 - Verificação de divisibilidade
 3 | */
 4 | 
 5 | const x = 10;
 6 | // const x = 9;
 7 | const y = 2;
 8 | 
 9 | const isDivisible = (x, y) => x % y === 0;
10 | 
11 | isDivisible(x, y) 
12 |     ? console.log(`${x} é divisível por ${y}`)
13 |     : console.log(`${x} NÃO é divisível por ${y}`);


--------------------------------------------------------------------------------
/resolucoes/10.js:
--------------------------------------------------------------------------------
 1 | /*
 2 |     Desafio 10 - Somatório de 1 a n
 3 | */
 4 | 
 5 | const N = 44;
 6 | 
 7 | function getSum(x){
 8 |     let sum = 0;
 9 |     
10 |     for (let i = 1; i <= x; i++) {
11 |         sum += i;
12 |     }
13 | 
14 |     return sum;
15 | }
16 | 
17 | console.log(`O resultado da soma de 1 até ${N} é ${getSum(N)}`);


--------------------------------------------------------------------------------
/resolucoes/03.js:
--------------------------------------------------------------------------------
 1 | /*
 2 |     Desafio 03 - Concatenação de strings
 3 | */
 4 | 
 5 | // dessa vez, vou deixar os valores hardcoded ao invés de pedir ao usuário
 6 | 
 7 | const name = 'Laura';
 8 | const age = 28;
 9 | const location = 'Penedo'
10 | 
11 | const message = name + ' tem ' + age.toString() + ' anos e mora em ' + location + '.';
12 | 
13 | console.log(message);


--------------------------------------------------------------------------------
/resolucoes/26.js:
--------------------------------------------------------------------------------
 1 | /*
 2 |     Desafio 26 - Média de elementos do array
 3 | */
 4 | 
 5 | const arr1 = [1, 3, 5, 6, 2, 4, 10]
 6 | const arr2 = [2, 2, 2, 2, 2]
 7 | 
 8 | function average(arr) {
 9 |     const sum = arr.reduce((sum, currentValue) => sum + currentValue)
10 |     return sum / arr.length;
11 | }
12 | 
13 | console.log(average(arr1).toFixed(2));
14 | console.log(average(arr2).toFixed(2));


--------------------------------------------------------------------------------
/resolucoes/11.js:
--------------------------------------------------------------------------------
 1 | /*
 2 |     Desafio 11 - Tabuada
 3 | */
 4 | 
 5 | const N = 11;
 6 | 
 7 | function showMultiplicationTable(x) {
 8 |     // usando o while para variar um pouco
 9 |     let i = 1;
10 | 
11 |     console.log(`Tabuada do número ${x}:\n`);
12 |     while (i < 11) {
13 |         console.log(`${x} * ${i} = ${x * i}`);
14 |         i++;
15 |     }
16 | }
17 | 
18 | showMultiplicationTable(N);


--------------------------------------------------------------------------------
/resolucoes/15.js:
--------------------------------------------------------------------------------
 1 | /*
 2 |     Desafio 15 - Par ou ímpar
 3 | */
 4 | 
 5 | function isEven(x) {
 6 |     return (x % 2 === 0);
 7 | }
 8 | 
 9 | const numbers = [2, 29, 67, 53, 10987730]
10 | for (let i = 0; i < 5; i++) {
11 |     if (isEven(numbers[i])) {
12 |         console.log(`O número ${numbers[i]} é par.`);
13 |     } 
14 |     else {
15 |         console.log(`O número ${numbers[i]} é ímpar.`);
16 |     }
17 | }


--------------------------------------------------------------------------------
/resolucoes/04.js:
--------------------------------------------------------------------------------
 1 | /*
 2 |     Desafio 04 - Cálculo de área e perímetro 
 3 | */
 4 | 
 5 | const length = 30;
 6 | const width = 12;
 7 | 
 8 | const getArea = (length, width) =>  length * width;
 9 | const getPerimeter = (length, width) => (length + width) * 2;
10 | 
11 | console.log(`
12 |     O retângulo possui ${length}cm de comprimento e ${width}cm de altura.
13 |     Sua área é de ${getArea(length, width)}cm².
14 |     Seu perímetro é de ${getPerimeter(length, width)}cm.
15 | `)


--------------------------------------------------------------------------------
/resolucoes/21.js:
--------------------------------------------------------------------------------
 1 | /*
 2 |     Desafio 20 - Array de números aleatórios
 3 | */
 4 | 
 5 | function randomNumbersArray(quantity, min, max) {
 6 |     const randomArray = []
 7 | 
 8 |     for (let i = 0; i < quantity; i++) {
 9 |         randomArray.push(Math.floor(min + Math.random() * max))
10 |     }
11 | 
12 |     return randomArray;
13 | }
14 | 
15 | // console.log(randomNumbersArray(10, 0, 10))
16 | // console.log(randomNumbersArray(50, 1, 3))
17 | 
18 | module.exports = randomNumbersArray


--------------------------------------------------------------------------------
/resolucoes/30.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="pt-br">
 3 | <head>
 4 |     <meta charset="UTF-8">
 5 |     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 6 |     <title>Exercício 30</title>
 7 | </head>
 8 | <body>
 9 |     <h1>Teste</h1>
10 |     <script>
11 |         const title = document.querySelector('h1')
12 |         console.log(`Texto anterior no h1: ${title.innerText}`)
13 |         title.innerText = 'Alterado'
14 |     </script>
15 | </body>
16 | </html>


--------------------------------------------------------------------------------
/resolucoes/20.js:
--------------------------------------------------------------------------------
 1 | /*
 2 |     Desafio 20 - Palíndromo
 3 | */
 4 | 
 5 | //usando a função criada no exercício 18
 6 | const reverse = require("./18");
 7 | 
 8 | function isPalindrome(str) {
 9 |     return str.toLowerCase() === reverse(str);
10 | }
11 | 
12 | console.log(`"aEiOuoieA" ${isPalindrome('aEiOuoieA') ? '' : ' não '} é palíndromo.`);
13 | console.log(`"Amor" ${isPalindrome('amor') ? '' : ' não '} é palíndromo.`);
14 | console.log(`"Roma é amor" ${isPalindrome('Roma é amor') ? '' : ' não '} é palíndromo.`);


--------------------------------------------------------------------------------
/resolucoes/07.js:
--------------------------------------------------------------------------------
 1 | /*
 2 |     Desafio 07 - Comparação de números
 3 | */
 4 | 
 5 | const X = 10;
 6 | // const Y = 18;
 7 | const Y = -8;
 8 | // const Y = 10;
 9 | 
10 | // fazendo sem return para o if/else ter mais sentido
11 | const compareNumbers = (x, y) => {
12 |     let resultado = '';
13 | 
14 |     if (x === y) resultado = 'igual';
15 |     else if (x < y) resultado = 'menor';
16 |     else resultado = 'maior';
17 | 
18 |     return resultado;
19 | }
20 | 
21 | console.log(`${X} é ${compareNumbers(X, Y)} que ${Y}.`);


--------------------------------------------------------------------------------
/resolucoes/13.js:
--------------------------------------------------------------------------------
 1 | /*
 2 |     Desafio 13 - Padrão de asteriscos
 3 | */
 4 | function showPattern(x) {
 5 |     for (let i = 1; i <= x; i++) {
 6 |         console.log('*'.repeat(i));
 7 |     }
 8 | }
 9 | 
10 | function showReversePattern(x) {
11 |     for (let i = x; i > 0; i--){
12 |         console.log('*'.repeat(i));
13 |     }
14 | }
15 | 
16 | function showFullPattern(x) {
17 |     showPattern(x);
18 |     showReversePattern(x-1);
19 | }
20 | 
21 | const N = 4;
22 | showPattern(N);
23 | showReversePattern(N);
24 | showFullPattern(N);


--------------------------------------------------------------------------------
/resolucoes/42.js:
--------------------------------------------------------------------------------
 1 | /*
 2 |     Desafio 42 - Simulação resposta API
 3 | */
 4 | 
 5 | function fakeAPI(value, delay) {
 6 |     return new Promise((resolve, _) => {
 7 |         setTimeout(() => {
 8 |             resolve(value);
 9 |         }, delay);
10 |     });
11 | }
12 | 
13 | async function callAPI() {
14 |     const value = await(fakeAPI(4, 2000));  
15 |     console.log(value);
16 | }
17 | 
18 | console.log(fakeAPI(4, 2)); // Promise { <pending> }
19 | 
20 | callAPI(); // 4
21 | 
22 | fakeAPI(5, 4000)
23 |     .then(result => console.log(result)) // 5


--------------------------------------------------------------------------------
/resolucoes/27.js:
--------------------------------------------------------------------------------
 1 | /*
 2 |     Desafio 27 - Soma dos valores de um objeto
 3 | */
 4 | 
 5 | // object created by Chat GPT
 6 | const obj = {
 7 |     "age": 32,
 8 |     "height": 176,
 9 |     "weight": 68,
10 |     "score": 87,
11 |     "temperature": 23
12 | };
13 | 
14 | const obj2 = {
15 |     oi: 1,
16 |     tudo: 2,
17 |     bem: 3
18 | };
19 | 
20 | function sum(object) {
21 |     let sum = 0;
22 |     for (const prop in object) {
23 |         sum += object[prop];
24 |     }
25 |     return sum;
26 | }
27 | 
28 | console.log(sum(obj));
29 | console.log(sum(obj2));


--------------------------------------------------------------------------------
/resolucoes/19.js:
--------------------------------------------------------------------------------
 1 | /*
 2 |     Desafio 19 - Contagem de vogais
 3 | */
 4 | 
 5 | // g: todas as ocorrências
 6 | // i: case insensitive
 7 | function countVowels(str) {
 8 |     // repare no uso do ? para tratar retorno null
 9 |     //https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Optional_chaining
10 |     const count = str.match(/[aeiou]/gi)?.length;
11 |     if (count) return count;
12 |     return 0;
13 | }
14 | 
15 | const texto = "A eiou aei ou ae Io U aeio U. BBBBB."
16 | console.log(`Quantidade de vogais no texto "${texto}": ${countVowels(texto)}`);


--------------------------------------------------------------------------------
/resolucoes/25.js:
--------------------------------------------------------------------------------
 1 | /*
 2 |     Desafio 25 - Interseção de arrays
 3 | */
 4 | 
 5 | const arr1 = [1, 3, 5, 6, 2, 4, 10]
 6 | const arr2 = [2, 1, 7, 12, 4]
 7 | const arr3 = [1, 2, 3, 4, 5]
 8 | const arr4 = [4, 5, 6, 7, 8]
 9 | 
10 | function intersection(arr1, arr2) {
11 |     return arr1.filter(item => arr2.includes(item))
12 | }
13 | 
14 | console.log(intersection(arr1, arr2));
15 | console.log(intersection(arr3, arr4));
16 | 
17 | // Observação: se tiver elementos repetidos, eles serão incluídos no array
18 | const test = [1, 3, 5, 6, 2, 4, 2, 4, 10]
19 | console.log(intersection(test, arr3))


--------------------------------------------------------------------------------
/resolucoes/12.js:
--------------------------------------------------------------------------------
 1 | /*
 2 |     Desafio 12 - Números primos
 3 | */
 4 | function showPrimeNumbers(x) {
 5 |     const primes = [];
 6 |     
 7 |     // 1 não é primo
 8 |     for (let i = 2; i <= x; i++) {
 9 |         if (isPrime(i)) {
10 |             primes.push(i);
11 |         }
12 |     }
13 | 
14 |     console.log(`Números primos até ${x}: ${primes.join(', ')}`);
15 | }
16 | 
17 | function isPrime(number) {
18 |     for (let i = 2; i < number; i++) {
19 |         if (number % i === 0) return false;
20 |     }
21 | 
22 |     return true;
23 | }
24 | 
25 | const N = 50;
26 | showPrimeNumbers(N);


--------------------------------------------------------------------------------
/resolucoes/29.js:
--------------------------------------------------------------------------------
 1 | /*
 2 |     Desafio 29 - União de propriedades de objetos
 3 | */
 4 | 
 5 | // objects created by Chat GPT
 6 | const person = {
 7 |     age: 32,
 8 |     height: 176,
 9 |     weight: 68,
10 |     score: 87,
11 |     temperature: 23
12 | };
13 | 
14 | const address = {
15 |     street: '123 Main St',
16 |     city: 'Exampleville',
17 |     state: 'Samplestate',
18 |     zip: '12345',
19 |     country: 'Sampleland',
20 |     temperature: 32
21 | };
22 | 
23 | function concatenateObjects(obj1, obj2) {
24 |     return {...obj1, ...obj2}; 
25 | }
26 | 
27 | console.log(concatenateObjects(person,address));


--------------------------------------------------------------------------------
/resolucoes/40.js:
--------------------------------------------------------------------------------
 1 | /*
 2 |     Desafio 40 - Clone do map()
 3 | */
 4 | 
 5 | function transformArray(arr, callback) {
 6 |     const newArr = [];
 7 |     arr.forEach(item => newArr.push(callback(item)));
 8 |     return newArr;
 9 | }
10 | 
11 | const array = [1, 2, 3, 4];
12 | 
13 | // array with values squared
14 | const newArray = transformArray(array, (value) => value * value);
15 | 
16 | // array with all elements = banana
17 | const bananArray = transformArray(array, () => 'banana')
18 | 
19 | console.log(array);
20 | console.log(newArray);
21 | console.log(bananArray);
22 | //original array is not modified
23 | console.log(array);
24 | 


--------------------------------------------------------------------------------
/resolucoes/18.js:
--------------------------------------------------------------------------------
 1 | /*
 2 |     Desafio 18 - Inversão de string
 3 | */
 4 | 
 5 | // achei elegante, haha
 6 | function reverse(str) {
 7 |     return str.toLowerCase().split('').reverse().join('');
 8 | }
 9 | 
10 | function runProgram() {
11 |     const words = ['Roma', 'onomatopeia', '000111', 'abcdefg', 'subi no onibus'];
12 |     
13 |     for (let i = 0; i < words.length; i++) {
14 |         console.log(`O reverso de ${words[i].toLowerCase()} é ${reverse(words[i])}`);
15 |         
16 |     }
17 | }
18 | 
19 | 
20 | // exportando a função para ser usada no exercício 20
21 | module.exports = reverse;
22 | 
23 | 
24 | // descomente para rodar esse desafio
25 | // runProgram();


--------------------------------------------------------------------------------
/resolucoes/14.js:
--------------------------------------------------------------------------------
 1 | /*
 2 |     Desafio 14 - Sequência de Fibonacci
 3 | */
 4 | function fibonacci(x) {
 5 |     if (x < 0) throw new Error ('Foi digitado um valor negativo');
 6 | 
 7 |     if (x === 0) return 0;
 8 | 
 9 |     if (x === 1) return 1;
10 | 
11 |     return (fibonacci(x-2) + fibonacci(x-1));
12 | }
13 | 
14 | function showFibonacci(x) {
15 |     if (x < 0) {
16 |         console.log('Por favor, entre com um número maior que zero');
17 |         return;
18 |     }
19 |     
20 |     let i = 0;
21 |     const list = [];
22 | 
23 |     while (fibonacci(i) <= x) {
24 |         list.push(fibonacci(i));
25 |         i++;
26 |     }
27 | 
28 |     console.log(list.join(', '));
29 | }
30 | 
31 | const N = 500;
32 | showFibonacci(N);


--------------------------------------------------------------------------------
/resolucoes/16.js:
--------------------------------------------------------------------------------
 1 | /*
 2 |     Desafio 16 - Fatorial
 3 | */
 4 | 
 5 | // fazendo sem recursão
 6 | function factorial(x) {
 7 |     if (x === 0) {
 8 |         return 1;
 9 |     }
10 |     
11 |     if (x < 0) {
12 |         throw new Error('Não existe fatorial para números negativos');
13 |     }
14 | 
15 |     let result = x;
16 |     for(let i = x-1; i > 0; i--) {
17 |         result *= i;
18 |     }
19 |     return result;
20 | }
21 | 
22 | console.log(`Fatorial de 8: ${factorial(8)}`);
23 | console.log(`Fatorial de 12: ${factorial(12)}`);
24 | console.log(`Fatorial de 0: ${factorial(0)}`);
25 | console.log(`Fatorial de 1: ${factorial(1)}`);
26 | console.log(`Fatorial de 124: ${factorial(124)}`);
27 | console.log(`Fatorial de -65: ${factorial(-65)}`);


--------------------------------------------------------------------------------
/resolucoes/02.js:
--------------------------------------------------------------------------------
 1 | /*
 2 |     Desafio 02 - Cálculo IMC 
 3 | */
 4 | 
 5 | const readline = require('readline'); // para interação com usuário
 6 | 
 7 | const getIMC = (weight, height) => {
 8 |     return weight / (height*height);
 9 | }
10 | 
11 | // sim... está feio, mas eu só quero criar uma interação básica via linha de comando
12 | const rl = readline.createInterface({
13 |     input: process.stdin,
14 |     output: process.stdout
15 | });
16 | 
17 | rl.question('Digite o valor do peso: ', (value1) => {
18 |     const weight = parseFloat(value1);
19 |     rl.question('Digite o valor da altura:', (value2) => {
20 |         const height = parseFloat(value2);  
21 |         console.log(`O valor do IMC é ${getIMC(weight, height).toFixed(2)}`);
22 |         rl.close();
23 |     });
24 | });


--------------------------------------------------------------------------------
/resolucoes/28.js:
--------------------------------------------------------------------------------
 1 | /*
 2 |     Desafio 28 - Filtrando propriedades de um objeto
 3 | */
 4 | 
 5 | // object created by Chat GPT
 6 | const obj = {
 7 |     "age": 32,
 8 |     "height": 176,
 9 |     "weight": 68,
10 |     "score": 87,
11 |     "temperature": 23
12 | };
13 | 
14 | const props = ['age', 'score', 'temperature', 'oi']
15 | 
16 | const obj2 = {
17 |     oi: 1,
18 |     tudo: 2,
19 |     bem: 3
20 | };
21 | 
22 | function ShowValues(object, props) {
23 |     props.map(prop => {
24 |         if (object.hasOwnProperty(prop)) {
25 |             console.log(`Propriedade ${prop}, valor ${object[prop]}.`)
26 |         } else {
27 |             console.log(`A propriedade ${prop} não existe no objeto.`)
28 |         }
29 |     })
30 | }
31 | 
32 | ShowValues(obj, props);
33 | ShowValues(obj2, props);


--------------------------------------------------------------------------------
/resolucoes/43.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="pt-br">
 3 | 
 4 | <head>
 5 |     <meta charset="UTF-8">
 6 |     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 7 |     <title>Exercício 43</title>
 8 | </head>
 9 | 
10 | <body>
11 |     <script>
12 |         function getData(source) {
13 |             return fetch(source);
14 |         }
15 | 
16 |         const url = 'https://jsonplaceholder.typicode.com/posts/1'
17 | 
18 |         console.log(getData(url)); // Promise
19 | 
20 |         getData(url)
21 |             .then(response => console.log(response)); // Response object
22 | 
23 |         getData(url)
24 |             .then(response => response.json())
25 |             .then(data => console.log(data)); // data as an object
26 | 
27 |     </script>
28 | </body>
29 | 
30 | </html>


--------------------------------------------------------------------------------
/resolucoes/33.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="pt-br">
 3 | 
 4 | <head>
 5 |     <meta charset="UTF-8">
 6 |     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 7 |     <title>Exercício 33</title>
 8 | </head>
 9 | 
10 | <body>
11 |     <ul class="list">
12 |         <li>lorem</li>
13 |         <li>lorem</li>
14 |         <li>lorem</li>
15 |         <li>lorem</li>
16 |         <li>lorem</li>
17 |     </ul>
18 |     <button>Add new item</button>
19 |     <script>
20 |         function addItem() {
21 |             const newItem = document.createElement('li');
22 |             newItem.innerText = 'new item';
23 |             
24 |             document.querySelector('.list').appendChild(newItem)
25 |         }
26 | 
27 |         document.querySelector('button').addEventListener('click', addItem)
28 |     </script>
29 | </body>
30 | 
31 | </html>


--------------------------------------------------------------------------------
/resolucoes/17.js:
--------------------------------------------------------------------------------
 1 | /*
 2 |     Desafio 17 - Max/Min
 3 | */
 4 | 
 5 | function max(x, y) {
 6 |     return x > y ? x : y;
 7 | }
 8 | 
 9 | function min(x, y) {
10 |     return x < y ? x : y;
11 | }
12 | 
13 | const test_1 = [2, 9];
14 | const test_2 = [-95, -95];
15 | const test_3 = [8, 3];
16 | 
17 | console.log(`O maior valor entre ${test_1[0]} e ${test_1[1]} é ${max(test_1[0], test_1[1])}`);
18 | console.log(`O menor valor entre ${test_1[0]} e ${test_1[1]} é ${min(test_1[0], test_1[1])}`);
19 | console.log(`O maior valor entre ${test_2[0]} e ${test_2[1]} é ${max(test_2[0], test_2[1])}`);
20 | console.log(`O menor valor entre ${test_2[0]} e ${test_2[1]} é ${min(test_2[0], test_2[1])}`);
21 | console.log(`O maior valor entre ${test_3[0]} e ${test_3[1]} é ${max(test_3[0], test_3[1])}`);
22 | console.log(`O menor valor entre ${test_3[0]} e ${test_3[1]} é ${min(test_3[0], test_3[1])}`);


--------------------------------------------------------------------------------
/resolucoes/32.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="pt-br">
 3 | <head>
 4 |     <meta charset="UTF-8">
 5 |     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 6 |     <title>Exercício 32</title>
 7 |     <style>
 8 |         .box {
 9 |             background-color: springgreen;
10 |             width: 300px; 
11 |             height: 300px;
12 |         }
13 |         .active {
14 |             background-color: brown;
15 |         }
16 |     </style>
17 | </head>
18 | <body>
19 |     <div class="box">🫠🫠🫠🫠🫠🫠🫠🫠🫠🫠🫠🫠🫠</div>
20 |     <button>Toggle background color</button>
21 |     <script>
22 |         function toggleBackground() {
23 |             document.querySelector('.box').classList.toggle('active')
24 |         }
25 | 
26 |         document.querySelector('button').addEventListener('click', toggleBackground)
27 |     </script>
28 | </body>
29 | </html>


--------------------------------------------------------------------------------
/resolucoes/41.js:
--------------------------------------------------------------------------------
 1 | /*
 2 |     Desafio 41 - Execução condicional com callbacks
 3 | */
 4 | 
 5 | function verifyAndExecute(validate, fulfill, reject) {
 6 |     if (validate()) return fulfill();
 7 |     return reject();
 8 | }
 9 | 
10 | const validIntegers = (x, y) => { return Number.isInteger(x) && Number.isInteger(y) }
11 | const add = (x, y) => { return x + y }
12 | const concatenate = (x, y) => { return `${x} and ${y}` }
13 | 
14 | const num1 = "5", 
15 |     num2 = "6", 
16 |     char1 = 'hello', 
17 |     char2 = 'goodbye';
18 | 
19 | console.log(verifyAndExecute(
20 |     () => validIntegers(num1, num2), 
21 |     () => add(num1, num2),
22 |     () => concatenate(char1, char2)
23 | ))
24 | 
25 | const x = 10, y = 2;
26 | // const x = '10', y = '2';
27 | verifyAndExecute(
28 |     () => validIntegers(x, y),
29 |     () => console.log(`${x} * ${y} = ${x*y}`),
30 |     () => console.log(`Strings '${x}' and '${y}'`)
31 | )


--------------------------------------------------------------------------------
/resolucoes/01.js:
--------------------------------------------------------------------------------
 1 | /*
 2 |     Desafio 01 - Conversão de temperatura 
 3 | */
 4 | 
 5 | const readline = require('readline'); // para interação com usuário
 6 | 
 7 | //--- Funções de conversão
 8 | const celsiusToFahrenheit = (temperature) => {
 9 |     return (temperature * 9/5) + 32;
10 | }
11 | 
12 | const fahrenheitToCelsius = (temperature) => {
13 |     return (temperature - 32) * 5/9;
14 | }
15 | 
16 | //--- Teste direto na linha de comando
17 | 
18 | // código do readline criado pela ChatGPT
19 | const rl = readline.createInterface({
20 |     input: process.stdin,
21 |     output: process.stdout
22 | });
23 | 
24 | rl.question('Digite um valor de temperatura: ', (temperature) => {
25 |     console.log(`${temperature}ºC é equivalente a ${celsiusToFahrenheit(parseFloat(temperature)).toFixed(2)}ºF`);
26 |     
27 |     console.log(`${temperature}ºF é equivalente a ${fahrenheitToCelsius(parseFloat(temperature)).toFixed(2)}ºC`);
28 |     rl.close();
29 | })


--------------------------------------------------------------------------------
/resolucoes/06.js:
--------------------------------------------------------------------------------
 1 | /*
 2 |     Desafio 06 - Faixa etária
 3 | */
 4 | 
 5 | // o else não seria necessário devido ao return, mas estou seguindo o pedido no desafio
 6 | function getAgeGroup(age) {
 7 |     if (age < 0) {
 8 |         console.log('idade inválida');
 9 |         return;
10 |     }
11 |     
12 |     if (age >= 0 && age <= 12) {
13 |         return 'criança';
14 |     }
15 |     else if (age > 12 && age <= 17) {
16 |         return 'adolescente';
17 |     }
18 |     else if (age > 17 && age <= 59) {
19 |         return 'adulta';
20 |     }
21 |     else {
22 |         return 'idosa';
23 |     }
24 | }
25 | 
26 | const readline = require('readline'); 
27 | 
28 | const rl = readline.createInterface({
29 |     input: process.stdin,
30 |     output: process.stdout
31 | });
32 | 
33 | rl.question('Digite uma idade: ', (age) => {
34 |     const ageGroup = getAgeGroup(parseInt(age));
35 | 
36 |     if(ageGroup){
37 |         console.log(`Uma pessoa com ${age} anos é classificada como ${ageGroup}.`);
38 |     }
39 |     rl.close();
40 | })


--------------------------------------------------------------------------------
/resolucoes/24.js:
--------------------------------------------------------------------------------
 1 | /*
 2 |     Desafio 24 - Concatenar arrays
 3 | */
 4 | 
 5 | const arr1 = [0, 1, 2]
 6 | const arr2 = [3, 4, 5]
 7 | const arr3 = ['casa', 'asa', 'boca']
 8 | const arr4 = ['olho', 'sogro', 'menta']
 9 | 
10 | function concatenate(arr1, arr2) {
11 |     return ([...arr1, ...arr2])
12 | }
13 | 
14 | function concatenateWithConcat(arr1, arr2) {
15 |     return (arr1.concat(arr2))
16 | }
17 | 
18 | console.log(concatenate(arr1, arr2));
19 | console.log(concatenate(arr3, arr4));
20 | console.log(concatenate(arr1, arr3));
21 | 
22 | // Estranho quando há um array aninhado...
23 | const test1 = [0, 1, [2], 3]
24 | const test2 = [4, 5]
25 | const withSpread = concatenate(test1, test2)
26 | const withConcat = concatenateWithConcat(test1, test2)
27 | console.log(withSpread);
28 | console.log(withConcat);
29 | 
30 | // OK, não atualiza o array concatenado
31 | test1.push(7)
32 | console.log(withSpread);
33 | console.log(withConcat);
34 | 
35 | // Aqui ele atualiza o array concatenado. Por quê?
36 | // somente o test1[2].push(7) foi colocado no array concatenado. Por quê?
37 | console.log(test1)
38 | test1[2].push(7)
39 | console.log(test1)
40 | console.log(withSpread);
41 | console.log(withConcat);


--------------------------------------------------------------------------------
/resolucoes/44.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="pt-br">
 3 | 
 4 | <head>
 5 |     <meta charset="UTF-8">
 6 |     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 7 |     <title>Exercício 44</title>
 8 | </head>
 9 | 
10 | <body>
11 |     <script>
12 |         const blog = [
13 |             'https://jsonplaceholder.typicode.com/posts/1',
14 |             'https://jsonplaceholder.typicode.com/posts/2',
15 |             'https://jsonplaceholder.typicode.com/posts/3',
16 |             'https://jsonplaceholder.typicode.com/posts/4',
17 |             'https://jsonplaceholder.typicode.com/posts/5',
18 |         ]
19 | 
20 |         function getAllPosts(source) {
21 |             const promises = [];
22 |             const results = [];
23 |             source.forEach(post => {
24 |                 promises.push(fetch(post))
25 |             })
26 |             Promise.all(promises)
27 |                 .then(response => 
28 |                     response.forEach(result =>  
29 |                         result.json()
30 |                             .then(data => results.push(data))))
31 |                 .catch(err => console.log(err))
32 |             return results;
33 |         }
34 |         
35 |         console.log(getAllPosts(blog));
36 |     </script>
37 | </body>
38 | 
39 | </html>


--------------------------------------------------------------------------------
/resolucoes/45.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="pt-br">
 3 | 
 4 | <head>
 5 |     <meta charset="UTF-8">
 6 |     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 7 |     <title>Exercício 45</title>
 8 | </head>
 9 | 
10 | <body>
11 |     <script>
12 |         const VALID_API = 'https://jsonplaceholder.typicode.com/todos/1';
13 |         const INVALID_API = 'http://localhost/error'
14 | 
15 |         const fetchData = async(url) => {
16 |             return fetch(url)
17 |                 .then(response => response.json())
18 |                 .then(data => {
19 |                     console.log(data);
20 |                     return 'ok';
21 |                 })
22 |                 .catch(err => null);
23 |         }
24 | 
25 |         const retry = (apiRequest, attempts, delay) => {
26 |             let data = null; 
27 |             let count = 0;
28 |             while (data === null && count < attempts) {               
29 |                 setTimeout(async () => {
30 |                     data = await apiRequest();
31 |                     console.log(`Trying to fetch data from API...`)
32 |                 }, delay)
33 |                 count++;
34 |             }     
35 |         }
36 | 
37 | 
38 |         retry(() => fetchData(VALID_API), 1, 2000)
39 |         retry(() => fetchData(INVALID_API), 3, 2000)
40 |     </script>
41 | </body>
42 | 
43 | </html>


--------------------------------------------------------------------------------
/resolucoes/31.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="pt-br">
 3 | <head>
 4 |     <meta charset="UTF-8">
 5 |     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 6 |     <title>Exercício 31</title>
 7 | </head>
 8 | <body>
 9 |     <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eum maxime, veritatis eligendi quidem et sed est. Quis rerum, aperiam aliquid dolorem veniam eum fugit temporibus quod libero nobis. Ad, laboriosam.</p>
10 |     <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Optio amet magni reprehenderit sapiente excepturi ipsum autem! Ipsam nesciunt, assumenda, quidem numquam repellendus tenetur animi voluptates nobis laborum placeat perferendis corrupti.</p>
11 |     <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Optio amet magni reprehenderit sapiente excepturi ipsum autem! Ipsam nesciunt, assumenda, quidem numquam repellendus tenetur animi voluptates nobis laborum placeat perferendis corrupti.</p>
12 |     <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Optio amet magni reprehenderit sapiente excepturi ipsum autem! Ipsam nesciunt, assumenda, quidem numquam repellendus tenetur animi voluptates nobis laborum placeat perferendis corrupti.</p>
13 |     <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Optio amet magni reprehenderit sapiente excepturi ipsum autem! Ipsam nesciunt, assumenda, quidem numquam repellendus tenetur animi voluptates nobis laborum placeat perferendis corrupti.</p>
14 |     <script>
15 |         const list = document.querySelectorAll('p')
16 |         list.forEach(item => item.style.color = 'fuchsia')
17 |     </script>
18 | </body>
19 | </html>


--------------------------------------------------------------------------------
/resolucoes/34.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="pt-br">
 3 | 
 4 | <head>
 5 |     <meta charset="UTF-8">
 6 |     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 7 |     <title>Exercício 34</title>
 8 | </head>
 9 | 
10 | <body>
11 |     <ul class="list">
12 |         <li>lorem</li>
13 |         <li>lorem</li>
14 |         <li>lorem</li>
15 |         <li>lorem</li>
16 |         <li>lorem</li>
17 |     </ul>
18 |     <button>Add new item</button>
19 |     <script>
20 |         function addItem() {
21 |             const newItem = document.createElement('li');
22 |             newItem.innerText = 'new item';
23 |             newItem.addEventListener('click', (e) => removeItem(e.target));
24 |             document.querySelector('.list').appendChild(newItem)            
25 |         }
26 | 
27 |         function removeItem(item) {
28 |             // access parent and then remove itself
29 |             item.parentNode.removeChild(item);
30 |         }
31 | 
32 |         function addNewEventToAll(element, typeOfEvent, callbackFn) {
33 |             document.querySelectorAll(element).forEach(item => {
34 |                 item.addEventListener(
35 |                     typeOfEvent, 
36 |                     (e) => callbackFn(e.target)
37 |                 );
38 |             })
39 |         }
40 | 
41 |         function addNewEvent(element, typeOfEvent, callbackFn) {
42 |             document.querySelector(element).addEventListener(typeOfEvent, callbackFn);
43 |         }
44 | 
45 |         addNewEvent('button', 'click', addItem);
46 |         addNewEventToAll('li', 'click', removeItem);
47 |     </script>
48 | </body>
49 | 
50 | </html>


--------------------------------------------------------------------------------
/resolucoes/37.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="pt-br">
 3 | 
 4 | <head>
 5 |     <meta charset="UTF-8">
 6 |     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 7 |     <title>Exercício 37</title>
 8 |     <style>
 9 |         .modal {
10 |             padding: 0;
11 |         }
12 |         .modal__content {
13 |             padding: 1em;
14 |             height: 100%;
15 |         }
16 |     </style>
17 | </head>
18 | 
19 | <body>
20 |     <button onclick="openModal()" class="openModal">Mostrar conteúdo</button>
21 |     <dialog class="modal">
22 |         <div class="modal__content">
23 |             <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Qui dignissimos perferendis, minima saepe totam
24 |                 excepturi repellendus suscipit sed nihil placeat quidem alias provident distinctio ratione esse consectetur
25 |                 tempora necessitatibus incidunt.</p>
26 |             <button onclick="closeModal()">&times;</button>
27 |         </div>
28 |     </dialog>
29 |     <script>
30 |         const modalContainer = document.querySelector('.modal');
31 |         const modalContent = document.querySelector('.modal__content');
32 | 
33 |         const openModal = () => modalContainer.showModal();
34 | 
35 |         const closeModal = () => modalContainer.close();
36 | 
37 |         // close modal when clicking outside of it
38 |         modalContainer.addEventListener('click', (e) => {
39 |             // check if the click happened inside the modal content
40 |             if (e.target.closest('.modal__content') !== modalContent) {
41 |                 modalContainer.close();
42 |             }
43 |         })
44 | 
45 |     </script>
46 | </body>
47 | 
48 | </html>


--------------------------------------------------------------------------------
/resolucoes/23.js:
--------------------------------------------------------------------------------
 1 | /*
 2 |     Desafio 23 - Remoção de elementos repetidos
 3 | */
 4 | 
 5 | // const chatGPTProvidedThis = [
 6 | //     'apple', 'banana', 'orange', 'apple', 'grape',
 7 | //     'kiwi', 'apple', 'mango', 'orange', 'pear',
 8 | //     'banana', 'apple', 'grape', 'kiwi', 'orange',
 9 | //     'apple', 'mango', 'banana', 'orange', 'grape'
10 | // ]
11 | 
12 | const chatGPTProvidedThis = [
13 |     'apple', 'banana', 'orange', 'grape', 'kiwi',
14 |     'mango', 'pear', 'peach', 'plum', 'strawberry',
15 |     'watermelon', 'blueberry', 'cherry', 'pineapple', 'lemon',
16 |     'lime', 'raspberry', 'blackberry', 'pomegranate', 'apricot',
17 |     'coconut', 'fig', 'guava', 'honeydew', 'mandarin',
18 |     'nectarine', 'papaya', 'passionfruit', 'persimmon', 'quince',
19 |     'rhubarb', 'tangerine', 'cantaloupe', 'dragonfruit', 'elderberry',
20 |     'gooseberry', 'kumquat', 'lychee', 'mulberry', 'olive',
21 |     'pawpaw', 'plantain', 'soursop', 'ugli', 'yuzu',
22 |     'zucchini', 'avocado', 'tomato', 'potato', 'carrot',
23 |     'apple', 'banana', 'orange', 'grape', 'kiwi'
24 | ];
25 | 
26 | const test = ['Matheus', 'Matheus', 'Matheus', 'Matheus', 'Matheus', 'Ricardo', 'Matheus', 'Matheus', 'Matheus', 'Matheus', 'Ricardo', 'Matheus', 'Ricardo', 'Ricardo', 'Zingarelli', 'Matheus', 'Ricardo', 'Uihara', 'Zingarelli', 'Maatheus'];
27 | 
28 | function removeDuplicates(arr) {
29 |     // backward search for the same item 
30 |     // if the index is the same, the item is not repeated
31 |     return arr.filter((item, index) => arr.lastIndexOf(item) === index)
32 | }
33 | 
34 | // gabarito do instrutor, transformando em um Set e depois em um array novamente
35 | function removeDuplicatesUsingSet(arr) {
36 |     return Array.from(new Set(arr));
37 | }
38 | 
39 | console.log(removeDuplicates(chatGPTProvidedThis));
40 | console.log(removeDuplicates(test));
41 | console.log(removeDuplicatesUsingSet(chatGPTProvidedThis));
42 | console.log(removeDuplicatesUsingSet(test));


--------------------------------------------------------------------------------
/resolucoes/22.js:
--------------------------------------------------------------------------------
 1 | /*
 2 |     Desafio 22 - Elemento mais frequente
 3 | */
 4 | 
 5 | const randomNumbersArray = require("./21");
 6 | 
 7 | function mostFrequentElement(array) {
 8 |     // sort array
 9 |     array.sort();
10 | 
11 |     // start the variables with the first element in the array
12 |     let mostFrequent = array[0];
13 |     let currentElementInpected = array[0];
14 |     let currentFrequency = 1;
15 |     let biggestFrequency = 1;
16 | 
17 |     for (let i = 1; i < array.length; i++) {
18 |         const element = array[i];        
19 |         if (element === currentElementInpected) {
20 |             currentFrequency++;
21 |         } else {            
22 |             if (biggestFrequency < currentFrequency) {
23 |                 // update biggest frequency
24 |                 biggestFrequency = currentFrequency;
25 |                 mostFrequent = currentElementInpected;
26 |             }
27 |             // restart the count for the new element
28 |             currentFrequency = 1;
29 |             currentElementInpected = element;
30 |         }
31 |         // DEBUG
32 |         // console.log(`
33 |         //     i = ${i},
34 |         //     mostFrequent = ${mostFrequent},
35 |         //     currentElementInspected = ${currentElementInpected},
36 |         //     currentFreq = ${currentFrequency}
37 |         //     biggestFre = ${biggestFrequency}
38 |         //     element = ${element}
39 |         // `)
40 |     }
41 |     return [mostFrequent, biggestFrequency];
42 | }
43 | 
44 | // const test = [0, 0, 10, 2, 4, 0, 2, 0, 3, 0, 2, 2];
45 | // const test = [0, 0, 0, 2, 2, 2, 2, 3];
46 | const test = [0, 0, 10, 2, 4, 0, 2, 0, 3, 0, 2, 2, 2, 2, 2];
47 | const chatGPTProvidedThis = [15, 14, 20, 24, 18, 23, 12, 26, 19, 16, 27, 13, 25, 21, 17, 22, 12, 27, 14, 19, 16, 23, 15, 18, 24, 13, 26, 20, 17, 21, 25, 22, 27, 14, 12, 19, 16, 18, 13, 23, 15, 24, 20, 26, 17, 21, 22, 25, 27, 14, 19, 16]
48 | const usingLastExercise = randomNumbersArray(100, 7, 16)
49 | 
50 | console.log(usingLastExercise.sort());
51 | const [element, frequency] = mostFrequentElement(usingLastExercise);
52 | 
53 | console.log(`O elemento mais frequente no array é ${element}. Ele aparece ${frequency} vezes`);


--------------------------------------------------------------------------------
/resolucoes/38.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="pt-br">
 3 | 
 4 | <head>
 5 |     <meta charset="UTF-8">
 6 |     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 7 |     <title>Exercício 38</title>
 8 |     <style>
 9 |         .item {
10 |             list-style: none;
11 |             border: 1px solid black;
12 |             width: fit-content;
13 |             padding: 10px 15px;
14 |             margin-bottom: 15px;            
15 |         }
16 |         .title {
17 |             cursor: pointer;
18 |         }
19 |     </style>
20 | </head>
21 | 
22 | <body>
23 |     <ul>
24 |         <li class="item">
25 |             <h2 class="title">Item 1</h2>
26 |             <p class="content">Texto 1 Texto 1 Texto 1 Texto 1 Texto 1 </p>
27 |         </li>
28 |         <li class="item">
29 |             <h2 class="title">Item 2</h2>
30 |             <p class="content">Texto 2 Texto 2 Texto 2 Texto 2 Texto 2 </p>
31 |         </li>
32 |         <li class="item">
33 |             <h2 class="title">Item 3</h2>
34 |             <p class="content">Texto 3 Texto 3 Texto 3 Texto 3 Texto 3 </p>
35 |         </li>
36 |         <li class="item">
37 |             <h2 class="title">Item 4</h2>
38 |             <p class="content">Texto 4 Texto 4 Texto 4 Texto 4 Texto 4 </p>
39 |         </li>
40 |         <li class="item">
41 |             <h2 class="title">Item 5</h2>
42 |             <p class="content">Texto 5 Texto 5 Texto 5 Texto 5 Texto 5 </p>
43 |         </li>
44 |     </ul>
45 |     <script>
46 |         const titleList = document.querySelectorAll('.title');
47 |         const contentList = document.querySelectorAll('.content');
48 | 
49 |         function showContent(e) {
50 |             // hide any content open
51 |             hideAllContent()
52 | 
53 |             // open content for the clicked title
54 |             e.target.parentElement.querySelector('.content').style.display = 'block';
55 |         }
56 | 
57 |         function hideAllContent() {
58 |             contentList.forEach(content => content.style.display = 'none')
59 |         }
60 | 
61 |         titleList.forEach(item => {
62 |             item.addEventListener('click', showContent)
63 |         });
64 | 
65 |         hideAllContent();
66 |        
67 |     </script>
68 | </body>
69 | 
70 | </html>


--------------------------------------------------------------------------------
/resolucoes/09.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="pt-BR">
 3 | <head>
 4 |     <meta charset="UTF-8">
 5 |     <meta http-equiv="X-UA-Compatible" content="IE=edge">
 6 |     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 7 |     <title>Calculador de tarifa</title>
 8 | </head>
 9 | <body>
10 |     <h1>Calculador de tarifa</h1>
11 |     <section>
12 |         <h2>Informe sua idade e selecione se é estudante</h2>
13 |         <form id="calculator">
14 |             <label for="age">Idade</label>
15 |             <input id="age" type="number" min="0" required style="width: 80px">
16 |             <br><br>
17 |             <input type="checkbox" name="student" id="student">
18 |             <label for="student">Sou estudante</label>
19 |             <br><br>
20 |             <button>Calcular tarifa</button>
21 |         </form>
22 |     </section>
23 |     <hr>
24 |     <section>
25 |         <h2>Valor da tarifa</h2>
26 |         <div id="result" style="font-size: 32px;color: blue;border: 1px solid black;width: 120px;height: 80px;display: flex;justify-content: center;align-items: center;"></div>
27 |     </section>
28 | 
29 |     <script>
30 |         function showResult(e) {
31 |             e.preventDefault();
32 |             const age = parseInt(document.getElementById('age').value);
33 |             const isStudentChecked = document.getElementById('student').checked;
34 |             const result = document.getElementById('result');
35 | 
36 |             result.innerText = computeFee(age, isStudentChecked);            
37 |         }
38 | 
39 |         function computeFee(age, isStudent) {
40 |             const fee = 2.5;
41 | 
42 |             if (isFreeFee(age)) return "Grátis";
43 | 
44 |             // vou dar precedência a ser estudante ao invés de idoso, porque o desconto é maior
45 |             if (isStudent) return fee * 0.5;
46 | 
47 |             if (isElder(age)) return fee * 0.7;
48 | 
49 |             return fee.toFixed(2);
50 |         }
51 | 
52 |         function isFreeFee(age) {
53 |             if (age <= 6) return true;
54 |             return false;
55 |         }
56 | 
57 |         function isElder(age) {
58 |             if (age >= 60) return true;
59 |             return false;
60 |         }
61 | 
62 |         document.getElementById('calculator').addEventListener('submit', (e) => showResult(e));
63 |     </script>
64 | </body>
65 | </html>


--------------------------------------------------------------------------------
/resolucoes/08.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="pt-BR">
 3 | <head>
 4 |     <meta charset="UTF-8">
 5 |     <meta http-equiv="X-UA-Compatible" content="IE=edge">
 6 |     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 7 |     <title>Calculadora básica</title>
 8 | </head>
 9 | <body>
10 |     <h1>Calculadora básica</h1>
11 |     <section>
12 |         <h2>Digite os números, escolha a operação e clique para ver o resultado</h2>
13 |         <form id="calculator">
14 |             <input type="number" required style="width: 80px;height: 40px;font-size: 20px;text-align: center;">
15 |             <select name="operator" id="operator" style="width: 80px;font-size: 20px;text-align: center;">
16 |                 <option value="soma">+</option>
17 |                 <option value="subtrai">-</option>
18 |                 <option value="multiplica">*</option>
19 |                 <option value="divide">/</option>
20 |             </select>
21 |             <input type="number" required style="width: 80px;height: 40px;font-size: 20px;text-align: center;">
22 |             <button>Ver resultado</button>
23 |         </form>
24 |     </section>
25 |     <section>
26 |         <h2>Resultado</h2>
27 |         <div id="result" style="font-size: 32px;color: blue;border: 1px solid black;width: 80px;height: 80px;display: flex;justify-content: center;align-items: center;"></div>
28 |     </section>
29 | 
30 |     <script>
31 |         function showResult(e) {
32 |             e.preventDefault();
33 |             const [x, y] = document.querySelectorAll('input');
34 |             const operator = document.getElementById('operator');
35 |             const result = document.getElementById('result');
36 | 
37 |             result.innerText = compute(
38 |                 parseFloat(x.value),
39 |                 parseFloat(y.value),
40 |                 operator.value
41 |             );            
42 |         }
43 | 
44 |         function compute(x, y, operator) {
45 |             switch (operator) {
46 |                 case 'soma':
47 |                     return x+y;
48 |                     break;
49 |                 case 'subtrai':
50 |                     return x-y;
51 |                     break;
52 |                 case 'multiplica':
53 |                     return x*y;
54 |                     break;
55 |                 case 'divide':
56 |                     return (x/y).toFixed(2);
57 |                     break;
58 |             }
59 |         }
60 | 
61 |         document.getElementById('calculator').addEventListener('submit', (e) => showResult(e));
62 |     </script>
63 | </body>
64 | </html>


--------------------------------------------------------------------------------
/resolucoes/35.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="pt-br">
 3 | 
 4 | <head>
 5 |     <meta charset="UTF-8">
 6 |     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 7 |     <title>Exercício 35</title>
 8 | </head>
 9 | 
10 | <body>
11 |     <input type="text" oninput="filterUsingDisplay(this.value)" placeholder="Filtrar por nome (gabarito)">
12 |     <br /><br />
13 |     <input type="text" oninput="filterByKeyword(this.value)" placeholder="Filtrar por nome">
14 |     <!-- list created by chatGPT -->
15 |     <ul class="list">
16 |         <li>Gato</li>
17 |         <li>Cachorro</li>
18 |         <li>Rato</li>
19 |         <li>Cavalo</li>
20 |         <li>Coelho</li>
21 |         <li>Gato</li>
22 |         <li>Elefante</li>
23 |         <li>Cachorro</li>
24 |         <li>Leão</li>
25 |         <li>Girafa</li>
26 |         <li>Macaco</li>
27 |         <li>Gato</li>
28 |         <li>Tigre</li>
29 |         <li>Gato</li>
30 |         <li>Urso</li>
31 |     </ul>
32 |     <script>
33 |         // backup of the original list, so we don't lose
34 |         // any items when the list is updated by a filter
35 |         const originalList = Array.from(document.querySelector('.list').children);
36 | 
37 |         const filterByKeyword = (value) => {
38 |             // copy the original list
39 |             const list = [...originalList];
40 | 
41 |             // filtered items will be added to this fragment
42 |             // Later on, this fragment will be used to replace the children 
43 |             // of the list in the HTML document
44 |             const filteredList = document.createDocumentFragment();
45 | 
46 |             // filter the desired elements
47 |             list.forEach(item => {
48 |                 const itemInList = item.innerText.toLowerCase();
49 |                 const keyword = value.toLowerCase();
50 |                 if(itemInList.includes(keyword)){
51 |                     filteredList.appendChild(item)
52 |                 }
53 |             });
54 | 
55 |             // update the HTML with the filtered list
56 |             document.querySelector('.list').replaceChildren(filteredList);
57 |         }
58 | 
59 |         // gabarito do instrutor, usando display: none nos li's 
60 |         // que não passarem no filtro
61 |         const filterUsingDisplay = (value) => {
62 |             console.log(value)
63 |             const items = document.querySelector('.list').querySelectorAll('li');
64 |             console.log(items)
65 |             items.forEach(item => item.style.display = item.innerText.toLowerCase().includes(value.toLowerCase()) ? '' : 'none')
66 |         }
67 |     </script>
68 | </body>
69 | 
70 | </html>


--------------------------------------------------------------------------------
/resolucoes/36.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="pt-br">
 3 | 
 4 | <head>
 5 |     <meta charset="UTF-8">
 6 |     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 7 |     <title>Exercício 36</title>
 8 |     <style>
 9 |         body {
10 |             display: flex;
11 |             justify-content: center;
12 |             align-items: center;
13 |             column-gap: 25px;
14 |         }
15 | 
16 |         li {
17 |             cursor: pointer;
18 |             padding: 5px 0;
19 |         }
20 | 
21 |         .selected {
22 |             background-color: chocolate;
23 |         }
24 | 
25 |         .controls {
26 |             display: flex;
27 |             flex-direction: column;
28 |             row-gap: 10px;
29 |         }
30 |     </style>
31 | </head>
32 | 
33 | <body>
34 |     <ul class="list">
35 |         <li>Gato</li>
36 |         <li>Cachorro</li>
37 |         <li>Rato</li>
38 |         <li>Cavalo</li>
39 |         <li>Coelho</li>
40 |         <li>Elefante</li>
41 |         <li>Leão</li>
42 |     </ul>
43 |     <div class="controls">
44 |         <button onclick="onButtonUp()">☝️</button>
45 |         <button onclick="onButtonDown()">👇</button>
46 |     </div>
47 |     <script>
48 |         const onItemSelected = (e) => {
49 |             const itemClicked = e.target;
50 |             const parent = itemClicked.parentElement;
51 | 
52 |             // element.style.backgroundColor = '#fdfdfd';
53 |             // clean the background-color of all items
54 |             Array.from(parent.children).forEach(item => item.classList.remove('selected'));
55 | 
56 |             // add selected class to the current clicked item
57 |             itemClicked.classList.add('selected');
58 |         }
59 | 
60 |         const onButtonUp = () => {
61 |             const parent = document.querySelector('.list');
62 |             const items = parent.children;
63 |             for (let i = 0; i < items.length; i++) {
64 |                 const element = items[i];
65 |                 if (element.classList.contains('selected')) {
66 |                     if (i > 0) {
67 |                         const previousElement = items[i - 1];
68 |                         parent.insertBefore(element, previousElement);
69 |                     }
70 |                 }
71 |             }
72 |         }
73 | 
74 |         const onButtonDown = () => {
75 |             const parent = document.querySelector('.list');
76 |             const items = parent.children;
77 |             for (let i = 0; i < items.length; i++) {
78 |                 const element = items[i];
79 |                 if (element.classList.contains('selected')) {
80 |                     if (i < items.length - 1) {
81 |                         const nextElement = items[i + 1];
82 |                         parent.insertBefore(nextElement, element);
83 |                         // Advance to the next element.
84 |                         // This prevents continuously shifting the 
85 |                         // clicked element with the next element
86 |                         i++;
87 |                     }
88 |                 }
89 |             }
90 |         }
91 | 
92 |         document.querySelectorAll('li').forEach(item => item.addEventListener('click', onItemSelected));
93 |     </script>
94 | </body>
95 | 
96 | </html>


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
  1 | # Desafios de JavaScript
  2 | 
  3 | Aqui há uma série de desafios/exercícios propostos pelo Matheus Battisti em seu curso "Desafios de JavaScript - entrevistas e testes técnicos", disponível na [Udemy](https://www.udemy.com/course/desafios-de-javascript-entrevistas-e-testes-tecnicos/).
  4 | 
  5 | A complexidade vai aumentando a cada desafio, começando dos fundamentos até chegar em temas mais avançados como manipulação de DOM e assincronismo.
  6 | 
  7 | > 👉 Se quiser fazer uma revisão sobre JavaScript, recomendo [ler minhas anotações](https://github.com/zingarelli/anotacoes-estudo/blob/main/JavaScript.md). 
  8 | 
  9 | > 👉 Tenho grande parte de minhas **anotações de estudo armazenadas em um repositório**, não só sobre JavaScript, como também outras tecnologias, como React, Next, Git, etc. Caso se interesse, dê uma olhada [neste link](https://github.com/zingarelli/anotacoes-estudo).
 10 | 
 11 | ## Lista dos desafios
 12 | 
 13 | Segue abaixo o que é pedido em cada desafio. Minha resolução para cada um também se encontra neste repositório, sendo que o nome de cada arquivo é referente ao número do desafio. 
 14 | 
 15 | Você também pode conferir o [repositório do instrutor](https://github.com/matheusbattisti/desafios_javascript) com todas as soluções.
 16 | 
 17 | ### 01 - Conversão de temperatura 
 18 | 
 19 | Criar um código para conversão de temperatura entre Celsius e Fahrenheit.
 20 | 
 21 | Fórmulas:
 22 | 
 23 | $$F = (C * \dfrac{9}{5}) + 32$$
 24 | 
 25 | 
 26 | $$C = (F - 32)*\dfrac{5}{9}$$
 27 | 
 28 | ### 02 - Cálculo de IMC
 29 | 
 30 | Criar um código para calcular o Índice de Massa Corporal, recebendo dados de altura e peso.
 31 | 
 32 | Fórmula:
 33 | 
 34 | $$IMC = peso \div altura^2$$
 35 | 
 36 | ### 03 - Concatenação de strings
 37 | 
 38 | Receba ou armazene três dados (nome, idade e cidade) e exiba uma mensagem concatenando estes dados.
 39 | 
 40 | ### 04 - Área e perímetro de retângulo
 41 | 
 42 | Receba ou armazene os valores de lado de um retângulo e exiba os valores de área e perímetro.
 43 | 
 44 | ### 05 - Verificação de divisibilidade
 45 | 
 46 | Receba ou armazene dois valores (`x` e `y`) e informe se `x` é divisível por `y` (a divisão dá resto zero).
 47 | 
 48 | ### 06 - Classificação de faixa etária
 49 | 
 50 | Receba ou armazene um valor de idade e informe a que faixa etária a idade pertence, baseado na classificação abaixo:
 51 | 
 52 | - Criança: 0 a 12 anos;
 53 | - Adolescente: 13 a 17 anos;
 54 | - Adulto: 18 a 59 anos;
 55 | - Idoso: 60+ anos.
 56 | 
 57 | Faça a verificação utilizando **if/else**.
 58 | 
 59 | ### 07 - Comparação de números
 60 | 
 61 | Crie um programa que compara dois números e informa se o primeiro é maior, menor ou igual ao segundo. 
 62 | 
 63 | Utilize **if/else**.
 64 | 
 65 | ### 08 - Calculadora
 66 | 
 67 | Faça uma calculadora básica, que recebe dois números e a operação entre eles, e retorne o resultado. 
 68 | 
 69 | Utilize o **switch** para armazenar a operação escolhida.
 70 | 
 71 | *Observação: fiz a resolução deste exercício e do próximo em um arquivo HTML, para variar um pouco.*
 72 | 
 73 | ### 09 - Cálculo de tarifas.
 74 | 
 75 | Crie um programa que exibe o valor de uma tarifa dependendo da idade e tipo do usuário (estudante ou regular).
 76 | 
 77 | O valor básico é R$2,50. Esse valor é alterado de acordo com a regra a seguir:
 78 | 
 79 | - Menores de 6 anos: grátis, tarifa zero;
 80 | - Estudantes: 50% de desconto;
 81 | - Idosos (60+): 30% de desconto;
 82 | - Regular: tarifa normal.
 83 | 
 84 | ### 10 - Somatório 1 a N
 85 | 
 86 | Receba/armazene um valor `N` e exiba o resultado da soma de 1 até `N`.
 87 | 
 88 | O desafio deve ser feito utilizando estruturas de repetição. 
 89 | 
 90 | ### 11 - Tabuada
 91 | 
 92 | Receba/armazena um número `N` e exiba a tabuada desse número, de 1 até 10.
 93 | 
 94 | O desafio deve ser feito utilizando estruturas de repetição. 
 95 | 
 96 | ### 12 - Números primos
 97 | 
 98 | Receba/armazene um valor `N` e exiba todos os números primos de 1 até `N`.
 99 | 
100 | O desafio deve ser feito utilizando estruturas de repetição. 
101 | 
102 | ### 13 - Padrão de asteriscos
103 | 
104 | Faça um código que recebe/armazena um valor `N` e exibe um padrão de asteriscos (`*`) até esse valor. 
105 | 
106 | O padrão é: um asterisco na linha 1, dois asteriscos na linha 2, ..., `N` asteriscos na linha `N`.
107 | 
108 | ### 14 - Fibonacci
109 | 
110 | Receba/armazene um número `N` e exiba a sequência de Fibonacci até `N`.
111 | 
112 | ### 15 - Par ou ímpar
113 | 
114 | Crie uma função que recebe um valor `N` como argumento e verifica se é par ou ímpar. Imprima o resultado na tela.
115 | 
116 | ### 16 - Fatorial
117 | 
118 | Crie uma função que retorne o fatorial de um número, passado como parâmetro. Imprima o resultado na tela.
119 | 
120 | ### 17 - Máximo e mínimo
121 | 
122 | Crie duas funções. Ambas irão receber dois número, `N` e `M`, como argumentos. Uma deve retornar o maior valor entre os dois números. A outra deve retornar o menor valor. Imprima os resultados na tela.
123 | 
124 | ### 18 - Inversão de string
125 | 
126 | Crie uma função que recebe uma string e retorna seu inverso. Imprima o resultado na tela.
127 | 
128 | ### 19 - Contagem de vogais
129 | 
130 | Crie uma função que recebe uma string e retorna a quantidade de vogais no texto recebido. Imprima o resultado na tela.
131 | 
132 | ### 20 - Palíndromo
133 | 
134 | Crie uma função que identifica se uma palavra ou frase é palíndromo.
135 | 
136 | > Palíndromo: frase ou palavra que, quando lida em ordem reversa, obtém-se a mesma frase ou palavra.
137 | 
138 | ### 21 - Array de números aleatórios
139 | 
140 | Crie uma função que gera um array de números aleatórios. A função recebe como argumento: tamanho do array, valor mínimo e valor máximo dos números.
141 | 
142 | ### 22 - Elemento mais frequente
143 | 
144 | Crie uma função que recebe um array como argumento e retorna o elemento que mais aparece no array.
145 | 
146 | ### 23 - Remoção de elementos repetidos
147 | 
148 | Crie um programa que recebe um array, remove os elementos que estiverem repetidos e retorna um array sem essas repetições.
149 | 
150 | ### 24 - Concatenar arrays
151 | 
152 | Receba dois arrays e retorne um novo array que é a união de todos os elementos dos arrays anteriores.
153 | 
154 | Exemplo:
155 | 
156 |     Entrada: [0, 1, 2] e [1, 2, 3]
157 |     Saída: [0, 1, 2, 1, 2, 3]
158 | 
159 | ### 25 - Interseção de arrays
160 | 
161 | Receba dois arrays e retorne um novo array com os elementos que os dois arrays anteriores têm em comum.
162 | 
163 | ### 26 - Média dos elementos
164 | 
165 | Crie um programa que recebe um array numérico e retorna a média dos valores desses elementos.
166 | 
167 | ### 27 - Soma de propriedades de um objeto
168 | 
169 | Seu programa irá receber um objeto com diversas propriedades contendo valores numéricos. Você deve retornar a soma dos valores dessas propriedades.
170 | 
171 | ### 28 - Filtrando propriedades
172 | 
173 | Faça um programa que exiba somente as propriedades de um objeto que o usuário desejar.
174 | 
175 | Seu programa irá receber um objeto e um array contendo as propriedades desejadas. 
176 | 
177 | Extra: faça uma verificação se a propriedade passada no array existe no objeto.
178 | 
179 | ### 29 - União de objetos
180 | 
181 | Seu programa irá receber dois objetos com propriedades variadas. Você deve retornar um novo objeto que contenha todas as propriedades dos dois objetos anteriores.
182 | 
183 | Dúvida: e se os objetos possuírem uma mesma propriedade? 
184 | 
185 | - Não tratei este caso. O comportamento do JS é sobrescrever a propriedade caso você passe um novo valor para a propriedade que já existe.
186 | 
187 | - Uma solução seria incluir os valores em um array, quando a propriedade já existe.
188 | 
189 | ### 30 - Manipulando DOM 
190 | 
191 | Este e os próximos exercícios (até o 38) serão manipulação de DOM, então estarão em um arquivo HTML com o JavaScript incluso ao final da tag `body`
192 | 
193 | Para o desafio 30, você deve criar um arquivo HTML contendo uma tag `h1` e um texto dentro dela. Usando JavaScript, você deve alterar o texto de `h1`.
194 | 
195 | ### 31 - Alterando CSS
196 | 
197 | Crie uma página com vários parágrafos e altere a cor de todos eles de uma vez, utilizando JavaScript.
198 | 
199 | ### 32 - Alternar classes
200 | 
201 | Crie uma div que recebe um estilo de `background-color`. Crie também um botão que, ao ser clicado, adiciona ou remove uma classe a essa div. Essa classe adicional deve alterar o `background-color` da div. 
202 | 
203 | ### 33 - Adicionar elementos
204 | 
205 | Crie uma página com várias `li`s e um botão. Ao ser pressionado, o botão deve criar uma nova `li`.
206 | 
207 | ### 34 - Remover elementos
208 | 
209 | Aproveitando a página criada no desafio 33, adicione um evento de click aos `li`s para que sejam removidos quando clicados.
210 | 
211 | ### 35 - Filtro por palavra
212 | 
213 | Faça uma página que possui uma lista de palavras e um input. Ao digitar uma palavra no input, mantenha somente os itens que coincidem com a palavra digitada.
214 | 
215 | ### 36 - Mover elementos
216 | 
217 | Crie uma página com uma lista de itens e dois botões. Adicione as seguintes funcionalidades a esta página:
218 | 
219 | - ao clicar em um item, altere a cor de fundo dele, para indicar que foi selecionado;
220 | - ao pressionar o primeiro botão, mova o item selecionado para cima;
221 | - ao pressionar o segundo botão, mova o item selecionado para baixo.
222 | 
223 | ### 37 - Modal
224 | 
225 | Crie um botão e uma `div`. Coloque algum conteúdo de texto na `div` e um botão/ícone de fechar. 
226 | 
227 | O conteúdo da `div` deverá aparecer na tela somente quando o botão é clicado. 
228 | 
229 | A `div` deverá sair da tela quando a pessoa clicar fora da área da `div` ou em seu botão de fechar.
230 | 
231 | *Observação*: fiz a resolução utilizando o elemento `dialog` ao invés de `div`. O `dialog` é um elemento HTML específico para este tipo de interação com modal.
232 | 
233 | ### 38 - Accordion
234 | 
235 | Crie um "accordion". 
236 | 
237 | Um accordion é uma lista de itens, em que cada item é composto por um título e um conteúdo. 
238 | 
239 | - Somente os títulos são exibidos na tela, ficando seu respectivo conteúdo oculto. 
240 | 
241 | - Quando um título é clicado, aí então seu respectivo conteúdo exibido. 
242 | 
243 | - Somente o conteúdo do título clicado deve ser exibido, ou seja, ao clicar em outro título, o conteúdo do anterior deve ficar novamente oculto e o atual deve ser exibido.
244 | 
245 | ### 39 - Temporizador personalizado
246 | 
247 | A partir deste exercício, voltamos a utilizar somente JS, para trabalhar com desafios envolvendo funções callback e assincronicidade.
248 | 
249 | Para este exercício, crie uma função que recebe dois argumentos: um valor em segundos e uma segunda função (função callback). Sua função deve executar este callback após passado o tempo em segundos.
250 | 
251 | ### 40 - Clone do `Array.map()`
252 | 
253 | Crie uma função que recebe dois argumentos: um array e uma função callback. Este callback será uma função de transformação, que irá realizar alguma operação (por exemplo, dobra o valor de um elemento passado como argumento).
254 | 
255 | Sua função deve aplicar essa função de transformação em cada elemento do array e retornar um novo array com esse resultado.
256 | 
257 | ### 41 - Execução condicional com callbacks
258 | 
259 | Crie uma função que recebe três funções de callback como argumento. O primeiro argumento é um callback que verifica uma condição. O segundo argumento é um callback que será executado caso a verificação retorne verdadeiro. Já o terceiro argumento é um callback a ser executado caso a verificação retorne falso.
260 | 
261 | ### 42 - Simulação de resposta de API
262 | 
263 | Crie uma função que irá simular uma resposta a uma API. Esta função recebe um valor e um tempo em milissegundos, e deve retornar uma Promise que devolve o valor após decorrido o tempo.
264 | 
265 | *Extra*: crie uma função assíncrona que chama a função anteriormente criada e imprime na tela o valor após a Promise ser resolvida.
266 | 
267 | ### 43 - Retorno de dados com fetch
268 | 
269 | Crie uma função que recebe uma URL como parâmetro e retorna uma promise com os dados dessa URL.
270 | 
271 | *Nota*: a função `fetch()` não está disponível por padrão no Node.js. Então, caso utilize esta função, lembre de rodar seu script em uma página HTML.
272 | 
273 | ### 44 - Cadeia de Promises
274 | 
275 | Você terá uma função que recebe como parâmetro um array com várias URLs. A função deverá fazer fetch para cada uma das URLs, em sequência, e reunir o resultado delas em um novo array, a ser devolvido como retorno da função.
276 | 
277 | ### 45 - Retry com Promises
278 | 
279 | Crie uma função que irá fazer uma chamada a uma API um número `X` de tentativas, com um delay `Y` a cada tentativa mal sucedida. A chamada à API deve cessar quando a tentativa for bem sucedida (sucesso na Promise) ou quando o número de tentativas acabar. 
280 | 
281 | A função terá os seguintes parâmetros:
282 | 
283 | - função callback com uma chamada a uma API;
284 | 
285 | - quantidade de tentativas;
286 | 
287 | - delay entre cada tentativa.
288 | 


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