├── README.md ├── aulas2ti ├── append ├── card.html ├── index.html ├── script.js ├── script2.js └── style.css ├── exercicio1.html ├── exercicio2.html ├── exercicio3.html ├── exercicio4.html ├── exercicio5.html ├── exercicio6.html └── exercicio7.html /README.md: -------------------------------------------------------------------------------- 1 | # javascript101 2 | 3 | Faça o exercícios abaixo: 4 | 1 – Calcule a média de diversas notas digitadas pelo usuário. 5 | 6 | 2 – Faça um programa que entre com cinco números e imprima o quadrado de cada número. 7 | 8 | 3 – Peça ao usuário para digitar 5 números em uma caixa de texto. Verifique qual é o maior número e exiba-o. 9 | 10 | 4 – Peça ao usuário para digitar várias idades. Exiba quantas pessoas são maior de idade (18 anos) e quantas são menores. 11 | 12 | 5 – Crie um programa que entre com os dados de altura e sexo de 5 pessoas. Imprima na tela quantas pessoas são do sexo masculino e quantas pessoas são do sexo feminino. Mostre também qual é a maior altura e se essa altura é de um homem ou uma mulher. 13 | 14 | 6 – Peça ao usuário para digitar vários nomes. Exiba na tela todos os nomes digitados, porém de maneira invertida (do último para o primeiro). 15 | 16 | 7 – Peça para o usuário digitar uma data. Exiba separadamente o dia, o mês e o ano. (Obs.: não necessita de laço de repetição) 17 | -------------------------------------------------------------------------------- /aulas2ti/append: -------------------------------------------------------------------------------- 1 | 2 | //Criar dois elementos html - Input e Button 3 | //Quando o usuario clicar, adicionar o nome digitado 4 | //na lista de amigos. 5 | 6 | 7 | //Olhem pra casa! Silêncio!!! 8 | 9 | /* 10 | 1. Pegar o meu elemento do HTML pelo ID!!! 11 | 2. Ouvir o click do botão 12 | 3. Escrever na tela 13 | 14 | */ 15 | 16 | let elemento = document.getElementById('amigos'); 17 | let botaoAdd = document.getElementById("addAmigo"); 18 | let escreverTela = document.getElementById("linhas"); 19 | 20 | 21 | let listaAmigo = []; 22 | 23 | botaoAdd.addEventListener("click", ()=>{ 24 | //Criar um elemento 25 | const node = document.createElement("li"); 26 | listaAmigo.push(elemento.value); 27 | const textnode = document.createTextNode(elemento.value); 28 | node.appendChild(textnode); 29 | escreverTela.appendChild(node); 30 | 31 | }); 32 | 33 |
    34 |
35 | 36 | -------------------------------------------------------------------------------- /aulas2ti/card.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 |

Round Card

9 | 10 | 11 | 12 | 13 | 14 | 15 |
16 | 17 |
18 | 19 | 20 | 21 | -------------------------------------------------------------------------------- /aulas2ti/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 |
13 |

Nome amigo

14 | 15 | 16 |

17 |
18 | 19 | 20 | -------------------------------------------------------------------------------- /aulas2ti/script.js: -------------------------------------------------------------------------------- 1 | 2 | //Criar dois elementos html - Input e Button 3 | //Quando o usuario clicar, adicionar o nome digitado 4 | //na lista de amigos. 5 | 6 | 7 | //Olhem pra casa! Silêncio!!! 8 | 9 | /* 10 | 1. Pegar o meu elemento do HTML pelo ID!!! 11 | 2. Ouvir o click do botão 12 | 3. Escrever na tela 13 | 14 | */ 15 | 16 | let elemento = document.getElementById('amigos'); 17 | let botaoAdd = document.getElementById("addAmigo"); 18 | 19 | let listaAmigo = [] 20 | 21 | botaoAdd.addEventListener("click", ()=>{ 22 | //Adicionar amigo (texto digitado no INPUT) na lista 23 | listaAmigo.push(elemento.value) 24 | console.log(listaAmigo); 25 | }); 26 | 27 | 28 | -------------------------------------------------------------------------------- /aulas2ti/script2.js: -------------------------------------------------------------------------------- 1 | const text = document.getElementById("nome"); 2 | const email = document.getElementById("email"); 3 | const fone = document.getElementById("telefone"); 4 | const btn = document.getElementById("add"); 5 | 6 | btn.addEventListener("click", () => { 7 | const element = document.createElement("div"); 8 | // const textNode = document.createTextNode(text.value); 9 | // element.appendChild(textNode); 10 | document.getElementById("linhas").appendChild(element); 11 | 12 | element.innerHTML = `
13 | Avatar 18 |
19 |

${nome.value}

20 |

${telefone.value}

21 |

${email.value}

22 |

Interior Designer

23 |
24 |
`; 25 | }); -------------------------------------------------------------------------------- /aulas2ti/style.css: -------------------------------------------------------------------------------- 1 | .card { 2 | box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2); 3 | transition: 0.3s; 4 | border-radius: 5px; 5 | margin-top: 1rem; 6 | width: 100%; 7 | 8 | } 9 | 10 | .card:hover { 11 | box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.2); 12 | } 13 | 14 | img { 15 | border-radius: 5px 5px 0 0; 16 | } 17 | 18 | .container { 19 | padding: 2px 16px; 20 | 21 | } 22 | 23 | section{ 24 | display: flex; 25 | flex-wrap: wrap; 26 | } 27 | 28 | div{ 29 | width: 25%; 30 | margin: 1rem; 31 | } 32 | 33 | -------------------------------------------------------------------------------- /exercicio1.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | TODO supply a title 6 | 7 | 8 | 11 | 12 | 13 | 14 | Números 15 | 16 | 17 | 18 | 19 | 20 | -------------------------------------------------------------------------------- /exercicio2.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | TODO supply a title 6 | 7 | 8 | 11 | 12 | 13 | 14 | Números 15 | 16 | 17 | 18 | 19 | -------------------------------------------------------------------------------- /exercicio3.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | TODO supply a title 5 | 6 | 7 | 10 | 11 | 12 | 13 | Números 14 | 15 | 16 | 17 | 18 | -------------------------------------------------------------------------------- /exercicio4.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | TODO supply a title 5 | 6 | 7 | 10 | 11 | 12 | 13 | Idades 14 | 15 | 16 | 17 | 18 | -------------------------------------------------------------------------------- /exercicio5.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | TODO supply a title 5 | 6 | 7 | 10 | 11 | 12 | Altura 13 |
14 | Sexo 15 | 16 | 17 | 18 | -------------------------------------------------------------------------------- /exercicio6.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | TODO supply a title 5 | 6 | 7 | 10 | 11 | 12 | 13 | Nomes 14 | 15 | 16 | 17 | 18 | -------------------------------------------------------------------------------- /exercicio7.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | TODO supply a title 5 | 6 | 7 | 10 | 11 | 12 | Data 13 | 14 | 15 | 16 | --------------------------------------------------------------------------------