WilliamNascimento

Sim , com nodeJS voce pode utilizar javascript no lado do back-end . Mas não apenas isto pois com NodeJS voce pode utilizar JavaScript fora do navegador

Eu tenho um menu hamburguer onde clico e alera o state , confirmei no log tudo ok . porém na hora de por a classe certa ele não altera , mas se eu alterar o estado do state ele some caso true e aparece caso false const {aberto ,setOpen,abrir} = useHamburguer() // destruturando o que quero do meu hook // esse e o container que aparece e some <div className = {aberto ? style.containerInfo : style.containerInfoOff}> <div className = {style.infos}> <BarraPesquisa/> <UserHeader value = {logado}/> </div> </div> hook personalizado import React from 'react' const useHamburguer = () => { let [aberto , setOpen] = React.useState(true); function abrir (){ setOpen(!aberto) console.log(aberto) } return{ aberto, setOpen, abrir, } } export default useHamburguer

up

meu overflow-x nao funciona o items ficam diminuindo tamanho e se apertando para adequar o , mas caso eu coloque overflow y eles com directin column eles correm;. .tt{ height: 130px; background-color: black; width: 200px; margin-left:10px; } .teste{ display:flex; flex-direction: row; width: 300px; background-color: green; height: 300px; position: relative; overflow-x: scroll; } <section class = "postagems"> <section class = "teste"> <div class = 'tt'></div> <div class = 'tt'></div> <div class = 'tt'></div> <div class = 'tt'></div> <div class = 'tt'></div> <div class = 'tt'></div> <div class = 'tt'></div> <div class = 'tt'></div> <div class = 'tt'></div> <div class = 'tt'></div> <div class = 'tt'></div> <div class = 'tt'></div> <div class = 'tt'></div> <div class = 'tt'></div> </section> </section>

Acho quer nao e possivel por background no head , creio eu . Porque um background no head ?

Estou fazendo um clone do facebook para treinar , pelo que vi ele tem a main que sao as postagems e duas aside fixas nas laterais . Separei com o grid porém quando lanco a position fixed que ele sai do documento e fica sem tamanho , nao consigo ajustar do tamanho do grid . Tentei usar uma div dentro colocar width 100%; mas ela pega a tela toda . Se alguem puder dar um help section.main{ color:white; display:grid; grid-template-areas: "config posts friends"; grid-template-columns: 1fr 2fr 1fr; align-items: start; } aside.configs{ grid-area: "config"; background-color: red;; } main.mainPosts{ grid-area: "posts"; background-color: blue; } aside.amigos{ grid-area: "friends"; background-color: pink; }.vv{ height: 200px; } <section class = "main"> <aside class = "configs"> <div class = "listaConfigs"> configuração </div> </aside> <main class = "mainPosts"> <div class= "vv"> posts </div> </main> <aside class = "amigos"> <div class= "listaAmigos"> amigos </div> </aside> </section>

Consegui resolver amigo obrigado ;

Tenho uma imagem com 400 px de altura , do tamanho da minha div , se eu colocar ela como background usar e usar a propiedade cover e imagem fica com altura desproporcional mas ocupa 100% . A mesma coisa que eu usar o object fit cover com a imagem no html , teria alguma coisa de permanecer a altura da imagem e ela ocupar 100% da tela ? <!-- html 1 --> <section class = "abc"> <img src = "kk.png" class = "bnr"> </section> <!-- html 2 --> <section class = "abc"> </section> /* css 1 */ section.abc{ max-height: 400px; height: 420px; } img.bnr{ width: 100%; object-fit: cover; max-height: 420px; } /* css 2 */ section.abc{ max-height: 400px; background-image: url(kk.png); background-repeat: no-repeat; background-size: cover; height: 400px; } Usei as duas formas acima

@Marcelo Calazans Sabe me explicar o porque ?

Boa noite amigos , estou tentanto manipular as divs com os indices mas nao estou conseguindo vou explicar abaixo . Este codigo abaixo funciona : $(document).ready(function(){ var item = $(".progressBar"); item.animate({width : "30%"}) }) porém este nao $(document).ready(function(){ var item = $(".progressBar"); item[0].animate({width : "30%"}) }) Creio que seja porque retorna um objeto se nao me engano , mas entao como faco para manipular esse objeto ? Queria para cada item fazer uma animacao de width por exemplo var array = [10 , 20 , 30 , 40] $(document).ready(function(){ var item = $(".progressBar"); for ( var i = 0 ; var < item.length ; i++{ item[i].animate({width : array[i] + "%"}) } }) porém nao funciona

Colocas um input para digitar 10 numeros e recuperalos utilizando .value Armazena tudo em um array

Boa noite , montei uma logica aqui sem verificacao . <script> function programa() { var numeros = Array () var valor1 = parseFloat(document.getElementById("valor1").value); var valor2 = parseFloat(document.getElementById("valor2").value); var valor3 = parseFloat(document.getElementById("valor3").value); numeros.push(valor1) // adiciona o valor1 no array numeros.push(valor2) // adiciona o valor2 no array numeros.push(valor3) // adiciona o valor3 no array numeros.sort() // coloca o array em ordem soma = numeros[1] + numeros[2] // ja que o array esta em ordem os dois ultimos item dele sao respectivamente 1 e 2 //isso porque comeca no indice 0 alert(soma) // alert da somo dos dois ultimos elementos ( que seriam os maiores ) // como sao apenas 3 numeros montei dessa forma , agora voce monte a verificacao se eles sao iguais se nao conseguir votle aqui e diga em que tem duvida porque acho que n podemos fazer o codigo todo aqui } </script> <p><b>1º Valor:</b></p> <input id="valor1" type="text"/> </br> <p><b>2º Valor:</b></p> <input id="valor2" type="text"/> </br> <p><b>3º Valor:</b></p> <input id="valor3" type="text"/> <br><br> <button type="button" onclick="programa()"> Iniciar</button>

AAA resolveu , eu havia posto na classe errada. E antes tinha tinha colocado normal que e o padrão . Valeu mano .

Isso e erro na logica das operacoes , nao entendi muito bem o problema , o que seria mediaex ? if (mediaFinal >= 9) { document.getElementById("conceito").innerHTML = "Conceito A"; } else if (mediaFinal >= 7.5 && mediaFinal < 9) { O problema deve ser nesse contexto aqui porém como nao entendi a formula do calculo nao consigo arrumar . Caso voce entende arrume apenas as formulas ou explique para que eu possa entender

meu texto fica vazando da minha div , eu queria que ele quebrasse , alguem pode ajudar ? <section class = "hobbies"><!-- inicio hobbie--> <h2 class = "tittlePets">Hobbies</h2> <nav class = "hobbie"> <ul> <li class = "primeiro"> <div class = "box-item"> <div class = "img-hobbie"> <span><i class="faz fa-futbol"></i></span> </div> <p>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa </p> </div> </li> <li> <div class = "box-item"> </div> </li> <li> <div class = "box-item"> </div> </li> </ul> </nav> </section><!-- fim hobbie--> .hobbies{ grid-area:hobbies; overflow: hidden; } .hobbie{ grid-area:hobbies; position: relative; overflow-x: scroll; overflow-y: hidden; -webkit-overflow-scrolling: touch; } .hobbie ul { display: flex; } .hobbie li { margin-left: 5px; display: flex; } .box-item{ font-family: nome; font-size: 2.0em; margin:5px 0px 30px 0px; color:black; border-radius: 10px; height: 250px; width: 220px; background-color:#FFF; box-shadow: 0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23); } .img-hobbie{ margin-top: 10px; display: flex; color:black; font-size: 2.2em; justify-content: center; } .text-hobbie{ position: absolute; } html e css

Boa tarde , vejo muito erros bobos no seu codigo e vou comenta-los abaixo . <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Questão 8</title> </head> <body> <script> function programa() { var nota1 = parserFloat(document.getElementById("nota1").value); // nao e parserFloat e sim parse var nota2 = parserFloat(document.getElementById("nota2").value); // nao e parserFloat e sim parse var nota3 = parserFloat(document.getElementById("nota3").value); // nao e parserFloat e sim parse var mediaEx = parserFloat(document.getElementById("mediasexercicios").value); // nao e parserFloat e sim parse , e nao existe o id mediasexercicios note : <input id="mediaexercicios" type="text"/> <br> aqui e media e nao medias var mediaFinal = (nota1+(nota2*3)+mediaEx)/7 if (mediaFinal >= 9) { documento.getElementById("conceito").innerHTML = "Conceito A"; // documento.getElementById nao existe , o certo e document } else if (mediaFinal >= 7.5 && mediaFinal < 9) { documento.getElementById("conceito").innerHTML = "Conceito B"; // documento.getElementById nao existe , o certo e document } else if (mediaFinal >= 6 && mediaFinal < 7.5) { documento.getElementById("conceito").innerHTML = "Conceito C"; // documento.getElementById nao existe , o certo e document } else { documento.getElementById("conceito").innerHTML = "Conceito D"; // documento.getElementById nao existe , o certo e document }} </script> <p><b>Nota 1</b></p> <input id="nota1" type="text"/> <br> <p><b>Nota 2</b></p> <input id="nota2" type="text"/> <br> <p><b>Nota 2</b></p> <input id="nota3" type="text"/> <br> <p><b>Média dos Exercícios</b></p> <input id="mediaexercicios" type="text"/> <br> <p id="conceito"></p> <button type="button" onclick="programa()"> Iniciar</button> </body> </html> Codigo novo : <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Questão 8</title> </head> <body> <script> function programa() { var nota1 = parseFloat(document.getElementById("nota1").value); var nota2 = parseFloat(document.getElementById("nota2").value); var nota3 = parseFloat(document.getElementById("nota3").value); var mediaEx = parseFloat(document.getElementById("mediaexercicios").value); var mediaFinal = (nota1+(nota2*3)+mediaEx)/7 if (mediaFinal >= 9) { document.getElementById("conceito").innerHTML = "Conceito A"; } else if (mediaFinal >= 7.5 && mediaFinal < 9) { document.getElementById("conceito").innerHTML = "Conceito B"; } else if (mediaFinal >= 6 && mediaFinal < 7.5) { document.getElementById("conceito").innerHTML = "Conceito C"; } else { document.getElementById("conceito").innerHTML = "Conceito D"; }} </script> <p><b>Nota 1</b></p> <input id="nota1" type="text"/> <br> <p><b>Nota 2</b></p> <input id="nota2" type="text"/> <br> <p><b>Nota 2</b></p> <input id="nota3" type="text"/> <br> <p><b>Média dos Exercícios</b></p> <input id="mediaexercicios" type="text"/> <br> <p id="conceito"></p> <button type="button" onclick="programa()"> Iniciar</button> </body> </html> Qualque duvida so perguntar

Qualquer outra duvida e so voltar amigo .

O problema e nos if , ele sempre vai entrar naquele else if pois o valor digitado vai ser menor ou maior que 20 entende ? Ele digitou vamos supor G E 19 : var combustivel = prompt("Digite o código do combustível: "); // A = ALCOOL || G = GASOLINA var litro = prompt("Digite a quantidade de litros: "); if (combustivel == "A") { var alcool = 0.9; var custo = litro * alcool; }// ele pula essa instrucao porque combustivl nao e igual a A if (litro <= 20) { var desconto1 = (custo * 3)/100; alert("O desconto do combustível foi de R$ "+desconto1+" e o valor agora é R$ "+(custo-desconto1)); } // AQUI ELE VERIFICA SE O LITRO E IGUAL A 20 SE FOR ELE ENTRA AQUI porém CUSTO ESTA VAZIO POIS NAO ENTROU NO A else if (litro > 20) { var desconto2 = (custo * 5)/100; alert("O desconto do combustível foi de R$ "+desconto2+" e o valor agora é de R$ "+(custo-desconto2)); } // se ele for maior que 20 ele cai aqui e executa porém CUSTO NAO TEM UM VALOR . Entendeu ? Coloquei comentarios para explicar acima entao , o que voce teria que fazer ? Colocar 2 ifs para verificar , o primeiro verifica se e alcool , se for ele entra se nao for vai para o proximo , entao verifica se e gasolina se for Ele entra senao , voce poe um else , ou utiliza else if ao invés de 2 ifs enfim e isso , poderia usar tambem switch .. Vou deixar dois codigos abaixo . <script> function programa() { var combustivel = prompt("Digite o código do combustível: "); // A = ALCOOL || G = GASOLINA var litro = prompt("Digite a quantidade de litros: "); if (combustivel == "A") { var alcool = 0.9; var custo = litro * alcool; if (litro <= 20) { var desconto1 = (custo * 3)/100; alert("O desconto do combustível foi de R$ "+desconto1+" e o valor agora é R$ "+(custo-desconto1)); } else{ var desconto2 = (custo * 5)/100; alert("O desconto do combustível foi de R$ "+desconto2+" e o valor agora é de R$ "+(custo-desconto2)); } } if (combustivel == "G") { var gasolina = 1.2; custo = litro * gasolina; if (litro <= 20) { var desconto3 = (custo * 4)/100; alert("O desconto do combustível foi de R$ "+desconto3+" e o valor agora é de R$ "+(custo-desconto3)); } else{ var desconto4 = (custo * 6)/100; alert("O desconto do combustível foi de R$ "+desconto4+" e o valor agora é de R$ "+(custo-desconto4)); } } } </script> <button type="button" onclick="programa()"> Iniciar</button> <script> function programa() { var combustivel = prompt("Digite o código do combustível: "); // A = ALCOOL || G = GASOLINA var litro = prompt("Digite a quantidade de litros: "); switch (combustivel) { case "A": var alcool = 0.9; var custo = litro * alcool if (litro <= 20) { var desconto1 = (custo * 3)/100; alert("O desconto do combustível foi de R$ "+desconto1+" e o valor agora é R$ "+(custo-desconto1)); } else{ var desconto2 = (custo * 5)/100; alert("O desconto do combustível foi de R$ "+desconto2+" e o valor agora é de R$ "+(custo-desconto2)); } break; case "G": var gasolina = 1.2; custo = litro * gasolina; if (litro <= 20) { var desconto3 = (custo * 4)/100; alert("O desconto do combustível foi de R$ " + desconto3 +" e o valor agora é de R$ "+(custo-desconto3)); } else{ var desconto4 = (custo * 6)/100; alert("O desconto do combustível foi de R$ "+desconto4+" e o valor agora é de R$ "+(custo-desconto4)); } break; default: alert("Digite um codigo valido") } } </script> <button type="button" onclick="programa()"> Iniciar</button>

Mas como eu coloquei overflow apenas na nav e porque a pagina toda fica ? Se eu deixar o overflow na section apenas a section fica e porque a nav nao ?

E minha gente estava montando um site na hora e fiz um rolagem com overflow em uma div , porém estou tentando entender o que eu fiz , pois estou tentando arrumar melhor agora e nao estou conseguindo . se alguem puder me ajudar vou deixar explicado abaixo. Eu tenho este HTML e este css . <section class = "pets"><!-- inicio pets--> <h2 class = "tittlePets">Pets</h2> <article class = "myPets"> <nav class = "pets"> <ul> <li class = "nav-item primeiro"> <a href="yumi.html" class = "nav-div p1"></a> <p class = "tittlePets">Yumi</p> <button class = "btn-perfil" type="">Ver Perfil</button> </li> <li class = "nav-item"> <a href="yumi.html" class = "nav-div p2"></a> <p class = "tittlePets">akeno</p> <button class = "btn-perfil" type="">Ver Perfil</button> </li> <li class = "nav-item"> <a href="yumi.html" class = "nav-div p3"></a> <p class = "tittlePets">Tom</p> <button class = "btn-perfil" type="">Ver Perfil</button> </li> <li class = "nav-item"> <a href="yumi.html" class = "nav-div p4"></a> <p class = "tittlePets">bruce</p> <button class = "btn-perfil" type="">Ver Perfil</button> </li> </ul> </nav> </article> </section><!-- fim pets--> O css desta section : .tittlePets{ text-align:center; } .pets{ grid-area:pets; background: rgba(232,232,232,0.2); position: relative; overflow-x: scroll; overflow-y: hidden; -webkit-overflow-scrolling: touch; } .pets ul { display: flex; } .pets .primeiro{ margin-left: 0px!important; } .pets li{ margin-left:10px; } .p1{ background-image: url(yumi.jpg); background-size: cover; } .p2{ background-image: url(rajado.jpg); background-size: cover; } .p3{ background-image: url(tom2.jpg); background-size: cover; } .p4{ background-image: url(foguinho.jpg); background-size: cover; } .btn-perfil{ padding: 10px 5px; background-color: rgba(255,250,250); border-radius: 10px; display: block; width: 100%; } .nav-div{ display:block; font-family: nome; font-size: 2.0em; text-align: center; line-height: 200px; color:black; border-radius: 10px; height: 250px; width: 220px; background-color:black; } Enfim no html estou usando a classe pet na sessao sobre pets , ate ai tudo ok. Logo em seguida eu coloco o titulo e ate ai tudo ok , so que mais abaixo eu utilizo a classe novamente e ai que ta . Se eu retirar a classe da section , minha pagina toda fica com o overflow. porém se eu tirar a classe da nav , meu titulo corre junto com com a div coisa que eu nao quero . Porque retirando da section minha pagina toda fica com overflow ? e nao apenas a nav ?? e porque eu repeti a classe pets na ul que eu nao lembro ? Acho que foi uma gambiarra que agora nao me lembro . Alguem poderia abrir minha cabeca com essa duvida ? E o que posso tentar fazer ?

Porque tenho que escrever o ano por extenso ?

Estou comecando a desenvolver utilizando o mobile frist , terminei de desenvolver meu site , porém quero a mesma interface com algumas alteracoes para o tablet . Tem algum jeito de eu alterar apenas para tablet sem ter que copiar tudo ? Vou deixar um exemplo . @media only screen and (max-height:666px){ .main{ display: grid; grid-template-columns: 1fr; grid-auto-rows: 12vh 40vh 41vh auto; grid-template-areas: "nome" "profile" "carac" "footer" ; } /* name */ .name { background-color:rgb(15,14,14,0.9); grid-area: nome; } .name-edit{ text-align: center; color:white; font-size: 1.4em; font-family: nome; } /*Fim name*/ /*inicio profile*/ .profile { grid-area: profile; background-color: black; display: flex; justify-content: center; align-items: center; } .foto{ width: 200px; height: 200px; border-radius: 50%; background-image: url("eu.jpg"); box-shadow: 0px 0px 8px 2px #fff; background-size: cover; } /*fim profile*/ /*caracteristica*/ .caracteristica { background-color: black; position: relative; overflow-x: scroll; overflow-y: hidden; -webkit-overflow-scrolling: touch; } .caracteristica ul { display: flex; flex-direction: row; } .caracteristica li{ margin-left:10px; } .nav-div{ display:block; font-family: nome; font-size: 2.0em; text-align: center; line-height: 200px; color:black; height: 200px; width: 200px; border-radius: 50%; background-color:black; } .l1{ background-color: rgba(0,191,255,0.5); } .l2{ background-color: rgba(0,250,154,1); } .l3{ background-color: rgba(147,112,219,1); } .icon{ color:rgba(255,255,255); font-size: 1.1em!important; } } Eu tenho este codigo acima porém quero fazer pequenas alteracoes nas classes para tablet , entao eu tentei apenas por exemplo fazer isto : @media only screen and (min-width : 700px){ .profile { grid-area: profile; background-color: red; display: flex; justify-content: space-beetween; align-items: center; } } porém , todas as alteracao nao sao feitas , apenas esta . Entao tenho que copiar o primeiro codigo , criar a mediaq , colar tudo e modificar o que eu quero . Tem algum jeito mais simples ?

Queria uma quebra de linha apos o Nascimento , porém ele pegar a tag <br> como a string tambem., tentei usar o textContent mas ele nao quebra a linha function maquinaEscrever(name) { let textoArray = name.innerHTML.split('') name.innerHTML = ''; textoArray.forEach((letra, i) => { setTimeout(() => name.innerHTML += letra, 100* i); }); } const name = document.querySelector("p"); maquinaEscrever(name); <header class = "name"> <div class = "name-edit"> <p>William Nascimento<br> Desenvolvedor Web Junior</p> </div> </header>

Eu estava tentando controlar minha calculadora para quando clicar no botao de operacao e ele ja estiver cliclado anteriormente ele nao sobrepor por exemplo 5++++5. Estava tentando por um alert para saber uma logica , tentei criar uma variavel no topo da funcao e quando clicasse nos numeros ela recebia o valor true , e quando fosse clicado na operacao ela recebia false , e ai botei botei tipo if (tipo === valor && sinal === true ) entrava no bloco de sinal , porém nao consegui . Alguem pode me dar uma dica para que eu possa fazer ? function calcular (tipo , valor) { if (tipo === 'acao') { if (valor === 'c') { document.getElementById('resultado').value = "" } if(valor === '+' || valor === '-' || valor === '*' || valor === '+' || valor === '/') document.getElementById('resultado').value+=valor sinal = 1 } else if (tipo === 'valor'){ document.getElementById('resultado').value+=valor } } <body style="background: #D9D9D9"> <div class="container"> <div class="row"> <div class="col d-flex justify-content-center"> <br /> <div class="calculadora"> <input id = "resultado" type="text" class="form-control resultado" placeholder="0" disabled="disabled" /> <div class="row"> <button onclick = "calcular('acao','c')" type="button" class="btn btn-dark btn-lg clear font-weight-light">C</button> <button onclick = "calcular('acao','/')" onfocus="verificar()" type="button" class="btn btn-dark btn-lg font-weight-light">/</button> <button onclick = "calcular('acao','*')"type="button" class="btn btn-dark btn-lg font-weight-light">x</button> </div> <div class="row"> <button onclick = "calcular('valor' , 7)" type="button" class="btn btn-dark btn-lg font-weight-light">7</button> <button onclick = "calcular('valor',8)" type="button" class="btn btn-dark btn-lg font-weight-light">8</button> <button onclick = "calcular('valor',9)" type="button" class="btn btn-dark btn-lg font-weight-light">9</button> <button onclick = "calcular('acao', '-')" type="button" class="btn btn-dark btn-lg font-weight-light">-</button> </div> <div class="row"> <button onclick = "calcular('valor',4)" type="button" class="btn btn-dark btn-lg font-weight-light">4</button> <button onclick = "calcular('valor',5)" type="button" class="btn btn-dark btn-lg font-weight-light">5</button> <button onclick = "calcular('valor',6)" type="button" class="btn btn-dark btn-lg font-weight-light">6</button> <button onclick = "calcular('acao', '+')" type="button" class="btn btn-dark btn-lg font-weight-light">+</button> </div> <div class="row"> <button onclick = "calcular('valor',1)" type="button" class="btn btn-dark btn-lg font-weight-light">1</button> <button onclick = "calcular('valor',2)" type="button" class="btn btn-dark btn-lg font-weight-light">2</button> <button onclick = "calcular('valor',3)" type="button" class="btn btn-dark btn-lg font-weight-light">3</button> <button onclick = "calcular('acao', '=')" type="button" class="btn btn-dark btn-lg enter">=</button> </div> <div class="row" style="margin-top: -60px"> <button onclick = "calcular('valor',0)" type="button" class="btn btn-dark zero btn-lg font-weight-light">0</button> <button onclick = "calcular('valor','.')" type="button" class="btn btn-dark btn-lg font-weight-light">.</button> </div> </div> </div> </div> </div> </body> Segue o html e o js

Galera , nao sei se estou no local certo e se nao estiver algum adm pode mover ? Queria saber quais tecnologias usar e como funciona o envio de uma serie ou video para o site ex :Netflix , Amazon .