Exercicio-aula-2.md

Links:

• Slides
• Tunando seu atom

Sites complementares:

• https://code.org
• https://www.codecademy.com
• https://www.codecombat.com
• https://www.alura.com.br
• https://www.w3schools.com/css
• https://www.w3schools.com/html
• https://www.w3schools.com/js

Exercícios:

Critérios de avaliação:

• Lógica aplicada para resolver os problemas.
• Coesão e clean code, principalmente nomes auto explicativos e reaproveitamento de código.
• Não será aceito nenhum material que esteja fora do repositório previsto para a entrega.
• Não será válido, nenhum repositório com commits após 19/03/2018 23:59:59.
• Surpreenda-nos 😄

Para ser um bom programador, é necessário seguir padrões, então envie-nos seus exercícios no seguinte formato:

• O repositório deve chamar uds-trainee-exercicios-complementares-aula-02
• Os exercícios de 1 a 2 devem ser respondidos em um arquivo respostas-exercícios-de-1-a-2.md com suas respostas. É necessário mostrar o enunciado da pergunta antes de sua resposta.
• Os exercícios de 3 a 15 devem estar em um arquivo exercício-{numero do exercicio aqui}.html, exercicio-15.html por exemplo. A tag title do html deve possuir o corpo "Exercício {numero do exercício aqui}", e deve existir uma tag p com o enunciado do exercício dentro da tag body.

Lista de exercícios:

1. (1 ponto) O que são variáveis, e quais os seus tipos?

2. (1 ponto) Explique com suas palavras, o que é Syntax (ou Sintaxe).

3. (1 ponto) Escreva uma função que receba um número, via prompt, e alerte se o número é par ou impar.

4. (1 ponto) Escreva uma função que receba um parâmetro e informe se o mesmo é ou não um número inteiro.

5. (1 ponto) Escreva uma função para ler uma temperatura em graus Fahrenheit, calcular e alertar o valor correspondente em graus Celsius. A temperatura deve ser inputada pelo usuário, via prompt.

6. (1 ponto) Escreva uma função para calcular e alertar o número de lâmpadas necessárias para iluminar um determinado cômodo de uma residência. Dados de entrada: a potência da lâmpada utilizada (em watts), as dimensões (largura e comprimento, em metros) do cômodo. Considere que a potência necessária é de 18 watts por metro quadrado. As entradas devem ser inputadas via prompt e nãp devem aceitar valores não numéricos.

7. (1 ponto) Escreva uma função para ler um valor, via prompt, e alertar se é positivo ou negativo. Considere o valor zero como positivo.

8. (1 ponto) Escreva uma função que leia o código de origem de um produto, via prompt, e imprima na tela a região de sua procedência conforme a tabela abaixo:

   • Código 1: Sul
   • Código 2: Norte
   • Código 3: Leste
   • Código 4: Oeste
   • Código 5 ou 6: Nordeste
   • Código 7, 8 ou 9: Sudeste
   • Código 10: Centro-Oeste
   • Código 11: Noroeste
   • Observação: Caso o código não seja nenhum dos especificados o produto deve ser encarado como Importado.

9. (1 ponto) Escreva uma função para ler 2 valores, o sistema deve validar e não permitir valores iguais, e então alertar o maior deles.

10. (1.5 pontos) Escreva uma função que leia 10 valores numéricos, via input, e armazene-os num array.

11. (1.5 ponos) Escreva uma função que receba o array do exercício anterior e alerte a quantidade de elementos do array que são números negativos.

12. (2 pontos) Para cada conjunto de valores abaixo, escreva o código, usando laço(s), que preencha um array com os valores:

    • 10 9 8 7 6 5 4 3 2 1
    • 0 1 4 9 16 25 36 49 64 81 100
    • 1 2 3 4 5 10 20 30 40 50
    • 3 4 7 12 19 28 39 52 67 84

13. (1 ponto) Usando o objeto Date, crie um script que apresente a data no formato: dd/mm/aaaa.\

14. (5 pontos) Crie um objeto que possua uma propriedade números, do tipo array. Esse objeto deve possuir métodos:

    • que adicione um número a propriedade números;
    • que receba um número por parâmetro e verifique se ele está presente ou não na propriedade números;
    • que remova um número já existente ou alerte caso o número não esteja presente na propriedade números;
    • que retorne os números positivos existentes na propriedade números;
    • que retorne os números negativos existentes na propriedade números;
    • que retorne os números pares existentes na propriedade números;
    • que retorne os números impares existentes na propriedade números;
    • que retorne a soma dos números existentes na propriedade números;
    • Observação: Não deve ser possível adicionar valores não números na propriedade números;

15. (10 pontos) Escreva um código que atenda os sequintes requisitos:

    • Possua um objeto cliente, com as propriedades nome, sexo, data de nascimento, e endereço (sendo um objeto com as propriedades cep, logradouro, número, complemento, bairro, cidade, estado). Deve possuir um método que alerte todas as informações do cliente.
    • Possua um objeto produto com as propriedades titulo, descrição e valor. Deve possuir um método que alerte seu nome e valor.
    • Possua um objeto venda com as propriedades data, cliente, produtos, desconto e acréscimo. Deve existir um método que receba um objeto cliente e adicione-o a propriedade cliente. Deve ser possível adicionar n produtos, através de um método, que receba um objeto produto e uma quantidade, e adicione-os na propriedade produtos. Deve existir um método que retorne o um objeto com as propriedades valor dos produtos, e valor total, sendo este, a soma dos valores produtos vezes a quantidade, menos o desconto, mais o acréscimo.

Importante!!!

• Vou dar um ponto, pra quem tiver foto no github cadastrada no gravatar!
• Dúvidas, sugestões ou reclamações: [email protected]
• Inscreva-se no canal do slack (obrigatório)

Caso queira falar comigo, ou me adicionar a sua network:

• Facebook
• Linkedin
• Github
• Twitter

Oi Bailão,
Enviei um email pra você pelo gmail sobre uma dúvida de como faço para preencher automaticamente a estrutura de HTML no Atom (Você explicou no laboratório mas eu não me recordo.)

Vinicius, boa tarde, é bem simples, abre um documento novo no seu atom, salva ele como .html e quando for escrever a primeira linha escreve "html" sem os sinais <> o atom até vai mostrar o "html" em uma caixa de auto completar.

vai ficar assim

É isso ai mesmo! Valeu pela força @valeriocs

Boa noite Bailão :)

Enviei um email solicitando ajuda com css e js...
Não estou conseguindo manter a proporção das imagens

HTML/ CSS 1º Caso:

<div class="imagens">
    <img class="fotoPrincipal" src="imagens/foto01.png">
</div>

.fotoPrincipal {
  border: 8px solid black;
  border-radius: 50%;
  width: 300px;
  height: 300px;
  position: absolute;
  left: 130px;
  top: 30px;
}

HTML/CSS 2º Caso:

  <div class="fotos">
    <img class="foto02" src="imagens/foto02.jpg">
    <img class="foto03" src="imagens/foto03.png">
    <img class="foto04" src="imagens/foto04.jpg">
    <img class="foto05" src="imagens/foto05.jpg">
    <img class="foto06" src="imagens/foto06.jpg">
    <img class="foto07" src="imagens/foto07.jpg">
    <img class="foto08" src="imagens/foto08.jpg">
    <img class="foto09" src="imagens/foto09.jpg">
    <img class="foto10" src="imagens/foto10.jpeg">
    <img class="foto11" src="imagens/foto11.jpg">
    <img class="foto12" src="imagens/foto12.jpg">
  </div>

/* Primeira linha */
.foto02 {
  border: 8px solid black;
  border-radius: 50%;
  width: 150px;
  height: 150px;
  position: absolute;
  right: 115px;
  top: 30px;
}

.foto03 {
  border: 8px solid black;
  border-radius: 50%;
  width: 150px;
  height: 150px;
  position: absolute;
  right: 15px;
  top: 30px;
}
/* Primeira linha */

/* Segunda linha */
.foto04 {
  border: 8px solid black;
  border-radius: 50%;
  width: 150px;
  height: 150px;
  position: absolute;
  right: 315px;
  top: 220px;
}

.foto05 {
  border: 8px solid black;
  border-radius: 50%;
  width: 150px;
  height: 150px;
  position: absolute;
  right: 215px;
  top: 220px;
}

.foto06 {
  border: 8px solid black;
  border-radius: 50%;
  width: 150px;
  height: 150px;
  position: absolute;
  right: 115px;
  top: 220px;
}

.foto07 {
  border: 8px solid black;
  border-radius: 50%;
  width: 150px;
  height: 150px;
  position: absolute;
  right: 15px;
  top: 220px;
}
/* Segunda linha */

/* Terceira linha */
.foto08 {
  border: 8px solid black;
  border-radius: 50%;
  width: 150px;
  height: 150px;
  position: absolute;
  right: 415px;
  top: 410px;
}

.foto09 {
  border: 8px solid black;
  border-radius: 50%;
  width: 150px;
  height: 150px;
  position: absolute;
  right: 315px;
  top: 410px;
}

.foto10 {
  border: 8px solid black;
  border-radius: 50%;
  width: 150px;
  height: 150px;
  position: absolute;
  right:  215px;
  top: 410px;
}

.foto11 {
  border: 8px solid black;
  border-radius: 50%;
  width: 150px;
  height: 150px;
  position: absolute;
  right: 115px;
  top: 410px;
}

.foto12 {
  border: 8px solid black;
  border-radius: 50%;
  width: 150px;
  height: 150px;
  position: absolute;
  right: 15px;
  top: 410px;
}
/* Terceira linha */

Minha duvida sobre JS, é como faço para criar um lightbox para estas fotos do 2º caso... já tentei alguns exemplos na internet, até criei o lightbox, mas ele não abria a imagem.

Obs: Ainda vou ajustar meu código com display e flexbox :)

Boa noite @misaokumura, tudo bem? Sobre seu css, você está setando a width e a height da imagem para 300px isso as força a ficarem nessas dimensões. Sete apenas uma delas, e a imagem vai forçar a ficar proporcional 😃

Sobre o lightbox, a opção mais viável é adicionar uma dependência de terceiros, como o dakhar ou qualquer outro.

muito obrigado @valeriocs

Boa tarde Bailão,
olhando o css da @misaokumura notei q em todas as fotos ele só muda as duas ultimas propriedades, o right e o top, deixando o resto idêntico, tem como ela criar um css tipo .fotobase com todos as informações que se repetem e ai chamar as duas class? exemplo class="fotobase, foto1", isto é valido?

Boa tarde, Bailão.
No exercício 11, no caso, deve ser usado o array feito no exercício 10 como referência, certo? Parece que faltou o "10" no enunciado.

@AtmTuma Claro, em uma tag HTML podemos ter várias classes, uma solução pra esse problema de repetição de código seria exatamente o que você disse. Em cada tag de foto que terá a mesma propriedade de CSS deve-se criar uma class chamada por exemplo: "fotos". No CSS você pode simplesmente inserir .fotos { propriedades idênticas aqui } e manter os seus .foto1...n com as outras que se diferenciam.
Podemos também definir propriedades CSS utilizando vários seletores.

obrigada :) @julianobailao

@Pazzinato corrigido! Obrigado pelo apontamento.

@misaokumura por nada 0/