diff --git a/entrega/anna-beatriz/exemplo1/css/style.css b/entrega/anna-beatriz/exemplo1/css/style.css new file mode 100644 index 0000000..26a1487 --- /dev/null +++ b/entrega/anna-beatriz/exemplo1/css/style.css @@ -0,0 +1,81 @@ +* { + box-sizing: border-box; +} + +body { + font-family: 'Open Sans', Arial, Helvetica, sans-serif; + font-size: 16px; + background-color: #1d8dc0; + background-image: url('../../../../assets/news.png'); + background-repeat: no-repeat; + background-size: cover; +} + +.wrapper { + display: flex; + justify-content: center; + align-items: center; + width: 100%; + height: 100vh; +} + +.news { + width: 30%; + margin: 0 auto; + padding: 5px; + background-color: rgba(76, 0, 255, 0.274); +} + +.news__title { + color: #ffffff; + top: -130px; +} + +.news__form { +} + +.news__form-group { + position: relative; + width: 100%; +} + +.news__label { + display: block; + color: #ffffff; +} + +.news__input { + width: 100%; + border-radius: 2px; + border: 1px solid #ffffff; + height: 40px; + padding: 10px; + font-size: 14px; +} + +.error { + border: 3px solid #ff0101; +} + +.news__button { + background-color: #ecddf3; + color: #000000; + border-radius: 50px; + border: 0; + padding: 10px 20px; + width: 130px; + position: absolute; + bottom: -50px; + font-weight: bold; + left: 50%; + margin-left: -65px; + font-size: 16px; + transition: 0.3s; + cursor: pointer; +} + +.news__button:hover { + background-color: #053c55; + color: #ffffff; + transition: 0.3s; +} diff --git a/entrega/anna-beatriz/exemplo1/index.html b/entrega/anna-beatriz/exemplo1/index.html new file mode 100644 index 0000000..c516da2 --- /dev/null +++ b/entrega/anna-beatriz/exemplo1/index.html @@ -0,0 +1,39 @@ + + + + + + + + DevGirl Newsletter + + + + + + +
+
+

Hey DevGirl, assine nossa newsletter!

+ +
+
+ +
+
+ + +
+
+ +
+
+
+
+ + + + + \ No newline at end of file diff --git a/entrega/anna-beatriz/exemplo1/script/script.js b/entrega/anna-beatriz/exemplo1/script/script.js new file mode 100644 index 0000000..b7bcced --- /dev/null +++ b/entrega/anna-beatriz/exemplo1/script/script.js @@ -0,0 +1,7 @@ +//Capturar o valor inserido no input quando acionar o botão +//Retornar em um pop-up uma mensagem de sucesso para o usuário quando acionar o botão +//Adicionar um novo campo para a mensagem de sucesso quando acionar o botão +//Adicionar uma mensagem de sucesso personalizada com o email informado +//Alterar a cor do texto caso o email tenha sido cadastrado com sucesso +//Validar se os campos estão vazios ou não + diff --git a/entrega/anna-beatriz/exemplo2/css/style.css b/entrega/anna-beatriz/exemplo2/css/style.css new file mode 100644 index 0000000..2b854d7 --- /dev/null +++ b/entrega/anna-beatriz/exemplo2/css/style.css @@ -0,0 +1,89 @@ +/* GERAL */ +* { + box-sizing: border-box; +} + +body { + font-family: 'Open Sans', Arial, Helvetica, sans-serif; + font-size: 16px; + background-color: rgb(172, 12, 221); + padding: 20px; +} + +.wrapper { + padding: 20px; + background-color: #1e013242; +} + +.transacao { + width: 100%; + margin: 0 auto; + position: relative; +} + +.transacao__form { + display: flex; + justify-content: space-between; +} + +.transacao__title { + color: #ffffff; +} + +.transacao__form-group { + position: relative; + width: 100%; +} + +.transacao__label { + display: block; + color: #000000; +} + +.transacao__input { + width: 90%; + border-radius: 2px; + border: 1px solid #ecddf3; + height: 40px; + padding: 10px; + font-size: 14px; +} + +.transacao__button { + background-color: #a414ea; + color: #ffffff; + border-radius: 10px; + width: 90%; + font-weight: bold; + font-size: 16px; + transition: 0.3s; + cursor: pointer; + margin-top: 21px; + height: 40px; +} + +.transacao__button:hover { + background-color: #7f29aa; + color: #140a1a; + transition: 0.3s; +} + +.extrato__table { + width: 100%; + text-align: left; +} + +.extrato__header span + span { + border-left: 1px solid #ecddf3; + padding: 10px; +} + +.extrato__header span + span { + border-left: 1px solid #ecddf3; + padding: 10px; +} + +.extrato div:last-of-type span + span { + border-left: 1px solid #ecddf3; + padding: 10px; +} diff --git a/entrega/anna-beatriz/exemplo2/index.html b/entrega/anna-beatriz/exemplo2/index.html new file mode 100644 index 0000000..f09be42 --- /dev/null +++ b/entrega/anna-beatriz/exemplo2/index.html @@ -0,0 +1,52 @@ + + + + + + + + MyBank + + + + + + +
+
+

Controle Financeiro MyBank

+

Adicionar Gastos

+
+
+ + +
+
+ + +
+
+ + +
+
+ +
+
+
+
+

Relatório de Gastos

+
+

+ Nome da transação + Valor + Data +

+
+
+
+ + + + \ No newline at end of file diff --git a/entrega/anna-beatriz/exemplo2/script/script.js b/entrega/anna-beatriz/exemplo2/script/script.js new file mode 100644 index 0000000..33f74d4 --- /dev/null +++ b/entrega/anna-beatriz/exemplo2/script/script.js @@ -0,0 +1,10 @@ +//adicionar um novo gasto nos inputs e ao clicar o botão adicionar as informações devem aparecer abaixo do campo relatório de gastos + +// validar os três campos de input para que nenhum valor vazio possa ser adicionado + +const inputGastos = document.getElementById("transacaoInputName") +const inputValor = document.getElementById("transacaoInputMoney") +const inputData = document.getElementById +const botao = document.getElementById +const extrato = document.getElementById + diff --git a/entrega/anna-beatriz/exercicioParaCasa/1/css/style.css b/entrega/anna-beatriz/exercicioParaCasa/1/css/style.css new file mode 100644 index 0000000..9cce53b --- /dev/null +++ b/entrega/anna-beatriz/exercicioParaCasa/1/css/style.css @@ -0,0 +1,94 @@ +* { + margin: 0; + padding: 0; + font-family: 'montserrat', sans-serif; + box-sizing: border-box; +} + +body { + background-image: url('../img/study.jpg'); + background-repeat: no-repeat; + background-size: cover; + background-position: center; + min-height: 100vh; +} + +.container { + background-color: rgba(255, 255, 255, 0.5); + box-shadow: 0 0 25px rgba(0, 0, 0, 0.5); + width: 300px; + margin: 0 auto; + padding: 20px; + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + border-radius: 10px; +} + +input { + width: 100%; + border: none; + border-bottom: 3px solid #000; + background: none; + padding: 10px; + outline: none; + font-size: 18px; +} + +h1 { + text-align: center; + margin-bottom: 20px; + text-transform: uppercase; + font-size: 1.2rem; +} + +h3 { + margin: 10px 0; +} + +input { + margin-bottom: 20px; +} + +#button { + background-color: royalblue; + border: none; + padding: 15px; + color: aliceblue; + font-size: 20px; + text-transform: uppercase; + font-family: 'Raleway', sans-serif; + letter-spacing: 2px; + cursor: pointer; + border-radius: 10px; + margin-top: 20px; + line-height: 25px; + text-align: center; +} + +.media-titulo { + margin-top: 15px; +} + +.aprovacao { + background-color: green; + padding: 20px; + border-radius: 10px; + color: whitesmoke; + text-align: center; + +} + +.reprovacao { + background-color: red; + padding: 20px; + border-radius: 10px; + color: whitesmoke; + text-align: center; + +} + +.mensagem-de-erro { + color: red; +} diff --git a/entrega/anna-beatriz/exercicioParaCasa/1/img/study.jpg b/entrega/anna-beatriz/exercicioParaCasa/1/img/study.jpg new file mode 100644 index 0000000..25d5b7c Binary files /dev/null and b/entrega/anna-beatriz/exercicioParaCasa/1/img/study.jpg differ diff --git a/entrega/anna-beatriz/exercicioParaCasa/1/index.html b/entrega/anna-beatriz/exercicioParaCasa/1/index.html new file mode 100644 index 0000000..dcfeab2 --- /dev/null +++ b/entrega/anna-beatriz/exercicioParaCasa/1/index.html @@ -0,0 +1,27 @@ + + + + + + + + + + +
+

Calcule a sua média

+
+

Nota PROVA 1:

+ +

Nota PROVA 2:

+ +

Calcular Média

+

Sua média é:

+
+
+ + + + + + \ No newline at end of file diff --git a/entrega/anna-beatriz/exercicioParaCasa/1/script/script.js b/entrega/anna-beatriz/exercicioParaCasa/1/script/script.js new file mode 100644 index 0000000..1fa8948 --- /dev/null +++ b/entrega/anna-beatriz/exercicioParaCasa/1/script/script.js @@ -0,0 +1,63 @@ +// Calculadora de média de provas +// Você irá construir uma aplicação web com os seguintes requisitos: + +// Calcula o valor médio entre duas notas e informa ao aluno seu resultado quando o botão é acionado +// Resultados: APROVADO > 70% +// Resultados: REPROVADO < 70% + +// Exibir na mensagem a média atual do aluno. +// Ex: Parabéns! Você foi aprovado com a média X +// Ex: Infelizmente, você não atingiu a nota mínima para aprovação. Sua média é X + +// Validar campos de input para não aceitar valores vazios e formatos inválidos + +// ATENÇÃO - LEMBRE-SE QUE PARA TRANSFORMAR STRING(texto) EM NÚMERO É NECESSÁRIO UTILIZAR FUNÇÕES, PEQUISE parseInt ou parseFloat + +const botaoCalculo = document.querySelector("#button"); +const mediaMensagem = document.querySelector(".media-titulo"); + +function mediaCalculo (n1, n2) { + return Math.round((n1+n2)/2); +} + +botaoCalculo.addEventListener("click", function(event){ + event.preventDefault(); + let nota1 = parseFloat(document.querySelector(".nota1").value); + let nota2 = parseFloat(document.querySelector(".nota2").value); + let mediaFinal = mediaCalculo(nota1, nota2); + + if (mediaFinal >= 7 && mediaFinal <= 10) { + mediaMensagem.innerHTML = `Parabéns, você foi APROVADO com média ${mediaFinal}!`; + mediaMensagem.classList.add("aprovacao"); + mediaMensagem.classList.remove("reprovacao"); + mediaMensagem.classList.remove("mensagem-de-erro"); + } + + if (mediaFinal < 7 && mediaFinal >= 0) { + mediaMensagem.innerHTML = `Sorry, você foi REPROVADO com média ${mediaFinal}!`; + mediaMensagem.classList.remove("aprovacao"); + mediaMensagem.classList.add("reprovacao"); + mediaMensagem.classList.remove("mensagem-de-erro"); + } + + if (isNaN(nota1) || isNaN(nota2)) { + mediaMensagem.innerHTML = `Favor preencher novamente os campos com valores númericos entre 0 e 10`; + mediaMensagem.classList.remove("aprovacao"); + mediaMensagem.classList.remove("reprovacao"); + mediaMensagem.classList.add("mensagem-de-erro") + } + + if (nota1 > 10 || nota2 > 10 || nota1 < 0 || nota2 < 0) { + mediaMensagem.innerHTML = `Favor preencher novamente os campos com valores númericos entre 0 e 10`; + mediaMensagem.classList.remove("aprovacao"); + mediaMensagem.classList.remove("reprovacao"); + mediaMensagem.classList.add("mensagem-de-erro") + } + +}); + + + + + + diff --git a/entrega/anna-beatriz/exercicioParaCasa/desafio/css/style.css b/entrega/anna-beatriz/exercicioParaCasa/desafio/css/style.css new file mode 100644 index 0000000..8b90ae6 --- /dev/null +++ b/entrega/anna-beatriz/exercicioParaCasa/desafio/css/style.css @@ -0,0 +1,103 @@ +/* GERAL */ +* { + box-sizing: border-box; +} + +body { + font-family: 'Open Sans', Arial, Helvetica, sans-serif; + font-size: 16px; + background-image: url('../img/twitter.jpg'); + background-size: cover; +} + +.wrapper { + width: 40%; + margin: 15% auto; +} + +/* FORM */ + +.tweet-composer { + position: relative; + background-color: #1680ea; + padding: 10px 20px; +} + +.tweet-composer__form-group { + position: relative; + width: 100%; +} + +.tweet-composer__label { + display: block; +} + +.tweet-composer__input { + width: 100%; + border-radius: 2px; + border: 1px solid #ffffff; + min-height: 40px; + padding: 10px; + font-size: 14px; + resize: none; +} + +.tweet-composer__button { + border-radius: 50px; + border: 0; + padding: 10px 20px; + margin-top: 10px; + width: 130px; + font-weight: bold; + font-size: 16px; + cursor: pointer; + transition: 0.3s; +} + +.tweet-composer__button:hover { + background-color: #e6ecf0; + transition: 0.3s; +} + +.tweet-composer__counter { + display: inline-block; + text-align: right; + color: #fff; +} + +/* TIMELINE */ + +.tweets-timeline__box { + background-color: #ffffff; + margin: 1.3px 0; + border-radius: 1px; + padding: 10px 20px; +} + +.tweets-timeline__name { + font-weight: bold; +} + +.tweets-timeline__username { + color: gray; + font-size: 13px; +} + +.tweets-timeline__date { + color: gray; + font-size: 13px; +} + +.tweets-timeline__footer { + color: gray; + font-size: 13px; +} + +.tweets-timeline__delete-button { + color: gray; + font-size: 13px; + border: 0; + background: 0 0; + cursor: pointer; + padding: 0; +} diff --git a/entrega/anna-beatriz/exercicioParaCasa/desafio/img/twitter.jpg b/entrega/anna-beatriz/exercicioParaCasa/desafio/img/twitter.jpg new file mode 100644 index 0000000..27dfe1a Binary files /dev/null and b/entrega/anna-beatriz/exercicioParaCasa/desafio/img/twitter.jpg differ diff --git a/entrega/anna-beatriz/exercicioParaCasa/desafio/index.html b/entrega/anna-beatriz/exercicioParaCasa/desafio/index.html new file mode 100644 index 0000000..0801690 --- /dev/null +++ b/entrega/anna-beatriz/exercicioParaCasa/desafio/index.html @@ -0,0 +1,48 @@ + + + + + + + + Desafio Twitter + + + + + + +
+
+
+
+ + +
+
+ +

280

+
+
+
+
+
+
+ Bárbara Aguilar + @BahLutz + • 19 set +
+

+ Olá Pessoal, bom dia. Eu aprendi javascript e já estou apaixonada. Vou criar projetos e publicar no meu + github. #js #adoro #reprograma +

+ +
+
+
+ + + + \ No newline at end of file diff --git a/entrega/anna-beatriz/exercicioParaCasa/desafio/script/script.js b/entrega/anna-beatriz/exercicioParaCasa/desafio/script/script.js new file mode 100644 index 0000000..261abb3 --- /dev/null +++ b/entrega/anna-beatriz/exercicioParaCasa/desafio/script/script.js @@ -0,0 +1,13 @@ +//DESAFIO NÃO É OBRIGATÓRIO +// NÃO VALE PONTO +// É APENAS UM DESAFIO PARA QUEBRAR A CABEÇA UM POUCO RS +// FAÇA NO SEU TEMPO, PARA TREINAR E APROFUNDAR EM DOM + +// ESSE É O TWITTER CLONE E QUEREMOS REALIZAR ALGUMAS TAREFAS: +// -OS TWEETS CRIADOS DEVEM SER INSERIDOS NO FEED ABAIXO DO TWEET FIXADO +// -É NECESSÁRIO VALIDAR OS CAMPOS PARA NÃO ENVIAR TWEETS VAZIOS +// -LIMPAR O CAMPO DE INPUT APÓS O ENVIO DO TWEET +// -INSERIR EVENTO DE TECLADO PARA VALIDAR O NÚMERO DE CARACTERES DIGITADOS +// -EXIBIR NO CONTADOR A CONTAGEM REGRESSIVA DE UTILIZAÇÃO DOS CARACTERES +// -QUANDO FALTAR 5 CARACTERES ALTERAR A COR DO NÚMERO DO CONTADOR PARA VERMELHO +// -QUANDO O CONTADOR ATINGIR 0 O BOTÃO DE TWEET DEVE SER DESABILITADO