diff --git a/.vscode/settings.json b/.vscode/settings.json new file mode 100644 index 0000000..6f3a291 --- /dev/null +++ b/.vscode/settings.json @@ -0,0 +1,3 @@ +{ + "liveServer.settings.port": 5501 +} \ No newline at end of file diff --git a/Exercicios/1/index.html b/Exercicios/1/index.html index c048397..dd87494 100644 --- a/Exercicios/1/index.html +++ b/Exercicios/1/index.html @@ -7,6 +7,11 @@ Document - +
+ + +
+
+ \ No newline at end of file diff --git a/Exercicios/1/js/script.js b/Exercicios/1/js/script.js index e69de29..5160780 100644 --- a/Exercicios/1/js/script.js +++ b/Exercicios/1/js/script.js @@ -0,0 +1,15 @@ +document.querySelector('#botaoDeEnviar').addEventListener('click', function armazenarDados(event) { + event.preventDefault(); + + let pegaNome = document.getElementById('nomeDaPessoa'); + let exibeResposta = document.getElementById('resposta'); + + // pegaNome.value === '' ? exibeResposta.innerText= 'Por favor, digite o seu nome' : exibeResposta.innerHTML = (`${pegaNome.value}, dados salvos com sucesso!`) + + if (pegaNome.value === '') { + exibeResposta.innerText= 'Por favor, digite seu nome'; + } else { + exibeResposta.innerHTML = (`${pegaNome.value}, dados salvos com sucesso.`); + } + +}) \ No newline at end of file diff --git a/Exercicios/2/index.html b/Exercicios/2/index.html index 5c3fad8..0419b57 100644 --- a/Exercicios/2/index.html +++ b/Exercicios/2/index.html @@ -7,15 +7,15 @@

Venda de apartamentos

+
Apartamento de dois dormitórios, clique e veja o preço:
-
-
-
+
Apartamento de três dormitórios, clique e veja o preço:
- +
+ \ No newline at end of file diff --git a/Exercicios/2/js/script.js b/Exercicios/2/js/script.js index 67c244f..61c8c1a 100644 --- a/Exercicios/2/js/script.js +++ b/Exercicios/2/js/script.js @@ -1,12 +1,18 @@ function mostraPrecoAptoDoisDorm() { - //especificar o elemento do DOM que será manipulado. DICA: botão - //evento de exibição do valor do imóvel - }; + //evento de exibição do valor do imóvel + let getBotaoApDoisDorm = document.querySelector('#btnAptoDoisDorm'); - function mostraPrecoAptoTresDorm() { + getBotaoApDoisDorm.addEventListener('click', function mostraValor () { + + document.getElementById('precoAptoDoisDorm').innerText="Preço do imóvel: R$ 500.000,00"; - }; - - mostraPrecoAptoDoisDorm(); - mostraPrecoAptoTresDorm(); \ No newline at end of file + }) + +}; + +function mostraPrecoAptoTresDorm() { + document.getElementById('precoAptoTresDorm').innerHTML = " Preço do imóvel: R$ 600.000,00"; +}; + +mostraPrecoAptoDoisDorm(); \ No newline at end of file diff --git a/Exercicios/Teste-Event-Listener/index.html b/Exercicios/Teste-Event-Listener/index.html new file mode 100644 index 0000000..f225d35 --- /dev/null +++ b/Exercicios/Teste-Event-Listener/index.html @@ -0,0 +1,20 @@ + + + + + + + Document + + +

Olá a todes!

+ +

Meu nome é Jumara.

+ + Clique para mudar o background dessa página. + + + + + + \ No newline at end of file diff --git a/Exercicios/Teste-Event-Listener/script.js b/Exercicios/Teste-Event-Listener/script.js new file mode 100644 index 0000000..08a858e --- /dev/null +++ b/Exercicios/Teste-Event-Listener/script.js @@ -0,0 +1,9 @@ +document.getElementById('acoesBotao').addEventListener('click', function acionarBotao(event){ + event.preventDefault(); + + const mudaCorTitulo = document.querySelector('.meu-titulo').style.color = "blue"; + + const mudaParagrafo = document.querySelector('#meuNome').innerHTML += " E eu tenho 26 anos." + + const mudaSpan = document.querySelector('span').style.textDecoration = "underline"; +}); \ No newline at end of file diff --git a/Exercicios/Teste-Query-Selector/index.html b/Exercicios/Teste-Query-Selector/index.html new file mode 100644 index 0000000..6fd7d24 --- /dev/null +++ b/Exercicios/Teste-Query-Selector/index.html @@ -0,0 +1,20 @@ + + + + + + + Document + + +

Olá a todes!

+ +

Meu nome é Jumara.

+ + Clique para mudar o background dessa página. + + + + + + \ No newline at end of file diff --git a/Exercicios/Teste-Query-Selector/script.js b/Exercicios/Teste-Query-Selector/script.js new file mode 100644 index 0000000..59cd430 --- /dev/null +++ b/Exercicios/Teste-Query-Selector/script.js @@ -0,0 +1,5 @@ +function mudarCor() { + const mudaCorTitulo = document.querySelector('.meu-titulo').style.color = "blue"; + const mudaParagrafo = document.querySelector('#meuNome').innerHTML += " E eu tenho 26 anos." + const mudaSpan = document.querySelector('span').style.textDecoration = "underline"; +} \ No newline at end of file diff --git a/Exercicios/Teste-exemplo/index.html b/Exercicios/Teste-exemplo/index.html new file mode 100644 index 0000000..fb87ce0 --- /dev/null +++ b/Exercicios/Teste-exemplo/index.html @@ -0,0 +1,14 @@ + + + + + + + Aula JavaScript + + +

Clique no botão para mudar o texto desse parágrafo!

+ + + + \ No newline at end of file diff --git a/Exercicios/Teste-exemplo/script.js b/Exercicios/Teste-exemplo/script.js new file mode 100644 index 0000000..7813bc4 --- /dev/null +++ b/Exercicios/Teste-exemplo/script.js @@ -0,0 +1,4 @@ +function alterarTexto() { + const textoAAlterar = document.getElementById("mudanca-texto").innerHTML += " Hello Word"; + return textoAAlterar; +} \ No newline at end of file diff --git "a/Exerc\303\255cio de Casa/img/biblioteca.jpg" "b/Exerc\303\255cio de Casa/img/biblioteca.jpg" new file mode 100644 index 0000000..7e81681 Binary files /dev/null and "b/Exerc\303\255cio de Casa/img/biblioteca.jpg" differ diff --git "a/Exerc\303\255cio de Casa/img/botao-lixeira.png" "b/Exerc\303\255cio de Casa/img/botao-lixeira.png" new file mode 100644 index 0000000..947b3bc Binary files /dev/null and "b/Exerc\303\255cio de Casa/img/botao-lixeira.png" differ diff --git "a/Exerc\303\255cio de Casa/img/leitores.jpg" "b/Exerc\303\255cio de Casa/img/leitores.jpg" new file mode 100644 index 0000000..6291d07 Binary files /dev/null and "b/Exerc\303\255cio de Casa/img/leitores.jpg" differ diff --git "a/Exerc\303\255cio de Casa/img/livros.jpg" "b/Exerc\303\255cio de Casa/img/livros.jpg" new file mode 100644 index 0000000..0d59ffd Binary files /dev/null and "b/Exerc\303\255cio de Casa/img/livros.jpg" differ diff --git "a/Exerc\303\255cio de Casa/index.html" "b/Exerc\303\255cio de Casa/index.html" index e69de29..20ea185 100644 --- "a/Exerc\303\255cio de Casa/index.html" +++ "b/Exerc\303\255cio de Casa/index.html" @@ -0,0 +1,47 @@ + + + + + + + Document + + + +
+

Livros

+
+ + + + + + + + + + +
+
+ +
+
+
+ + + + + + + + + + + + + +
TítuloAutor(a)ISBNData de publicaçãoPáginasData de Inserção
+
+ + + \ No newline at end of file diff --git "a/Exerc\303\255cio de Casa/script/script.js" "b/Exerc\303\255cio de Casa/script/script.js" index e69de29..1755b69 100644 --- "a/Exerc\303\255cio de Casa/script/script.js" +++ "b/Exerc\303\255cio de Casa/script/script.js" @@ -0,0 +1,47 @@ +function exibirDados(event) { + event.preventDefault(); + + let pegaTitulo = document.getElementById('tituloLivro').value; + let pegaAutor = document.getElementById('nomeAutor').value; + let pegaIsbn = document.getElementById('isbnLivro').value; + let pegaData = document.getElementById('dataPublicacao').value; + let pegaPaginas = document.getElementById('paginasLivro').value; + let dataInsercao = new Date().toLocaleDateString('pt-br'); + let horarioInsercao = new Date().toLocaleTimeString('pt-br'); + + if (pegaTitulo === "" || pegaAutor === "" || pegaIsbn === "" || pegaData === "" || pegaPaginas === "") { + alert("Campo obrigatório não preenchido") + } else { + document.getElementById('corpoTabela').innerHTML += ` + + ${pegaTitulo} + ${pegaAutor} + ${pegaIsbn} + ${pegaData} + ${pegaPaginas} + ${dataInsercao}, ${horarioInsercao} + + + ` + limparCampo(); + } + +} + +function limparCampo() { + + document.getElementById('tituloLivro').value = ""; + document.getElementById('nomeAutor').value = ""; + document.getElementById('isbnLivro').value = ""; + document.getElementById('dataPublicacao').value = ""; + document.getElementById('paginasLivro').value = ""; + +} + +document.getElementById('corpoTabela').addEventListener('click', function removerLinha(event) { + if (event.target.className === "delete") { + let botao = event.target.parentElement; + botao.parentElement.remove(); + } +}) + diff --git "a/Exerc\303\255cio de Casa/style/style.css" "b/Exerc\303\255cio de Casa/style/style.css" index e69de29..71aa4a5 100644 --- "a/Exerc\303\255cio de Casa/style/style.css" +++ "b/Exerc\303\255cio de Casa/style/style.css" @@ -0,0 +1,262 @@ + +* { + box-sizing: border-box; + margin: 0; + padding: 0; +} + +body{ + background-color:cadetblue; +} + +/* MOBILE FIRST --- MOBILE FIRST */ + +/* FORMULÁRIO --- FORMULÁRIO --- FORMULÁRIO */ + +label { + font-size: 13px; + padding-bottom: 5px; +} + +input{ + margin-bottom: 10px; + padding: 5px; + border-color: rgb(163, 102, 10); +} + +.formulario{ + padding: 20px 20px 20px 20px; + background-color: rgba(0, 0, 0, 0.7); + color: antiquewhite; + border-radius: 40px; + margin: 10px 10px 10px 50px; + width: 80%; +} + +.titulo--formulario{ + font-size: 20px; + text-align: center; + color: antiquewhite; +} + +.texto--formulario { + padding: 8px; + display: flex; + flex-direction: column; +} + +#botaoDeAdicionar{ + width: 100%; + padding: 7px; + color: black; + background-color: rgb(103, 208, 184); + border-style:none; +} + +/* TABELA --- TABELA --- TABELA */ + +th{ + padding: 2px; + font-size: 10px; +} + +td{ + word-break: break-word; + padding-bottom: 15px; +} + +.section-tabela{ + display: flex; +} + +.tabela { + padding: 8px; + background-color: rgb(0, 0, 0, 0.7); + color: antiquewhite; + margin: 5px 5px 5px 50px; + border-radius: 20px; + width: 80%; +} + +.corpo--tabela{ + font-size: 9px; + text-align: center; +} + +.delete{ + font-size: 9px; + width: 17px; + height: 17px; + background-size: cover; + background-repeat: no-repeat; + background-position: center; + background-image: url(../img/botao-lixeira.png); + border-style: none; + border-radius: 2px; +} + +/* TABLET --- TABLET --- TABLET */ + +@media (min-width: 768px) { + + /* FORMULÁRIO --- FORMULÁRIO --- FORMULÁRIO */ + label { + font-size: 18px; + padding-bottom: 5px; + } + + input{ + margin-bottom: 15px; + padding: 5px; + font-size: 13px; + border-color: rgb(163, 102, 10); + } + + .formulario{ + padding: 30px 20px 30px 20px; + display: flex; + flex-direction: column; + background-color: rgba(0, 0, 0, 0.7); + color: antiquewhite; + margin: 10px 100px 0 100px; + border-radius: 50px; + } + + .titulo--formulario{ + font-size: 30px; + text-align: center; + color: antiquewhite; + } + + .texto--formulario { + padding: 10px; + display: flex; + flex-direction: column; + width: 100%; + } + + #botaoDeAdicionar{ + width: 100%; + padding: 7px; + color: black; + background-color: rgb(255, 255, 255); + border-style:none; + font-size: 13px; + } + + /* TABLE --- TABLE --- TABLE */ + + th{ + font-size: 15px; + } + + td{ + padding-right: 15px; + font-size: 13px; + word-break: normal; + } + + .tabela { + padding: 20px 15px 20px 15px; + background-color: rgb(0, 0, 0, 0.7); + color: antiquewhite; + margin: 10px 50px 10px 100px; + border-radius: 25px; + } + + .delete{ + font-size: 9px; + width: 20px; + height: 20px; + background-size: cover; + background-repeat: no-repeat; + background-position: center; + background-image: url(../img/botao-lixeira.png); + border-style: none; + border-radius: 2px; + } + +} + +/* DESKTOP --- DESKTOP */ + +@media (min-width: 1330px) { + + /* FORMULÁRIO --- FORMULÁRIO --- FORMULÁRIO */ + label { + font-size: 20px; + padding-bottom: 5px; + } + + input{ + margin-bottom: 15px; + padding: 5px; + font-size: 15px; + border-color: rgb(163, 102, 10); + } + + .formulario{ + padding: 20px 20px 30px 20px; + display: flex; + flex-direction: column; + background-color: rgba(0, 0, 0, 0.7); + color: antiquewhite; + margin: 10px 100px 0 150px; + border-radius: 50px; + } + + .titulo--formulario{ + font-size: 40px; + text-align: center; + color: antiquewhite; + } + + .texto--formulario { + padding: 10px; + display: flex; + flex-direction: column; + width: 100%; + } + + #botaoDeAdicionar{ + width: 100%; + padding: 7px; + color: black; + background-color: rgb(255, 255, 255); + border-style:none; + font-size: 15px; + } + + /* TABELA --- TABELA --- TABELA */ + + th{ + font-size: 20px; + } + + td{ + padding-right: 15px; + font-size: 18px; + word-break: normal; + } + + .tabela { + padding: 20px; + background-color: rgb(0, 0, 0, 0.7); + color: antiquewhite; + margin: 20px 100px 10px 150px; + border-radius: 40px; + } + + .delete{ + font-size: 9px; + width: 30px; + height: 30px; + background-size: cover; + background-repeat: no-repeat; + background-position: center; + background-image: url(../img/botao-lixeira.png); + border-style: none; + border-radius: 2px; + } + +}