Classificação
0 %
Popularidade
Opine
Descrição:
Você sabe usar o comando se não tiver JavaScript? Sabe diferenciar condições simples e condições compostas? Sabe como criar uma…
Pra quem estiver com dificuldades, aqui vai o meu código com alguns comentários
<!DOCTYPE html>
<html lang="pt-br">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Nacionalidades</title>
<style>
body{
background-color: coral;
}
h1{
font-family: 'Times New Roman', Times, serif;
}
</style>
</head>
<body>
<h1>Qual país você nasceu ?</h1>
<input type="text" name="txtNac" id="nac1">
<input type="button" value="Verificar Nacionalidade" onclick = "verificar()">
<div id = Resultado></div>
<script>
function verificar(){
var nac = window.document.getElementById('nac1') // pegando o valor da caixa de texto
var nac2 = String(nac.value).toLowerCase() //jogando o nome para letras minusculas pois assim de qualquer forma que brasil for escrito será reconhecido.
Resultado.innerHTML =`Sua nacionalidade é ${nac2}`
if(nac2 == 'brasil'){
Resultado.innerHTML =`Voce é Brasileiro`
}
else{
Resultado.innerText = 'Voce é estrangeiro'
}
}
</script>
</body>
</html>
Estou com dificuldade para entender a importancia da div neste exercicio que nos foi solicitado, consegui fazer bem pela metade, ou melhor, nao consegui fazer pq so consegui metade…
Sale gurizada, quem esta vendo o vídeo de 2022 pra frente e ta dando algum erro no desafio compare seu codigo com esse
<!DOCTYPE html>
<html lang="pt-BR">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>GOVERNO BRASILEIRO</title>
<style>
body {
color: white;
font: normal 13pt Arial;
background-color: blue;
}
</style>
</head>
<body>
<h1>ALFÂNDEGA BRASILEIRA</h1>
<input type="text" name="nac" id="nac">
<input type="button" value="verificar" onclick="confirmar()">
<div id="res"></div>
<script>
function confirmar() {
var país2 = document.querySelector('input#nac')
var res = document.querySelector('div#res')
var país3 = país2.value
res.innerHTML = `<p>Você mora em <strong>${país3}</strong></p>`
if (país2 == 'Brasil' || país2 == "brasil") {
res.innerHTML += `<p>Você é <strong>BRASILEIRO</strong> CANARINHO e mora em <strong>${país3}</strong></p>`
} else {
res.innerHTML += `<p>PRA GRINGO É MAIS CARO</p>`
}
}
</script>
</body>
</html>
obs: fiquei 2 horas quebrando a cabeca pq tava dando erro, e quando percebi era o 'onclick' eu tinha botado 'id' por costume e quase fiquei louco aqui kkkkkkkkk
Se alguém tiver com problemas no código.
<!DOCTYPE html>
<html lang="pt-BR">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Paises</title>
</head>
<body>
<h1>Sistema de Paises</h1>
Qual pais de origem ?
<input type="text" name="txtpais" id="txtpais">
<input type="button" value="Verificar" onclick="consulta ()">
<div id="res"></div>
<script>
function consulta() {
var txtp = document.querySelector('input#txtpais')
var res = document.querySelector('div#res')
var p = txtp.value
res.innerHTML = '<p> Você reside em ' + p
if (p == 'brasil' || p == 'Brasil') {
res.innerHTML += 'Você é brasileiro'
} else { res.innerHTML += 'Você é estrageiro'
}
}
</script>
</html>
</body>
Resolvi o exercício com um campo de seleção para o usuário:
<body>
<h1>Verificando sua nacionalidade</h1>
<p>Escolha seu país de origem</p>
<form action="nacionalidade" method="post">
<select name="nacionalidade" id="nacionalidade">
<option value="">— escolha —</option>
<option value="Brasil" id="nac">Brasil</option>
<option value="Argentina" id="nac">Argentina</option>
<option value="Estados Unidos" id="nac">Estados Unidos</option>
<option value="Mexico" id="nac">México</option>
</select>
<input type="button" value="verificar" onclick="consultar()">
</form>
<p id="res"></p>
<script>
function consultar() {
var txtnac = window.document.getElementById('nacionalidade')
var origem = String(txtnac.value)
var res = window.document.getElementById('res')
if (origem == 'Brasil') {
res.innerHTML = `<p>Você é brasileiro.</p>`
} else {
res.innerHTML = `<p>Você é estrangeiro.</p>`
}
res.innerHTML += '<p>Checagem finalizada</p>'
}
</script>
</body>
Depois de ter pesquisado alguns tutoriais, consegui fazer uma lista com todos os países para a pessoa escolher, eu imaginei que isso seria "util" em uma área de cadastro, então acrescentei coisas tipo nome e idade, pra poder deixar mais completo, mas o desafio dessa atividade ai foi mais deixar o site bonito do que fazer ele funcionar na vera kkkkk. Deu mo trabalhão colocar as coisas no lugar, e eu até ja sei que o jeito que eu arrumei as divs e os elementos foi uma bagunça que só, mas no fim acho que o que vale é o resultado kkkk.
ta ai meu script:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Sign in</title>
<style>
* {
padding: 0;
margin: 0;
}
body {
overflow-x: hidden;
background-image: linear-gradient(to bottom,rgb(193, 170, 42) 0%, rgb(193, 170, 42) 60%, rgb(204, 173, 0) 100%);
height: 100vh;
}
.content {
display: flex;
flex-direction: column;
height: 100vh;
width: 100vw;
align-items: center;
justify-content: center;
}
#dados {
width: 431.29px;
height: 531.24px;
background-color:powderblue;
border: 3px solid black;
border-radius: 5%;
font-family:'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
}
#cadastro {
transform: translateY(-90px);
padding: 100px;
}
#lab {
font-size: 16pt;
transform: translate(20px, -110px)
}
p {
font-size: 12pt;
padding-bottom: 20px;
transform: translate(20px, -90px);
}
input {
width: 200px;
transform: translate(200px, -210px);
}
select {
width: 200px;
transform: translate(200px, -210px);
}
button {
transform: translate(175px, -200px);
width: 60px;
height: 25px;
background-color:blueviolet;
border-radius: 25%;
color: white;
cursor: pointer;
}
#resultado {
transform: translateY(-50px);
}
</style>
</head>
<body>
<div class="content">
<div id="dados">
<div id="nomes">
<h1 id="cadastro">Sign in (1/3):</h1>
<p id="lab"><strong>Insira seus dados</strong></p>
<p><strong>Nome: </strong></p>
<p><strong>Data de nascimento: </strong></p>
<p><strong>Nacionalidade: </strong></p>
</div>
<div id="input">
<input placeholder="Seu nome" type="text" id="name"> <br><br>
<input type="date" id="birth"> <br><br>
<select name="country" id="country"></select>
</div>
<button type="submit" onclick="resultado()" id="btn">Enviar</button>
<div id="resultado">
</div>
</div>
</div>
<script>
let countries;
fetch("https://restcountries.com/v2/all"😉
.then(res => res.json())
.then(data => initialize(data))
.catch(err => console.log("Error:" + err));
function initialize(countriesData) {
countries = countriesData;
let options = "";
for(let i=0; i<countries.length; i++) {
options += `<option value="${countries[i].alpha3Code}">${countries[i].translations["pt"]}</option>`;
}
document.querySelector('select#country').innerHTML = options
}
function resultado() {
var name = document.querySelector('input#name')
var birth = document.querySelector('input#birth')
var country = document.querySelector('select#country')
var res = document.querySelector('div#resultado')
var date = birth.value
var newDate = date.split("-")
var ano_niver = newDate[0]
var mes_niver = newDate[1]
var dia_niver = newDate[2]
var d = new Date
var ano_atual = d.getFullYear()
var mes_atual = d.getMonth() + 1
var dia_atual = d.getDate()
var idade = 0
var estrangeiro = ""
if (ano_atual < ano_niver || (ano_atual == ano_niver && mes_atual < mes_niver) || (ano_atual == ano_niver && mes_atual == mes_niver && dia_atual <= dia_niver) || ano_niver < 1900) {
idade = "Incoerente"
} else {
if (mes_atual > mes_niver || (mes_atual == mes_niver && dia_atual > dia_niver)) {
idade = ano_atual – ano_niver
} else {
idade = ano_atual – ano_niver – 1
}
}
if ((country.value).toUpperCase() != "BRASIL") {
estrangeiro = "Sim"
} else {
estrangeiro = "Não"
}
res.innerHTML = `<p>Usuário: ${(name.value).toUpperCase()}</p> <p>Idade: ${idade.toString()}</p> <p> Estrangeiro: ${estrangeiro}`
}
</script>
</body>
</html>
Não sei o que acontece que quando aperto F8 aparece as informações antes e depois do que escrevo:
Info: Start process (17:00:13)
"O que eu escrevi"
Info: End process (17:00:13)
Pq essa informação de horário aparece? Tem como tirar?
Depois de quebrar muito a cabeça eu consegui realizar o ex009.HTML
</head>
<body>
<h1>Comprovante de Nacionalidade</h1>
<h2>Pais de Origem: <input type="text" name="nac" id="nac">
<input type="button" value="Verificar"onclick="Verificar()">
<div id="Nacionalidade">Nacionalidade</div></h2>
<script>
var nome=window.prompt ('Digite seu nome !')
function Verificar(){
var c= window.document.getElementById('nac')
var d = String(nac.value)
var j= window.document.getElementById('Nacionalidade')
if(j=='Brasil' ){
j.innerText=`Olá ${nome} !, Você é BRASILEIRO(A) !`
}
else {
j .innerText=`Olá ${nome} !, Você é ESTRANGEIRO(A) !`
}
}
Olá bom dia, mais alguém está tendo problema no node.Js.Exec ? o meu está instalado mas quando eu aperto F8 não roda
Meu botão verificar não está lançando o comando das funções, já tentei diversas vezes e não conseguir, não sei o que eu estou errando
O meu código deu erro, não aparece a função calcular na pagina
coloquei:
<input type="button" value="Verificar" onclick= "calcular()">
<div id= "res">
</div>
<script>
function calcular() {
var txtv = window.document.getElementById('input#txtvel')
var res = window.document.querySelector('div#res')
var vel = Number(txtv.value)
res.innerHTML = `<p>Sua Velocidade atual é de <strong>${vel}km/h</strong></p>`
}
</script>
</body>
</html>
em inspecionar diz que o erro esta no input, onclick, calcular , mas não conseguir resolver
No exercício da multa, não importa o que eu faço o valor sempre é NaN, não sei pq meu código n tá conseguindo pegar o número do input
Alguem tentou fazer o exercício da aula de calcular a velicidade usando getElementById e deu a seguinte msg de erro: ex010.htm:21 Uncaught TypeError: Cannot read properties of null (reading 'value')
at calcular (ex010.htm:21:35)
at HTMLInputElement.onclick (ex010.htm:12:65). Quando tento fazer usando querySelector o exercício roda, mas quando tento por getElementById da esse erro !
<!DOCTYPE html>
<html lang="pt-BR">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Naturalidade</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="conteiner">
<h1>Sistema de detecção de nacionalidade</h1>
<p>Digite seu nome: <input type="text" id="nome"></p>
<p>Digite o pais que você nasceu : <input type="text" id="pais"></p>
<div class="button"><input type="button" value="Veficar" id="verificar" onclick="verificar()"></div>
<div id="nome1" style="text-align: center;">
</div>
<div id="resultado" style="text-align: center;">
</div>
</div>
<script>
function verificar(){
var nomee = window.document.getElementById('nome')
var nasc = window.document.getElementById('pais')
var result = window.document.getElementById('resultado')
var result1 = window.document.getElementById('nome1')
var nas = nasc.value
var no = nomee.value
result1.innerHTML = `Prazer em conhecelo <strong>${no}</strong>.`
result.innerHTML = `O Pais que você Nasceu é <strong>${nas}</strong>.`
if (nas == 'Brasil' || nas == 'brasil' || nas == 'BRASIL') {
result.innerHTML += 'Você é Brasileiro!!'
} else {
result.innerHTML += `Você é estrangeiro!!`
}
}
</script>
</body>
</html>
Pra quem quiser fazer funcionar o país letra minúscula ou com outra letra:
function veja(){
var caix = window.document.getElementById('caixa')
var res = window.document.getElementById('res')
var nasc = caix.value
res.innerHTML = `Seu país é: <strong>${nasc}</strong></br>`
if (nasc == 'Brasil' || nasc == 'brasil' || nasc == 'Brazil' || nasc == 'brazil'){
res.innerHTML += 'Parabéns, você é brasileiro'
} else {
res.innerHTML += 'Não é brasileiro'
O meu diz que o onclick não foi definido! O que faço? Não transmite na tela.
Sério, além das aulas serem ótimas o curso em vídeo criou uma comunidade muito boa que sempre ajuda nos comentários.
A minha velicidade atual não esta aparecendo na tela, alguém pode me ajudar? meu codigo ficou assim:
<!DOCTYPE html>
<html lang="pt_BR">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>DETRAN</title>
</head>
<body>
<h1>Sistema de Multas</h1>
velocidade do carro: <input type="number" name="txtvel" id="txtvel"> Km/h
<input type="button" value="Verificar" onclick="Calcular()">
<div id="res">
<script>
function calcular(){
var txtv = window.document.querySelector('input#txtvel')
var res = window.document.querySelector('div#res')
var vel = Number(txtv.value)
res.innerHTML = `Sua velocidade atual é de ${vel}`
}
</script>
</body>
</html>
Missão dada é missão cumprida! Obrigada professor!
O meu ficou assim ::
Vale a pena dar um observada no script, alguns macetes pra facilitar a vida
<!DOCTYPE html>
<html lang="pt-Br">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>NACIONALIDADE</title>
<style>
body{
display: flex;
align-items: center;
justify-content: center;
min-height: 80vh;
background: linear-gradient(45deg, rgb(48, 46, 46), rgb(136, 120, 120));
}
#conteinerbotao{
display: flex;
align-items: center;
justify-content: center;
}
#botao{
width: 100%;
margin: 10px;
padding: 10px;
}
</style>
</head>
<body>
<main>
<h1>NACIONAL ou ESTRANGEIRO</h1>
<label for="nacio">Aonde voce nasceu:
<input type="text" name="nacio" id="nacio" required>
</label>
<div id="conteinerbotao"><input type="button" id="botao" value="Verificar" onclick="verificar()"></div>
<div id="resultado"></div>
</main>
<script>
function verificar(){
var entrada = String(document.querySelector('input#nacio').value).toLowerCase()
var result = document.querySelector('div#resultado')
if (entrada == 'brasil') {
result.innerHTML = `Você é <strong>Brasileiro</strong>`
} else {
result.innerHTML = `Você é <strong>Estrangeiro</strong>`
}
}
</script>
</body>
</html>
<!DOCTYPE html>
<html lang="pt-BR">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Teste de nacionalidade</title>
</head>
<body>
<h1>VOCÊ É BRASILEIRO?</h1>
DIGITE SUA NACIONALIDADE AQUI: <input type="txt" name="txtnac" id="txtnac"> <!–CAIXA DE TEXTO COM NOME E ID QUE EU ESCOLHER–>
<input type="button" value="VERIFICAR" onclick="confirmar()"> <!– UM BOTÃO COM NOME 'VERIFICAR' E FUNÇÃO DE CLICK –>
<div id="res"></div>
</body>
<script>
function confirmar() { //AQUI CRIAMOS UMA FUNÇÃO PARA AS OPERAÇÕES DO SITE
var txtn = window.document.querySelector("input#txtnac"); //AQUI PEGAMOS AS INOFRMAÇÕES DA CAIXA DE TEXTO DO PRIMEIRO INPUT. usei a # para utilizar o id.
var res = window.document.querySelector("div#res"); //AQUI TEM UMA LIGAÇÃO ENTRE A DIV res QUE SERÁ ONDE APARECERÁ O RESULTADO
var nac = txtn.value; //AQUI OS DADOS COM A MENSAGEM AO USUÁRIO
res.innerHTML = `Seu país de origem é <strong> ${nac} </strong> !`; //AQUI A MENSAGEM CONTENDO OS DADOS DA VAR nac COM UMA TEMPLATE STRING SUBSTITUINDO A CONCATENAÇÃO +. A MENSAGEM FICA APARECENDO NA TELA.
if (nac == "Brasil" || nac == "brasil") { //SE VOCÊ ESCREVER brasil ou Brasil. (precisa criar uma variável para cada jeito de escrever usando == ) precisou de aspas duplas.
res.innerHTML += '<p>Você é brasileiro!'} //VAI APARECER ESSA MENSAGEM AQUI. <p> para descer um parágrafo. Não precisa fechar o comando nesse caso.
else ( res.innerHTML += '<p> Você é <strong>Estrangeiro!</strong>') //SE NÃO FOR, VAI APARECER ESSA AQUI. strong pra deixar em negrito.
}
</script>
</html>
Tenbtei criar uma regra para ignorar maiusculas e minusculas mas vi que ainda não cheguei nesse comando. kkkkk
Gente, não esqueçam das aspas nos lugares certos!
eu fiz tudo certo(ou quase) e fiquei quebrando a cabeça procurando meu erro e comparando com o do pessoal aqui nos comentarios. Até descobrir que o meu erro foi esquecer as "" no "Brasil" do meu codigo.
Fiz o exercício 3x…nas duas primeiras eu tava só decorando as aulas…nas terceira tentativa eu realmente fui fazendo linha por linha entendendo o que cada coisa faz…quais valores realmente puxa..e finalmente consegui entender todo processo! Aí fiz meu validadorzinho de bandas riot grrrls kkkkk taí:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>VALIDADOR RIOT GRRRL</title>
</head>
<body>
Digite o nome de uma banda do movimento RIOT GIRRRLS: <input type="text" id="bandfield">
<input type="button" value="verificar" onclick="validaband()">
<div id="res"></div>
<script>
function validaband() {
var banda = document.querySelector('input#bandfield')
var bandatxt = banda.value
var resposta = document.querySelector('div#res')
resposta.innerHTML = `<p>A banda que você escolheu é: <strong>${bandatxt}</strong></p>`
if (bandatxt == 'sleater kinney' || bandatxt == 'bikini kill' || bandatxt == 'babes in toyland' || bandatxt == 'hole' || bandatxt == 'l7' || bandatxt == 'bratmobile') {
resposta.innerHTML += `<p>Parabéns!!! você curtiu muito os anos 90 com gritaria!!!</p>`
} else {
resposta.innerHTML += `<p>Desculpa, mas essa banda não era do movimento RIOT GIRRRLS! Você lia muito revista showbizz!!! =(</p>`
}
}
</script>
</body>
</html>
Meu resultado nao dava certo por meras "" kkk. Estava colocanco o Brasil sem elas fica a dica if (nac == "Brasil")
👏👏👏👏👏👏👏👏👏👏
Conseguir fazer o exercício 11, mas dá para ficar melhor. Vamos ver com as próximas aulas.
<!DOCTYPE html>
<html lang="pt-BR">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>NACIONALIDADE</title>
</head>
<body>
<div id="Resultado">
</div>
<script>
var País = window.prompt('Em qual país está vivendo?')
if (País == 'Brasil') {
Resultado.innerHTML += (`Você é brasileiro!`)
}
else {
Resultado.innerHTML += (`Você é estrangeiro`)
}
</script>
</body>
</html>
Apanhei nesse exercício mas consegui resolver no final. Vou compartilhar o que descobri como dica para vcs:
<body>
<input type="text" name="país" id="país">
</body>
<script>
var txt = window.document.getElementById('pais').value
</script>