Javascript intermediario

Question 1

seletores

Answer 1

HTML

<h1 id="h1">Tetxto</h1>

<a href="#">texte 1</a>
<a href="#">texte 2</a>
  
<div class="box">Item 1</div>
<div class="box">Item 2</div>
<div class="box">Item 3</div>
<div class="box">Item 4</div>
<div class="box">Item 5</div>

JAVASCRIPT

let ancoras = document.querySelectorAll(“a”)
ancoras.forEach(function (teste){
teste.innerHTML = “mudado”
})

const boxes = document.querySelectorAll(“.box”)

boxes.forEach(function (element) {
element.innerHTML = “mudar”
})

Question 2

Classlist

Answer 2

HTML

.<button class=”botaoMenu” .onclick=”abrirEfechar()”>Abrir</button>

. <div class="menu">
. <ul>
. <li>Item 1 </li>
. <li>Item 2 </li>
. <li>Item 3 </li>
. </ul>
.</div>

JAVASCRIPT

let menu = document.querySelector(“.menu”)
let botaoMenu = document.querySelector(“.botaoMenu”)

let abrir = false

function abrirEfechar() {

if(abrir === true) {
    abrir = false
    menu.classList.remove("aberto")
    botaoMenu.innerHTML = "Abrir"

} else if(abrir === false) {
    abrir = true
    menu.classList.add("aberto")
    botaoMenu.innerHTML = "Fechar"
}

}

CSS

• {
  box-sizing: border-box;
  }

.menu {
width: 10%;
height: 30rem;
background-color: black;
position: absolute;
top: 0;
left: -100%;
transition: all 0.6s ease;
}

.menu.aberto {
left: 0;
transition: all 0.6s ease;
}

.menu li {
color: #fff;
}

.botaoMenu {
position: absolute;
right: 20px;
width: 8%;
border: 1px solid black;
background-image: linear-gradient(90deg, rgb(255, 94, 0), rgb(255, 81, 0));
color: white;
cursor: pointer;
}

.botaoMenu:hover {
background-image: linear-gradient(90deg, rgb(255, 81, 0), rgb(233, 35, 0));
padding: 2px 5px;
}

Question 3

Eventos

Answer 3

HTML

<button>Clique</button>

<div class="bg"></div>

JAVASCRIPT

Question 4

Tipos de evento

Answer 4

HTML

<div class="bg"></div>

CSS

.bg {
width: 100px;
height: 100px;
background-color: black;
}

JAVASCRIPT

let bg = document.querySelector(“.bg”)

function evetoClique(event) {
console.log(event)
}

bg.onmouseout = evetoClique

Question 5

TimeOut

Answer 5

HTML

.<input type=”text” name=”tarefa” .placeholder=”Digite uma tarefa”>
. <button .id=”botaoCadastrar”>Cadastrar</button>

. <div class="toast">Confirmado</div>

CSS

.toast {
display: inline-block;
position: absolute;
left: -100%;
top: 50%;
border: 1px solid rgb(51, 219, 0);
border-radius: 5px;
background-color: #47e000;
padding: 10px;
color: white;
font-size: 20px;
font-family: Arial, Helvetica, sans-serif;
transition: all 800ms ease;
}

.toast.confirmado {
left: 30px;
}

JAVASCRIPT

let botaoCadastrar = document.querySelector(“#botaoCadastrar”)

let toast = document.querySelector(“.toast”)

botaoCadastrar.onclick = function(){
toast.classList.add(‘confirmado’)

setTimeout(function(){
  toast.classList.remove('confirmado')   
}, 2000) }

Question 6

Interval

Answer 6

HTML

.<div id="contador"></div>

. <button>Stop</button>
.

JAVASCRIPT

let contador = document.querySelector(“#contador”)

let count = 0

let interval = setInterval(function(){
count++

contador.innerHTML = count
}, 10)

let botaoPause = document.querySelector(“#botao”)

botaoPause.onclick = function(){
clearInterval(interval)
}

Question 7

Formulário não preenchido 1

Answer 7

HTML

. <form id=”formCadastro” .action=”gravarDados.html”>
. <div>
. <label>
. Nome
. <input type=”text” .name=”nome”>
. <span></span>
. </label>
. </div>

 .   <div>
  .    <label>
   .     Email
    .    <input type="text" .name="email">  .           <span class="erro"></span>   .        </label>
    </div>

. <div>
. <label>
. Cidade
. <select>
. <option>-- Selecione</option>
.<option>São .Paulo</option>
. <option>Rio de Janeiro</option>
. <option>Belo .Horizonte</option>
. </select>
. <span></span>
. </label>
. </div>

 .   <button .type="submit">Cadastrar</button>  .     </form>

CSS

div {
margin: 20px;
transition: 800ms ease;
}

input {
transition: 800ms ease;
}

.inputErro {
border: 1px solid red;
}

span {
color: red;
}

JAVASCRIPT

let formulario = document.querySelector(“#formCadastro”)

formulario.onsubmit = function(event){
event.preventDefault()

let inputNome = document.forms[“formCadastro”][“nome”]

if(!inputNome.value) {
inputNome.classList.add(“inputErro”)

let span = inputNome.nextSibling.nextSibling
span.innerText = "Preencha o campo"

} else{
inputNome.classList.remove(“inputErro”)

let span = inputNome.nextSibling.nextSibling
span.innerText = ""   }

let inputEmail = document.forms[“formCadastro”][“email”]

if(!inputEmail.value) {
inputEmail.classList.add(“inputErro”)

let span = inputEmail.nextSibling.nextSibling
span.innerText = "Preencha o campo email"

} else{
inputEmail.classList.remove(“inputErro”)

let span = inputEmail.nextSibling.nextSibling
span.innerText = "" }

}

Question 8

Formulário não preenchido 2

Answer 8

JAVASCRIPT

let formulario = document.querySelector(“#formCadastro”)

formulario.onsubmit = function(event){
event.preventDefault()

let temErro = false

let inputNome = document.forms[“formCadastro”][“nome”]

if(!inputNome.value) {
temErro = true
inputNome.classList.add(“inputErro”)

let span = inputNome.nextSibling.nextSibling
span.innerText = "Preencha o campo"

} else{
inputNome.classList.remove(“inputErro”)
let span = inputNome.nextSibling.nextSibling
span.innerText = “”
}

let inputEmail = document.forms[“formCadastro”][“email”]

if(!inputEmail.value) {
temErro = true
inputEmail.classList.add(“inputErro”)

let span = inputEmail.nextSibling.nextSibling
span.innerText = "Preencha o campo email"

} else{
inputEmail.classList.remove(“inputErro”)

let span = inputEmail.nextSibling.nextSibling
span.innerText = "" }

let selectCidade = document.forms[“formCadastro”][“cidade”]

if(!selectCidade.value) {
temErro = true
selectCidade.classList.add(“inputErro”)

let span = selectCidade.nextSibling.nextSibling.innerText = “Selecione sua cidade”

} else {
selectCidade.classList.remove(“inputErro”)

let span = selectCidade.nextSibling.nextSibling
span.innerText = “”
}

if(!temErro) {
formulario.submit()
}

}