E eu que tava querendo desistir com 12 dias kkkkkk... Depois de ter estudado quase 4 meses de HTML e CSS conseguindo fazer uns projetos legais, fui direto pra esse curso e peidei... Muito complicado no inicio, me senti burro e quis desistir, continuei firme e depois de um mes estou mais confortavel, ainda ta muito complicado mas bem melhor. O problema nem é a dificuldade do negocio e sim a nossa ansiedade que atrapalha demais, queremos realizar rapido, mas nao tem como, programacao n tem como, o negocio é dar foda-se ao tempo e ir estudando, todos os dias, um pouco cada dia
Eu q sou super iniciante e to aprendendo sozinha, só com os vídeos, fazer esse exercício e dar certo é uma vitória! Nunca tinha escrito tantos códigos até então, é mta concentração, todo detalhe importa. Obrigada!!
@@carolbezerra335 espero um dia tbm poder conseguir 🌝. Qual foi sua trajetória? Fez alguma faculdade? Trabalha em empresa ou freelancer?. Dcp as perguntas kk
o loco! muito melhor assim, tinha feito img.setAttribute("style","border-radius: 50%" ) img.setAttribute("width", "250") img.setAttribute("height", "250")
Existe um único problema nisso, é que dessa maneira a imagem não reduz o tamanho (peso) Fazendo (se um site real) carregar mais lentamente, por conter imagens de tamanhos excessivos.
Cheguei na aula 12, exercício 3. Aqui, em vez de ir acompanhando a apresentação e fazendo ao mesmo tempo, inverti a situação. Vi o trecho inicial onde é apresentado o projecto a construir e pausei aí o video. Fui fazer o projecto por mim. Apesar de alguns pequenos erros iniciais, me deu bastante gozo ter ultrapassado sozinho e chegado ao fim com as funcionalidades descritas e uma implementação muito parecida ao de Guanabara. Isso me deu motivação extra, pois é sinal que estou aprendendo. Espero que essa partilha, seja útil para todos que estão interessados em aprender programação.
Setembro de 2023 e aqui estou estudando e tentando aprender com 43 anos de idade. Eu acredito que vou conseguir aprender e trabalhar com programação. Obrigado pelo curso Guanabara!!!!!!!
eu tmb estou com a mesma idade , iniciei os estudos no início de 2023 , estou desempregado em transição de carreira .. esse curso é a salvação pra quem não tem como arcar com custos de um curso pago ! Obrigado Guanabara , obrigado Google !
Fiz todo o curso que tinha de css e html, foi 3 a 5 meses, agr é foca no meu sonho, e quem ta em 2023 nn desista, se vc gosta e vdd siga em frente a todo custo
@@eliasaraujo7364 Eu também kkkk. O primeiro Exercício eu consegui fazer, tive umas complicações, mas depois de um certo tempo eu resolvi e fiz com carregamento no botão e não quando carrega a página, pois não sabia antes de ver o vídeo. Mas, nesse segundo exercício eu me estressei demais. Ai parei, fui fazer outra coisa e só voltei no outro dia. Ai mesmo assim nao tava conseguindo kkk ae resolvi parar e assistir o vídeo. Ai veio a Surpressa, tem tanta coisa nova para resolver esse exercicio que nem vimos durante o curso. Ai fiquei aliviado kkkk . Negócio é não desistir nunca!, mas perdi bastante tempo nesse exercício deu até um pouco de arrependimento
@@neto__2502 Primeiramente eu faço o raciocinio lógico e monto o esquema mentalmente, depois vou desenvolvendo e sempre que surgir alguma dúvida de comando, eu vejo se tenho o comando em outro exercicio que eu fiz. Ai no final eu consulto a resolução do vídeo. Sou novo em programação, Javascript é minha segunda linguagem - Estudei uns 4 meses de c#, mas faz uns 2 anos, lembro quase nada, apenas o básico e a lógica de programação.
Pra quem ta dando erro na imagem quando tenta testar, uma dica: coloquem a imagem na mesma pasta do JS, pra mim assim funcionou, valeu pelo conteúdo Guanabara!!!
Se a imagem não ficar embaixo da ultima frase, centralizada, façam isso. Na JS var img = document.createElement("img") img.setAttribute("id", "photo") Na CSS3 img#photo { display: block; margin: auto; padding: 10px; } // #photo aqui é o id que eu coloquei pra identificar a imagem. assim vai ficar centralizado e com padding.
2 ปีที่แล้ว +9
eu coloquei a tag nesse trecho. res.innerHTML = `Detectamos ${genero} com ${idade} anos.`
meu codigo não da erro, as imagens estão na pasta do modelo certo... e mesmo assim as imagens não carregam, alguem pode dar uma luz, vou tentar resolver sozinho... mas se algum abençoado quiser me ajudar ficaria agradecido, se não tentarei carregar as imagens pelo css; vou deixar meu codigo aqui que fui fazendo de acordo com a aula. function verificar() { var data = new Date() var ano = data.getFullYear() var fano = document.getElementById('txtano') var res = document.querySelector('div#res') if(fano.value.length == 0 || fano.value > ano){ window.alert('[ERRO] Verifique os dados e tente novamente') } else { var fsex = document.getElementsByName('radsex') var idade = ano - Number(fano.value) var gênero = "" var img = document.createElement('img') img.setAttribute('id', 'foto') if (fsex[0].checked){ gênero = 'Homem' if(idade >=0 && idade < 10) { //Criança img.setAttribute("src", "foto-bebe-m.png") } else if (idade >= 10 && idade < 21) { // Jovem img.setAttribute("scr", "foto-jovem-m.png") } else if (idade < 50){ // adulto img.setAttribute("scr", "foto-adulto-m.png") }else { //Idoso img.setAttribute("scr", "foto.idoso-m.png") } } else if (fsex[1].checked) { gênero = 'Mulher' if(idade >= 0 && idade < 10) { //Criança } else if (idade >= 10 && idade < 21) { // Jovem } else if (idade < 50){ // adulto }else { //Idoso } } res.style.textAlign = 'center' res.appendChild(img) res.innerHTML = `Detectamos ${gênero} com ${idade} anos.`
Com as aulas eu aprendi a LER o código como se estivesse lendo um livro, com os exercicios estou aprendendo a realmente a programar... Pra galera que ta começando agora, façam tudo e complementem pesquisando no YT: Desenvolvendo Calculadora com JS + HTML + CSS, Desenvolvendo site com JS etc... Existem diversos videos que você pode assistir e ao mesmo tempo ir copiando, isso ajuda MUITO!
Oi mano, pode me ajudar? Tô iniciando agr e eu tô fazendo os exercícios e vendo o vídeo ao mesmo tempo, porq é tudo novo p mim, aprender dessa forma é bom?
@@Ryan-rz9of Olá mano, blz ? Sim, ótima forma de aprender. Persista e tenha consistencia, faça todo dia um pouco, que seja 30 minutos, logo estará avançado.
sensacional, esse formato ficou excelente, verdadeira obra prima, eu fiz bem devagar ,anotando , mexendo e remexendo no código, valeu todo semestre de javascript da faculdade. Obrigado, Deus lhe abençoe.
Pronto , consegui fazer o exercicio por conta própria sem olhar o video . Fiz bastante anotações dentro do Visual Studio Code e Uso meu notion pra anotar e colocar imagens . Acho que estou pronto pra ir para a próxima etapa porque quando eu olho pro projeto , consigo diferenciar as árvores da floresta em si . Isso é um sinal que eu organizo minhas idéias e vejo os detalhes . Vlw!
Pra quem está com problemas quando ao carregar a imagem a mesma aparece na mesma linha que a do resultado, colocar uma tag dentro da mensagem do res vai resolver.
quebrando a cabeça pq nao tenho e não sei mexer em editores de imagem (canvas, photoshop etc) até que pelas aulas consegui chamar pelo Js e ficou assim img.style.cssText = "width: 250px; height: 250px; border-radius: 50%; padding-top:10px" ótimas aulas, sempre vejo pra me lembrar
Pra quem não conseguiu fazer as imagens das pessoas com diferentes idades, ao invés de colocar o nome da foto entre 'aspas simples, coloque entre "aspas duplas" funcionou aqui comigo - estava há horas tentando resolver
cara! Aprendir pra caralho sobre JavaScript até aqui sinto orgulho deste canal fodastico... E vou continuar aprendendo a fora, Valeu guanabara vc salvou minha vida por da essa iniciativa.
Eu não consegui resolver totalmente o exercício mas estou feliz por ter tentado. Estou estudando e aprendendo com os vídeos do canal e vou continuar me esforçando!
Estou vendo esse curso em 2024, usando ele como um material complementar ao curso de Web Moderno que estou fazendo. Gosto muito da sua didática Guanabara, antes eu estava com dificuldade em pegar do JS, mas agora eu estou conseguindo fluir nos meus estudos. Acrescentei uma condição que identifica/determina a geração a qual o usuário pertence com base no ano informado pelo mesmo.
Projetos - Calculadora Básica (campos separados) - Calculadora Intermediária (1 campo) - Calculadora Avançada (equações) - Verificar se é humano (através de conta matemática) - Verificar se é maior de idade (pela data de nascimento) - Listar arquivos e navegar pastas - Jogo da velha - "Sistema operacional" no navegador - Calculadora de troco - Conversor de moedas - Display digital de números - Verificar ganhou/perdeu em jogo de moeda - Placar de jogo de futebol - Script para dar unfollow em usuários do instagram que não te seguem - Mostrar um deck de cartas - Jogo batalha naval - Jogo da forca - Script que você dá uma frase e ele cria vários .txt com uma palavra em cada - Verificador de Plágio (Usando o Google com aspas) - Pedra, papel e tesoura contra a máquina - Pedra, papel e tesoura online - Livro de contatos - Conversor de número romano em inteiro - Script que lista o número de dias em cada mês - Jogo de luta intercalada (um golpe por vez, dano aleatório) - Mostrar profissão aleatória - Distância entre duas posições geográficas - Usuário insere vários números e mostra a média - Simulador de dado - Mostrar a temperatura atual em X localização (pegando de algum webservice) - Tela de compras de supermercado - Contagem Regressiva - Jogo de blackjack (21) - Calculadora de tijolos necessários - Validador de cartão de crédito (pesquisar como cartões de crédito funcionam) - Nome dos números (mil duzentos e trinta e três) - Reordenador de lista - Inverter a string - Gerador de feed RSS baseado em banco de dados - Área de comentários - Testador de expressões regulares - Pegar localização pelo IP ( ipinfo.io/0.0.0.0/json ) - Sistema de consulta para médicos - Sistema de conta bancária - Galeria de imagens (com categorias) - Criador de thumbnail - Page Scraper (entra em um site e salva todos os links, sem duplicar) - Sistema de gerenciamento de conteúdo (opcional: modular) - Forum - Sistema de Captcha - Gerador de PDF - Ferramenta de SQL Remoto - Gerenciador de orçamento pessoal - Slideshow - Portal de Notícias
Professor, muito obrigado por fazer esse trabalho incrível, consegui construir a aplicação sem ver o vídeo, apenas com os conhecimentos das aulas, sou muito grato, obviamente meu código ficou diferente mas o resultado deu certo, obrigado professor !!
Estou fazendo hj esse exercício e minhas imagens não aparecem , já apaguei tudo e refiz duas vezes e mesmo assim não funciona, já quebrei a cabeça pra descobrir meu erro e não achei , estou super chateada com isso
ao invés de fazer 2 cadeias de ifs e elses (pra homem e mulher), eu separei as imagens em 2 pastas e fiz da seguinte forma: if(fgen[0].checked) genero = 'homem'; else genero = 'mulher'; if(idade
Comecei esse curso aqui depois de terminar os 4 módulos de HTML5 e CSS3, e consegui fazer o exercício sozinho e de uma forma diferente da que o Guanabara fez nesse vídeo, a todos que estiverem com muita dificuldade de entender esse curso de JS por causa do HTML e CSS, recomendo fortemente que façam primeiro o curso de html e css que o professor disponibiliza aqui no canal.
@@nikinmsn Cara eu fazia 1 módulo por mês, isso estudando quase todos os dias e elaborando minhas próprias práticas, e clonando a aparência de alguns sites p praticar, então foi algo em torno de 4 meses.
Eu fiz sozinho todo o exercício, deu tudo certo, depois assisti o vídeo corrigindo e melhorando baseando nesse vídeo e aplicando conceitos e comandos novos que introduziu nesse vídeo
Eu fiz esse exercício a um tempo atrás e segui a resolução, agora eu consegui reescrever o código usando funções e alguns comandos diferentes, fiquei feliz em conseguir "criar" outra solução
4 ปีที่แล้ว +5
Caramba... show. Para quem nunca fez nenhuma programação na vida (tipo eu \o/) é trabalhoso chegar até o fim da aula.... kkkk Mesclando trabalho com estes estudos eu levei , tipo.... 2 dias kkkkk Consegui fazer tudo funcionar agora e acho que preciso de uns 30 minutos de cama para ver se o tico e o teco voltam ao normal!
Qualquer problema com o alinhamento da imagem e do texto, é só colocar o trecho em uma tag P: res.innerHTML = `Detectamos: ${genero} de ${idade} anos.`
Salvou demais cara, e me fez entender que isso estava acontecendo por causa do tamanho da fonte da section. Se você colocar a fonte maior também funciona, pq não dá pra colocar o texto e a imagem lado a lado se a fonte estiver maior.
família não sei se nos comentários alguém já falou, mas fica muito mais fácil se você criar variáveis para as Strings que precisa converter pra number por exemplo var fano = document.getElementById('txtano') var anos = Number(fano.value) if(anos == 0 || anos > ano){ window.alert('erro' } desse jeito, isso evita ter que ficar pondo a variavel e o ".value" toda hora é só por a nova variável no lugar, fiz assim e visualmente ficou melhor o código
Me perdi! Depois me encontrei. Se perder o foco um segundo uma letra Maiúscula demora meia hora pra ser achada! Tu é fera, Guanabara! Se garante muito! Obrigado por compartilhar!
Gustavo, quero agradecer porque já assistindo até aqui consegui fazer um site que mostra de acordo com a lei do motorista, quantas horas seriam necessárias, sendo horas normais e horas extras segregadas, conseguindo até mesmo saber o custo do profissional por viagem! Muito obrigado!
Até consegui fazer, porém não sabia sobre o "setAtributo". Aí fiz uma tag no html, deixei como "display none". Quando acionado, "display inline" (no script). Aí deu certo... hehehe... Tô gostando muito de fazer estes exercícios. Muito obrigado!
Para quem não tem photoshop e quiser colocar a imagem como um circulo via css é só fazer o seguinte: #foto{ width: 200px; height: 200px; border-radius: 100px;} lembrando que a largura e altura devem ser iguais e para borda ficar redonda, é só colocar no border-radius a metade da largura e da altura.
pra falar bem a verdade eu estava desanimado ate começar a treinar com os exercícios, agora que eu consegui acompanhar, estou confiante que irie conseguir aprender a programar um dia
Boa noite, eu fiz uma alteração na função(variável gênero), a função informa se é uma criança, jovem, adulto ou idoso e também arrumei as imagens dentro de uma pasta ao invés de deixar elas soltas na raiz junto com os arquivos html, js e css. function verificar(){ var data = new Date() var ano = data.getFullYear() var fano = document.getElementById('txtano') var res = document.querySelector('div#res') if (fano.value.length == 0 || fano.value > ano) { window.alert('[ERRO] Verifique os dados e tente novamente') } else{ var fsex = document.getElementsByName('radsex') var idade = ano - Number(fano.value) // res.innerHTML = `Idade calculada: ${idade}` var genero = '' var img = document.createElement('img') if(fsex[0].checked) { //genero = 'Homem' if (idade >=0 && idade < 10) { // criança img.setAttribute('src','img/crianca-H.jpg') genero = 'uma criança' } else if (idade < 21) { // jovem img.setAttribute('src', 'img/jovem-H.jpg') genero = 'um jovem' } else if (idade < 50){ // adulto img.setAttribute('src','img/adulto-H.jpg') genero = 'um adulto' } else { // idoso img.setAttribute('src','img/idoso-H.jpg') genero = 'um idoso' } } else if (fsex[1].checked) { //genero = 'Mulher' if (idade >=0 && idade < 10) { // criança img.setAttribute('src','img/crianca-M.jpg') genero = 'uma criança' } else if (idade < 21) { // jovem img.setAttribute('src','img/jovem-M.jpg') genero = 'uma jovem' } else if (idade < 50){ // adulto img.setAttribute('src','img/adulto-M.jpg') genero = 'uma adulta' } else { // idoso img.setAttribute('src','img/idoso-M.jpg') genero = 'uma idosa' } } res.style.textAlign = 'center' res.innerHTML = `Detectamos ${genero} com ${idade} anos` res.appendChild(img) } }
esses exercícios valem ouro. Me ajudaram a solucionar o problema de como "pegar" a opção selecionada no radio e baseada nela colocar um select option personalizado
topppp! Só um toque pra quem está começando assim como eu, var funciona fora do escopo podendo causar bugs inesperados, usem let se a variável for mudar, ou const se for uma variável fixa!
ótimo curso, sempre seguindo os conselhos de Guanabara, exercitar e descansar, nada de maratonar com a cabeça e o corpo cansado, adorando o curso. Logo que terminar já estarei iniciando o de html e depois o de css, aos poucos se vai ao longe. Obrigada!
O programa final da vide-aula reconhecia pessoas com mais de 170 anos... acrescentei essa condição: if (Number(fano.value.length) == 0 || Number(fano.value) > ano) { window.alert('Verifique os dados e tente novamente!') } else if (Number(fano.value) < 1850) { \\ ACRESCENTEI ESSA CONDIÇÃO window.alert('Verifique os dados e tente novamente!') } ÓTIMA AULA :)
Poderia ter colocado essa condição no primeiro if, desse jeito vc ta criando outro if com o mesmo resultado sem necessidade, e também no javascript você pode testar numeros em strings normalmente, sem precisar transformar com Number(). if (fano.value.length == 0 || fano.value > ano || fano.value < 1850) { window.alert('Verifique os dados e tente novamente!') }
Quem quiser um efeito diferente na section do exercício anterior, é só brincar com a propriedade border-radius, por exemplo: border-radius: 60px 45px 30px 15px/15px 30px 45px 60px;
Galera, pra quem não tem Photoshop e gostaria de tentar usando códigos pelo css, tenho uma sugestão! img { padding-top: 15px; width: 250px; height: 250px; border-radius: 50%; object-fit: cover; object-position: center 55%; } object-position: center 55%;
21:49 Sobre esses alunos que não acham importante praticar(nem gostam), acho engraçado, pois sempre gostei mais da prática do que aulas, testar comandos errar "até dar uma dor". E cada vez mais vejo a importância da prática. Toda vez que o Guanabara diz isso na aula, penso assim e tive que expor esse pensamento XD.
Do nada veio um insight para meu nicho de viagens, acho que vai gerar muitos LEADS HAHAHAHAH pqp obrigado pelo conhecimento oferecido, sinto que a cada aula surge ideias e pensamentos que pode transformar para melhor o meu trabalho e aliás iniciei faculdade de analise e desenvolvimento devido a esse curso, somente gratidão Guanabara e todos envolvidos nesse belo trabalho!
Se houverem muitas imagens, pra não ter que fazer vários ifs, pode-se fazer: function verificar(){ var data = new Date() var ano = data.getFullYear() var fano = document.getElementById('txtano') var res = document.querySelector('div#res') if(fano.value.length == 0 || Number(fano.value) > ano) { window.alert('[Erro] Verifique os dados e tente novamente') } else { var fsex = document.getElementsByName('radsex') var idade = ano - Number(fano.value) var genero = '' var img = document.createElement('img') var fasevida = ' ' img.setAttribute('id', 'foto') if(fsex[0].checked){ genero = 'Homem' } else if (fsex[1].checked){ genero = 'Mulher' } if(idade >= 0 && idade < 10){ fasevida = 'crianca' } else if (idade >= 10 && idade < 21){ fasevida = 'jovem' } else if (idade >= 21 && idade < 50){ fasevida = 'adulto' } else { fasevida = 'idoso' }
var foto_res = `foto_${fasevida}_${genero.toLowerCase()}.png` img.setAttribute('src', foto_res) res.style.textAlign = 'center' res.innerHTML = `Detectamos ${genero} com ${idade} anos.` res.appendChild(img) } } ___________________________________________________________________________________________ nome das imagens: foto_adulto_homem.png foto_adulto_mulher.png foto_crianca_homem.png foto_crianca_mulher.png foto_idoso_mulher.png foto_idoso_homem.png foto_jovem_homem.png foto_jovem_mulher.png
Para quem está com o problema com o checked no Js: tenta colocar o .checked direto na variável onde está o input:radio -- HTML: Sexo:
Masculino
Feminino -- JS: var genero_masculino = document.getElementById('masculino') var genero_feminino = document.getElementById('feminino') if (genero_masculino.checked) { var genero = 'Homem' } else if (genero_feminino.checked) { var genero = 'Mulher' }
Estou adorando esses cursos. Tou aprendendo mto, nesse exercicios eu até mudei a forma que aparece. o JS detecta qnd é Criança, Adolescente, Jovem, Adulto e Idoso ^^
Pessoal não edite a foto pelo CSS não ! num futuro, quando for alocar o site em um servidor, vocês vão carregar a imagem com tamanho muito maior do que vocês vão usar no site. EXEMPLO: Carrega no servidor uma imagem de 1280x650 mas na hora de jogar no site vocês usam apenas 250x250.. estão gastando memória do server atoa, estão pagando por isso, no mais quando mais código estiver no seu css mais pesado seu site ficará... sendo assim evita redimensionar imagens no CSS.
Esse ai foi daora de fazer, adoro a sensação de ir codando e no final ter aquele código, "organizado", GRANDE, IMPONENTE, fico rodando a tela só para olhar para o código pq acho legal kkkkkkkk, OBG guanabara s2, já aprendi python, html, css e agr Js
Passei um dia inteiro tentado fazer esse exercicio sem pegar cola aqui no video mas nao consegui kkkkkkk. Mas sinto que estou aprendendo, isso é ótimo. Muito obrigado, Guanabara e toda a equipe do Curso em Vídeo =)
Não existe isso de "pegar cola". Você tenta fazer, e caso não tenha conseguido, você confere o seu código com o código certo, e descobre em qual ponto você errou, aprendendo assim a fazer do jeito certo. Quem te falou que você não pode pedir ajuda é orgulhoso e está errado. Humildade faz bem para o aprendizado e também para a vida.
Fiz o meu sozinho também, acho q só tive dificuldades pra pegar o conteúdo do radio e tive que ver essa parte do vídeo, meu código ficou todo estranho, mas deu certo. :)
Pessoal, pra quem não tem Photoshop e quer deixar redondinha a foto... eu editei no css img{ border-radius: 50%; } não vai ficar com centralização da imagem perfeita dependendo da foto mas é uma alternativa.
Para deixar centralizada, como se estivesse feito no Photoshop, eu fiz uma gambiarra no CSS e ficou igualzinho... Segue: img { width: 300px; border-radius: 150px; margin-top: 10px; margin-left: 20px; heigth: 300px; } Obs: baixei as imagens com os tamanhos originais dos sites. Faz o teste aí e me fala se deu certo. 😊
Eu fiz um poquiiinho diferente kk, ao invez de colocar pessoas normais eu coloquei AGIOTAS, não que agiota não seja pessoa mas enfim, coloquei o chris agiota como o jovem, o alek agiota como o adulto, o jacquin agiota como o veio e o goku bebe agiota, como não tinha agiotas mulheres eu coloquei o macaco agiota. Por mais mulheres agiota nesse mundo kkkk, ficou mt engraçado hahuahu
Para deixar a imagem redonda e centralizada, como se estivesse feito no Photoshop, eu fiz uma gambiarra no CSS e ficou igualzinho... Segue: img { width: 300px; border-radius: 150px; margin-top: 10px; margin-left: 20px; heigth: 300px; } Obs: baixei as imagens com os tamanhos originais dos sites. Faz o teste aí e me fala se deu certo. 😊
A configuração por CSS é válida, contudo se vc não reduziu o tamanho das imagens em algum programa, deixaria seu site lento. Então, mesmo que queira configurar por CSS, seria interessante reduzir o tamanho com um programa
Eu tentei fazer a parte do se senão sem olhar a resposta e eu apanhei feio, pq de alguma forma que eu não entendi, as chaves estavam erradas, ai nunca dava certo. Mas no final consegui compreender muito bem. Eu penso que não tem problema olhar a resposta, mas sim apenas copiar o código sem realmente te-lô compreendido. E graças a didática do Guanabara, hoje eu sou capaz de explicar o pq cada código desse exercício, é do jeito que é. Obrigado Curso em Vídeo, obrigado Professor Guanabara ❤
Man@, faz os exercícios!! eu fiquei 1h. batendo cabeça olhando meu código pra achar o erro, e olhava o meu e o do Guanabara e pensava: essa po##4 ta igual pq não funciona?? adivinha. um ' T ' que faltou o setAttibute( ' ' ) kkkkk o curso e ótimo, obrigado Google e professor Guanabara.
SCRIPT AQUI ATENÇÃO, FAÇA O SEU, USE ESSE APENAS EM CASO DE EMERGÊNCIA PARA TIRAR DÚVIDAS, DIGITE O SEU (há divergências de ids com o da aula) function verificar() { var data = new Date() var ano = data.getFullYear() var anoN = document.getElementById('txtano') var anoNasc = anoN.value var res = document.querySelector('div#res') if (anoNasc ano) { res.innerHTML = "Dados incorretos, revise-os!" alert('Dados incorretos, revise-os!') } else { var sexo = document.getElementsByName('radsexo') var idade = ano - anoNasc var genero = "" var img = document.createElement('img') img.setAttribute('id', 'foto') if (sexo[0].checked) { genero = "Masculino" if (idade < 10) { img.setAttribute('src', 'kid-boy.png') } else if (idade < 20) { img.setAttribute('src', '_imagens/boy.png') } else if (idade < 60) { img.setAttribute('src', '_imagens/man.png') } else { img.setAttribute('src', '_imagens/old-man.png') } } else { genero = "feminino" if (idade < 10) { img.setAttribute('src', '_imagens/kid-girl.png') } else if (idade < 20) { img.setAttribute('src', '_imagens/girl.png') } else if (idade < 60) { img.setAttribute('src', '_imagens/woman.png') } else { img.setAttribute('src', '_imagens/old-woman.png') } } res.innerHTML = `A idade da pessoa foi ${idade} anos e o gênero ${genero}.` img.style.padding = '10px' res.appendChild(img) }
Não estava conseguindo selecionar o input radio como ele fez, ai fiz assim e funcionou: var radius = document.querySelectorAll("input[type='radio']") var gen = ' ' if (radius[0].checked){ gen = 'Masculino' } else { gen = 'Feminino' }
SCRIPT PRA QUEM NÃO QUER USAR POTOSHOP(pode usar foto inteira com isso), tente compreender é facil!! troque apenas o caminho das minhas fotos, para o caminho da suas fotos!! OBS: eu poderia arrumar essa parte das fotos no css, mas resolvi fazer ali no JS para praticar, por isso o código ficou um pouco mais extenso. function verificar() { var data = new Date() var ano = data.getFullYear() var fano = document.getElementById('txtano') var res = document.getElementById('res') if (fano.value.length == 0 || fano.value > ano) { window.alert('[ERRO] Verifique os dados e tente novamente!!') } else { var fsex = document.getElementsByName('radsex') var idade = ano - Number(fano.value) var genero = '' var img = document.createElement('img') img.setAttribute('id', 'foto') if (fsex[0].checked) { genero = 'Homem' if (idade >= 0 && idade < 10) { //criança img.setAttribute('src', 'media/garotinho.jpg') img.style.width = '250px' img.style.height = '250px' img.style.borderRadius = '125px' img.style.margin = '8px' } else if (idade < 21) { //jovem img.setAttribute('src', 'media/jovemhomem.jpg') img.style.width = '250px' img.style.height = '250px' img.style.borderRadius = '125px' img.style.margin = '8px' } else if(idade < 50) { //adulto img.setAttribute('src', 'media/adulto.jpg') img.style.width = '250px' img.style.height = '250px' img.style.borderRadius = '125px' img.style.margin = '8px' } else { //idoso img.setAttribute('src', 'media/idosohomem.jpg') img.style.width = '250px' img.style.height = '250px' img.style.borderRadius = '125px' img.style.margin = '8px' } } else if (fsex[1].checked) { genero = 'Mulher' if (idade >= 0 && idade
Eu coloquei as características da '' img '' junto com o primeiro comando '' else '' declarado. Sabe se tem algum problema? Testando no exercício, não apresentou nenhuma falha mas vai q não é aconselhável fazer desse meu jeito... function verificar(){ var data = new Date() var ano = data.getFullYear() //full year é pq vai pegar com 4 digitos var formano = document.querySelector('input#cxtextoano') var res = document.querySelector('div#res')
if (formano.value.length == 0 || Number(formano.value) > ano){
window.alert('Verifique o ano e tente novamente!')
}else{ var fsex = document.getElementsByName('radsex') var idade = ano - Number(formano.value) var genero = ' ' var img = document.createElement('img') img.setAttribute('id' , 'foto') img.style.width = '250px' img.style.height = '250px' img.style.borderRadius = '125px' img.style.margin = '8px'
08/07/2020 - não sei porque a condição que copiei da aula não funcionou, não dava nem erro ''direto'', no debug no site eu via mensagem de erro escrito que não estava lendo o valor ''value'' dentro da expressão, mas resolvir da seguinte forma ; if (fano.value == length || Number (fano.value) > ano ) estranhamente isso funcionou e a expressão que o coloquei seguindo o video não, se alguém souber o por que agradeceria muito se comentasse aqui !! desde já agradeço !
Você pode usar .innerHTML e adicionar esse texto como patagrafo res.style.textAlign = 'center' res.innerHTML = `Detectamos ${gênero} com ${idade} anos.` res.appendChild(img)
@@MarceloDiasSchneider Faz como eu, coloca um entre o texto e a imagem kkk Caso encontre uma solução melhor, manda a resposta aí. Talvez o ideal seria criar outro ou uma tag específica para a imagem, aí solucionaria o problema.
Quem aqui fez na primeira vez, deu erro, tentou achar o erro (longo tempo), não achou, refez tudo do zero e deu certo. E fica se perguntando onde foi que eu errei??!! Programação brinca com a sua paciência e principalmente com a atenção.
Olá o/ Estou fazendo o curso agora e estou com um problema nesse exercício, parece que não é reconhecida o método .checked nas condições para verificar se foi marcado sex masc ou fem, alguém tbm teve esse problema e poderia me dá uma ajudinha? Tentei o mesmo usando operador ternário e nada.
Oi, eu resolvi da seguinte forma: 1. Alterei o nome 2. Mudei de var para Let 3. Para fazer um teste coloquei um window.alert para me certificar que eles estavam funcionando. Espero ter ajudado (:
@@allantavares2535 no meu tava dando isso, mas eu percebi q eu quando eu criei a variavel "fsex" eu coloquei o seguinte comando: var fsex = document.getElementById('radsex') sendo o correto o: var fsex = document.getElementsByName('radsex') espero ter ajudado!
Achei bem interessante adicionar a função "onkeypress" é bem simples quem quiser usar, segue o código. no html só ira mudar o button >>> E no script.js adiciona esse codigo no final do codigo >>>>> var input = document.getElementById("txtano"); input.addEventListener("keyup", function(event) { if (event.keyCode === 13) { event.preventDefault(); document.getElementById("enterKey").click(); } });
Após 5 meses estudando já consigo fazer os exercícios sem acompanhar o vídeo, que sensação incrível.
e isso mesmo , no começo e bem difícil , depois fica bem suave
E eu que tava querendo desistir com 12 dias kkkkkk... Depois de ter estudado quase 4 meses de HTML e CSS conseguindo fazer uns projetos legais, fui direto pra esse curso e peidei... Muito complicado no inicio, me senti burro e quis desistir, continuei firme e depois de um mes estou mais confortavel, ainda ta muito complicado mas bem melhor. O problema nem é a dificuldade do negocio e sim a nossa ansiedade que atrapalha demais, queremos realizar rapido, mas nao tem como, programacao n tem como, o negocio é dar foda-se ao tempo e ir estudando, todos os dias, um pouco cada dia
@@thinkerhuh to literalmente nessa msm situaçãooo
Eu q sou super iniciante e to aprendendo sozinha, só com os vídeos, fazer esse exercício e dar certo é uma vitória! Nunca tinha escrito tantos códigos até então, é mta concentração, todo detalhe importa. Obrigada!!
E como esta seu nível de programação agora em 2022?
@@esquecido_afk906 trabalho na área
@@carolbezerra335 espero um dia tbm poder conseguir 🌝. Qual foi sua trajetória? Fez alguma faculdade? Trabalha em empresa ou freelancer?. Dcp as perguntas kk
@@esquecido_afk906 fiz trybe, não penso em fazer faculdade na área, trabalho em empresa
@@carolbezerra335 a sim, obgd
Para deixar a foto no tamanho pode colocar no CSS
#foto{
width: 250px;
height: 250px;
border-radius: 50%;
}
faz horas que tentava fazer isso pelo js e não dava certo, pelo css é bem melhor
o loco! muito melhor assim, tinha feito
img.setAttribute("style","border-radius: 50%" )
img.setAttribute("width", "250")
img.setAttribute("height", "250")
Existe um único problema nisso, é que dessa maneira a imagem não reduz o tamanho (peso)
Fazendo (se um site real) carregar mais lentamente, por conter imagens de tamanhos excessivos.
fiz dessa maneira, mas no pexels ja baixei as imagens com o tamanho 250x250
isso deixa o site mais pesado, melhor é editar as imagens no tamanho.
Em 2019
Guanabara: 2022 ainda não chegou...
E aqui estamos... 2022 assistindo esse curso excelente. :)
exatamente kkkkkk
Simm kkkkkkk
já é possivel não dar erro ter nascido em 2022 kkkk
Estamos assistindo hehehe
kkkkkk que coincidência
Estou fazendo o curso em janeiro/2024. Estou com 66 anos e como nunca programei para web, tenho que aprender do zero e tenho certeza que conseguirei.
espero que consiga! tenho 11 anos e também estou aprendendo programação! na verdade, estou relembrando pois meu pai já havia me ensinado 😊🌹👍🥳🥺
@@channelofredes2022 que bonito, parabens pra voces dois 👏
@@channelofredes2022 11 anos, slk kkkkkkkkkkkkkkk
Por um mundo com mais cursos do Guanabara
#GooglePatrocinaNoix
#IntermédiarioEAvançado
#GooglePagaMais
Cheguei na aula 12, exercício 3. Aqui, em vez de ir acompanhando a apresentação e fazendo ao mesmo tempo, inverti a situação.
Vi o trecho inicial onde é apresentado o projecto a construir e pausei aí o video.
Fui fazer o projecto por mim. Apesar de alguns pequenos erros iniciais, me deu bastante gozo ter ultrapassado sozinho e chegado ao fim com as funcionalidades descritas e uma implementação muito parecida ao de Guanabara. Isso me deu motivação extra, pois é sinal que estou aprendendo. Espero que essa partilha, seja útil para todos que estão interessados em aprender programação.
também estou fazendo dessa forma, é uma ótima maneira de tentar fazer com oque já se sabe.
tambem, só não usei alguns novos atributos
Setembro de 2023 e aqui estou estudando e tentando aprender com 43 anos de idade. Eu acredito que vou conseguir aprender e trabalhar com programação. Obrigado pelo curso Guanabara!!!!!!!
sucesso meu mano!
eu tmb estou com a mesma idade , iniciei os estudos no início de 2023 , estou desempregado em transição de carreira .. esse curso é a salvação pra quem não tem como arcar com custos de um curso pago ! Obrigado Guanabara , obrigado Google !
fevereiro de 2024, encantado com o curso, tenho 45 anos e ainda não desisti de entrar no ramo da tecnologia
Sucesso meu amigo!!!
Fiz todo o curso que tinha de css e html, foi 3 a 5 meses, agr é foca no meu sonho, e quem ta em 2023 nn desista, se vc gosta e vdd siga em frente a todo custo
2024 promete muito pra todos nós
Esse exercício é show.
A gente olha e pensa "moleza", mas na hora de colocar a mão na massa é um monte de "ué???" kkkkkkk
kkkkkkkkkkkkkkkkkkkkkkkkk desse jeito, da um branco na hora de por o código ae la vai eu olhar de novo kkkkkkkkkkkkkkkkkkkkkkk
Misericórdia, tentei fazer antes de ver a aula. Nuss achei que eu ia ficar louco
@@eliasaraujo7364 Eu também kkkk. O primeiro Exercício eu consegui fazer, tive umas complicações, mas depois de um certo tempo eu resolvi e fiz com carregamento no botão e não quando carrega a página, pois não sabia antes de ver o vídeo. Mas, nesse segundo exercício eu me estressei demais. Ai parei, fui fazer outra coisa e só voltei no outro dia. Ai mesmo assim nao tava conseguindo kkk ae resolvi parar e assistir o vídeo. Ai veio a Surpressa, tem tanta coisa nova para resolver esse exercicio que nem vimos durante o curso. Ai fiquei aliviado kkkk . Negócio é não desistir nunca!, mas perdi bastante tempo nesse exercício deu até um pouco de arrependimento
@@leonardocamargo5412 Você faz os exercicios olhando (Copiando) ou você faz ser olhar ?
@@neto__2502 Primeiramente eu faço o raciocinio lógico e monto o esquema mentalmente, depois vou desenvolvendo e sempre que surgir alguma dúvida de comando, eu vejo se tenho o comando em outro exercicio que eu fiz. Ai no final eu consulto a resolução do vídeo. Sou novo em programação, Javascript é minha segunda linguagem - Estudei uns 4 meses de c#, mas faz uns 2 anos, lembro quase nada, apenas o básico e a lógica de programação.
como tem gente que acha que essas aulas de exercicios nao são importantes???? é um SUPER complemento dos estudos
Pra quem ta dando erro na imagem quando tenta testar, uma dica: coloquem a imagem na mesma pasta do JS, pra mim assim funcionou, valeu pelo conteúdo Guanabara!!!
O Gustavo tem que ganhar um premio de educador do ano essa didática deveria ser um modelo a seguir... Parabéns, tu tem o dom!
GANHOU!!
Esse exercício me deu um nó na cabeça 🤯
Ele saiu tacando vários códigos eu fiquei perdido kkk vou praticar antes de prosseguir
Se a imagem não ficar embaixo da ultima frase, centralizada, façam isso.
Na JS
var img = document.createElement("img")
img.setAttribute("id", "photo")
Na CSS3
img#photo {
display: block;
margin: auto;
padding: 10px;
} // #photo aqui é o id que eu coloquei pra identificar a imagem.
assim vai ficar centralizado e com padding.
eu coloquei a tag nesse trecho.
res.innerHTML = `Detectamos ${genero} com ${idade} anos.`
não tava conseguindo arrumar minha imagem, ajudou mto, vlw
@ Muito bom, funcionou!
Obrigado!
Sabe explicar o motivo que levou a esse problema?
meu codigo não da erro, as imagens estão na pasta do modelo certo... e mesmo assim as imagens não carregam, alguem pode dar uma luz, vou tentar resolver sozinho... mas se algum abençoado quiser me ajudar ficaria agradecido, se não tentarei carregar as imagens pelo css;
vou deixar meu codigo aqui que fui fazendo de acordo com a aula.
function verificar() {
var data = new Date()
var ano = data.getFullYear()
var fano = document.getElementById('txtano')
var res = document.querySelector('div#res')
if(fano.value.length == 0 || fano.value > ano){
window.alert('[ERRO] Verifique os dados e tente novamente')
} else {
var fsex = document.getElementsByName('radsex')
var idade = ano - Number(fano.value)
var gênero = ""
var img = document.createElement('img')
img.setAttribute('id', 'foto')
if (fsex[0].checked){
gênero = 'Homem'
if(idade >=0 && idade < 10) {
//Criança
img.setAttribute("src", "foto-bebe-m.png")
} else if (idade >= 10 && idade < 21) {
// Jovem
img.setAttribute("scr", "foto-jovem-m.png")
} else if (idade < 50){
// adulto
img.setAttribute("scr", "foto-adulto-m.png")
}else {
//Idoso
img.setAttribute("scr", "foto.idoso-m.png")
}
} else if (fsex[1].checked) {
gênero = 'Mulher'
if(idade >= 0 && idade < 10) {
//Criança
} else if (idade >= 10 && idade < 21) {
// Jovem
} else if (idade < 50){
// adulto
}else {
//Idoso
}
}
res.style.textAlign = 'center'
res.appendChild(img)
res.innerHTML = `Detectamos ${gênero} com ${idade} anos.`
}
}
Com as aulas eu aprendi a LER o código como se estivesse lendo um livro, com os exercicios estou aprendendo a realmente a programar... Pra galera que ta começando agora, façam tudo e complementem pesquisando no YT: Desenvolvendo Calculadora com JS + HTML + CSS, Desenvolvendo site com JS etc... Existem diversos videos que você pode assistir e ao mesmo tempo ir copiando, isso ajuda MUITO!
Oi mano, pode me ajudar? Tô iniciando agr e eu tô fazendo os exercícios e vendo o vídeo ao mesmo tempo, porq é tudo novo p mim, aprender dessa forma é bom?
@@Ryan-rz9of Olá mano, blz ? Sim, ótima forma de aprender. Persista e tenha consistencia, faça todo dia um pouco, que seja 30 minutos, logo estará avançado.
@@CaioLemos-96 valeu mano!
sensacional, esse formato ficou excelente, verdadeira obra prima, eu fiz bem devagar ,anotando , mexendo e remexendo no código, valeu todo semestre de javascript da faculdade. Obrigado, Deus lhe abençoe.
Prof. Jota silva Amém!
Pronto , consegui fazer o exercicio por conta própria sem olhar o video . Fiz bastante anotações dentro do Visual Studio Code e Uso meu notion pra anotar e colocar imagens . Acho que estou pronto pra ir para a próxima etapa porque quando eu olho pro projeto , consigo diferenciar as árvores da floresta em si . Isso é um sinal que eu organizo minhas idéias e vejo os detalhes . Vlw!
Pra quem está com problemas quando ao carregar a imagem a mesma aparece na mesma linha que a do resultado, colocar uma tag dentro da mensagem do res vai resolver.
Valeu janaina, estava a um tempão tentando resolver isso, minha imagem ficava justamente do lado da frase. Você me ajudou bastante!!
Muito obrigada msmo Janaina. Ajudou demais!!!
Boa e ainda inclui um img.style.padding = '20px'
quebrando a cabeça pq nao tenho e não sei mexer em editores de imagem (canvas, photoshop etc)
até que pelas aulas consegui chamar pelo Js e ficou assim
img.style.cssText =
"width: 250px; height: 250px; border-radius: 50%; padding-top:10px"
ótimas aulas, sempre vejo pra me lembrar
Pra quem não conseguiu fazer as imagens das pessoas com diferentes idades, ao invés de colocar o nome da foto entre 'aspas simples, coloque entre "aspas duplas"
funcionou aqui comigo - estava há horas tentando resolver
nem assim o meu está aparecendo a imagem, aff!
Então nem no meu... no outro exercicio também, foi uma dificuldade pra fazer a imagem aparecer certinho, se alguem souber da um salve ai@@pdzaum
chama logo a classe e metodo junto fessor: var ano_atual = new Date().getFullYear().
Funcionou suave aqui kkkkk
Tive que usar um entre a imagem e o texto 0ara funcionar estavam ficando lado a lado.
professor que aula fantastica, estou começando a gostar de javascript, parabéns.
cara! Aprendir pra caralho sobre JavaScript até aqui sinto orgulho deste canal fodastico... E vou continuar aprendendo a fora, Valeu guanabara vc salvou minha vida por da essa iniciativa.
Eu não consegui resolver totalmente o exercício mas estou feliz por ter tentado. Estou estudando e aprendendo com os vídeos do canal e vou continuar me esforçando!
Nao desista, sempre quando der erro vai em inspecionar no chrome q la vc corrigi tudo certim
@@Stormstay Tem razão, vou fazer isso obrigada.
Guanabara falou que ia fazer e fez, ensinou muita coisa só com os exercicios!!!
Ele é o melhor de todos
Vc é um professor incrível , e pd ter certeza q vc faz muitas e muitas pessoas não desistirem da programação
Estou vendo esse curso em 2024, usando ele como um material complementar ao curso de Web Moderno que estou fazendo. Gosto muito da sua didática Guanabara, antes eu estava com dificuldade em pegar do JS, mas agora eu estou conseguindo fluir nos meus estudos. Acrescentei uma condição que identifica/determina a geração a qual o usuário pertence com base no ano informado pelo mesmo.
Seria interessante se tivesse uma lista de pequenos projetos para ser desenvolvido como desafio, sem resolução!
crie os seus mesmo, tipo uma calculadora, jogo da velha, etc... ajuda muito
Projetos
- Calculadora Básica (campos separados)
- Calculadora Intermediária (1 campo)
- Calculadora Avançada (equações)
- Verificar se é humano (através de conta matemática)
- Verificar se é maior de idade (pela data de nascimento)
- Listar arquivos e navegar pastas
- Jogo da velha
- "Sistema operacional" no navegador
- Calculadora de troco
- Conversor de moedas
- Display digital de números
- Verificar ganhou/perdeu em jogo de moeda
- Placar de jogo de futebol
- Script para dar unfollow em usuários do instagram que não te seguem
- Mostrar um deck de cartas
- Jogo batalha naval
- Jogo da forca
- Script que você dá uma frase e ele cria vários .txt com uma palavra em cada
- Verificador de Plágio (Usando o Google com aspas)
- Pedra, papel e tesoura contra a máquina
- Pedra, papel e tesoura online
- Livro de contatos
- Conversor de número romano em inteiro
- Script que lista o número de dias em cada mês
- Jogo de luta intercalada (um golpe por vez, dano aleatório)
- Mostrar profissão aleatória
- Distância entre duas posições geográficas
- Usuário insere vários números e mostra a média
- Simulador de dado
- Mostrar a temperatura atual em X localização (pegando de algum webservice)
- Tela de compras de supermercado
- Contagem Regressiva
- Jogo de blackjack (21)
- Calculadora de tijolos necessários
- Validador de cartão de crédito (pesquisar como cartões de crédito funcionam)
- Nome dos números (mil duzentos e trinta e três)
- Reordenador de lista
- Inverter a string
- Gerador de feed RSS baseado em banco de dados
- Área de comentários
- Testador de expressões regulares
- Pegar localização pelo IP ( ipinfo.io/0.0.0.0/json )
- Sistema de consulta para médicos
- Sistema de conta bancária
- Galeria de imagens (com categorias)
- Criador de thumbnail
- Page Scraper (entra em um site e salva todos os links, sem duplicar)
- Sistema de gerenciamento de conteúdo (opcional: modular)
- Forum
- Sistema de Captcha
- Gerador de PDF
- Ferramenta de SQL Remoto
- Gerenciador de orçamento pessoal
- Slideshow
- Portal de Notícias
@@AlexMoreira caralho, ai sim
@@AlexMoreira Depois vou tentar fazer algum desses 'projetos'... Obrigado. ;D
@@geanhorst1252 Quando é bom.... Não é mesmo?
Professor, muito obrigado por fazer esse trabalho incrível, consegui construir a aplicação sem ver o vídeo, apenas com os conhecimentos das aulas, sou muito grato, obviamente meu código ficou diferente mas o resultado deu certo, obrigado professor !!
Professor Guanabara, muito obrigado por tudo! Seus cursos estão me ajudando muito com essa nova carreira de programador!
cgrt
único professor do mundo que consegue tornar fácil um tema complicado!!! Professor Fantástico!!!
passei 10 horas nessa aula, o codigo funcionava mais a imgs davam erro, entao fiquei ate conseguir, o domingo foi produtivo!
minhas imagens também não tão indo, alguma dica?
@@gabrafo As minha também não estavam. Elas precisam está na mesma pasta.
Segui a aula certinho e funcionou tudo perfeitamente, fiquei muito orgulhoso. Obrigado pela ótima aula!
Estou fazendo hj esse exercício e minhas imagens não aparecem , já apaguei tudo e refiz duas vezes e mesmo assim não funciona, já quebrei a cabeça pra descobrir meu erro e não achei , estou super chateada com isso
ao invés de fazer 2 cadeias de ifs e elses (pra homem e mulher), eu separei as imagens em 2 pastas e fiz da seguinte forma:
if(fgen[0].checked) genero = 'homem';
else genero = 'mulher';
if(idade
Boa sacada.
Brabao.
show gostei
sabe me dizer porque o .checked não esta executando na hora de verificar?
@@eu.tavinhu manda o pedaço do código
Comecei esse curso aqui depois de terminar os 4 módulos de HTML5 e CSS3, e consegui fazer o exercício sozinho e de uma forma diferente da que o Guanabara fez nesse vídeo, a todos que estiverem com muita dificuldade de entender esse curso de JS por causa do HTML e CSS, recomendo fortemente que façam primeiro o curso de html e css que o professor disponibiliza aqui no canal.
Demorou quanto tempo no curso de html e css?
@@nikinmsn Cara eu fazia 1 módulo por mês, isso estudando quase todos os dias e elaborando minhas próprias práticas, e clonando a aparência de alguns sites p praticar, então foi algo em torno de 4 meses.
@@nikinmsn Demora uns 3 - 5 meses :)
Condição para atribuir o gênero com o operador ternário:
var genero = sexo[0].checked ? 'Masculino':'Femenino'
Parabéns !
Excelente, aprendi ternário de tanto usar no Flutter :)
muito bom!
Tambem pode ser boa ideia
@@paulocharles7090 Valeu Cara!
Eu fiz sozinho todo o exercício, deu tudo certo, depois assisti o vídeo corrigindo e melhorando baseando nesse vídeo e aplicando conceitos e comandos novos que introduziu nesse vídeo
Caraca esse exercício foi muito show! Me deu várias idéias parecidas pra eu ir treinando. Valeu Guanabara!
Eu fiz esse exercício a um tempo atrás e segui a resolução, agora eu consegui reescrever o código usando funções e alguns comandos diferentes, fiquei feliz em conseguir "criar" outra solução
Caramba... show. Para quem nunca fez nenhuma programação na vida (tipo eu \o/) é trabalhoso chegar até o fim da aula.... kkkk
Mesclando trabalho com estes estudos eu levei , tipo.... 2 dias kkkkk
Consegui fazer tudo funcionar agora e acho que preciso de uns 30 minutos de cama para ver se o tico e o teco voltam ao normal!
Qualquer problema com o alinhamento da imagem e do texto, é só colocar o trecho em uma tag P:
res.innerHTML = `Detectamos: ${genero} de ${idade} anos.`
Eu tava maluco porque não entendia o motivo de estar tudo em desordem. Obrigado. Ajudou demais.
tava 1h tentando arrumar, vi todos os codigos e nada! salvou irmao, parabéns!
MUITO OBRIGADO, eu não conseguia descobrir como resolver de jeito nenhum.
Salvo hein, salvo demais
Salvou demais cara, e me fez entender que isso estava acontecendo por causa do tamanho da fonte da section. Se você colocar a fonte maior também funciona, pq não dá pra colocar o texto e a imagem lado a lado se a fonte estiver maior.
família não sei se nos comentários alguém já falou, mas fica muito mais fácil se você criar variáveis para as Strings que precisa converter pra number
por exemplo
var fano = document.getElementById('txtano')
var anos = Number(fano.value)
if(anos == 0 || anos > ano){
window.alert('erro'
}
desse jeito, isso evita ter que ficar pondo a variavel e o ".value" toda hora é só por a nova variável no lugar, fiz assim e visualmente ficou melhor o código
Me perdi! Depois me encontrei. Se perder o foco um segundo uma letra Maiúscula demora meia hora pra ser achada!
Tu é fera, Guanabara!
Se garante muito! Obrigado por compartilhar!
ta foda viu, nada roda de primeira, cada testada leva meia hora pra achar o erro
Gustavo, quero agradecer porque já assistindo até aqui consegui fazer um site que mostra de acordo com a lei do motorista, quantas horas seriam necessárias, sendo horas normais e horas extras segregadas, conseguindo até mesmo saber o custo do profissional por viagem! Muito obrigado!
Parabéns, equipe do Curso em Vídeo!
Excelente conteúdo do curso de JavaScript.
Muito obrigado!
Até consegui fazer, porém não sabia sobre o "setAtributo". Aí fiz uma tag no html, deixei como "display none". Quando acionado, "display inline" (no script). Aí deu certo... hehehe... Tô gostando muito de fazer estes exercícios. Muito obrigado!
Para quem não tem photoshop e quiser colocar a imagem como um circulo via css é só fazer o seguinte:
#foto{ width: 200px; height: 200px; border-radius: 100px;} lembrando que a largura e altura devem ser iguais e para borda ficar redonda, é só colocar no border-radius a metade da largura e da altura.
tem sites que deixam redonda e diminui o tamanho , mas esse metodo é uma boa para ganhar mais conhecimento
Muito obrigado, salvou minha pele, tinha imagens redondas, faltava apenas o tamanho mesmo, nem me lembrei de colocar em CSS
pra falar bem a verdade eu estava desanimado ate começar a treinar com os exercícios, agora que eu consegui acompanhar, estou confiante que irie conseguir aprender a programar um dia
Boa noite, eu fiz uma alteração na função(variável gênero), a função informa se é uma criança, jovem, adulto ou idoso e também arrumei as imagens dentro de uma pasta ao invés de deixar elas soltas na raiz junto com os arquivos html, js e css.
function verificar(){
var data = new Date()
var ano = data.getFullYear()
var fano = document.getElementById('txtano')
var res = document.querySelector('div#res')
if (fano.value.length == 0 || fano.value > ano) {
window.alert('[ERRO] Verifique os dados e tente novamente')
} else{
var fsex = document.getElementsByName('radsex')
var idade = ano - Number(fano.value)
// res.innerHTML = `Idade calculada: ${idade}`
var genero = ''
var img = document.createElement('img')
if(fsex[0].checked) {
//genero = 'Homem'
if (idade >=0 && idade < 10) {
// criança
img.setAttribute('src','img/crianca-H.jpg')
genero = 'uma criança'
} else if (idade < 21) {
// jovem
img.setAttribute('src', 'img/jovem-H.jpg')
genero = 'um jovem'
} else if (idade < 50){
// adulto
img.setAttribute('src','img/adulto-H.jpg')
genero = 'um adulto'
} else {
// idoso
img.setAttribute('src','img/idoso-H.jpg')
genero = 'um idoso'
}
} else if (fsex[1].checked) {
//genero = 'Mulher'
if (idade >=0 && idade < 10) {
// criança
img.setAttribute('src','img/crianca-M.jpg')
genero = 'uma criança'
} else if (idade < 21) {
// jovem
img.setAttribute('src','img/jovem-M.jpg')
genero = 'uma jovem'
} else if (idade < 50){
// adulto
img.setAttribute('src','img/adulto-M.jpg')
genero = 'uma adulta'
} else {
// idoso
img.setAttribute('src','img/idoso-M.jpg')
genero = 'uma idosa'
}
}
res.style.textAlign = 'center'
res.innerHTML = `Detectamos ${genero} com ${idade} anos`
res.appendChild(img)
}
}
esses exercícios valem ouro. Me ajudaram a solucionar o problema de como "pegar" a opção selecionada no radio e baseada nela colocar um select option personalizado
Guanabara, você é show de bola. Parabéns pelo belo e útil trabalho 👏🏻👏🏻👏🏻👏🏻🙏🏻🙏🏻👊🏾👊🏾
topppp! Só um toque pra quem está começando assim como eu, var funciona fora do escopo podendo causar bugs inesperados, usem let se a variável for mudar, ou const se for uma variável fixa!
ótimo curso, sempre seguindo os conselhos de Guanabara, exercitar e descansar, nada de maratonar com a cabeça e o corpo cansado, adorando o curso. Logo que terminar já estarei iniciando o de html e depois o de css, aos poucos se vai ao longe. Obrigada!
SURTANDO MAS CONTINUANDO...
O programa final da vide-aula reconhecia pessoas com mais de 170 anos...
acrescentei essa condição:
if (Number(fano.value.length) == 0 || Number(fano.value) > ano) {
window.alert('Verifique os dados e tente novamente!')
} else if (Number(fano.value) < 1850) { \\ ACRESCENTEI ESSA CONDIÇÃO
window.alert('Verifique os dados e tente novamente!')
}
ÓTIMA AULA :)
Muito obriigado!
Poderia ter colocado essa condição no primeiro if, desse jeito vc ta criando outro if com o mesmo resultado sem necessidade, e também no javascript você pode testar numeros em strings normalmente, sem precisar transformar com Number().
if (fano.value.length == 0 || fano.value > ano || fano.value < 1850) {
window.alert('Verifique os dados e tente novamente!')
}
Quem quiser um efeito diferente na section do exercício anterior, é só brincar com a propriedade border-radius, por exemplo: border-radius: 60px 45px 30px 15px/15px 30px 45px 60px;
Aprendi demais nesses dois exercícios, prof!! Valeu demais!
Galera, pra quem não tem Photoshop e gostaria de tentar usando códigos pelo css, tenho uma sugestão!
img {
padding-top: 15px;
width: 250px;
height: 250px;
border-radius: 50%;
object-fit: cover;
object-position: center 55%;
}
object-position: center 55%;
Muito bom prof. Guanabara!!! E obrigado pelos conselhos!! To seguindo!!!
21:49 Sobre esses alunos que não acham importante praticar(nem gostam), acho engraçado, pois sempre gostei mais da prática do que aulas, testar comandos errar "até dar uma dor". E cada vez mais vejo a importância da prática. Toda vez que o Guanabara diz isso na aula, penso assim e tive que expor esse pensamento XD.
Do nada veio um insight para meu nicho de viagens, acho que vai gerar muitos LEADS HAHAHAHAH pqp obrigado pelo conhecimento oferecido, sinto que a cada aula surge ideias e pensamentos que pode transformar para melhor o meu trabalho e aliás iniciei faculdade de analise e desenvolvimento devido a esse curso, somente gratidão Guanabara e todos envolvidos nesse belo trabalho!
graças a Deus pai funcionou tudo de primeira, RECEBA!!
8:30 "Full Year é porque ele vai pegar com 4 dígitos. No momento que estou gravando esse vídeo é 2019" imagina o pessoal do ano 12127 vendo o vídeo
Esse ano nem deve existir mais youtube kkkk
Se a humanidade ainda existir, provavelmente a inteligência artificial vai ter dominado todo o planeta.
não vai existir mais a humanidade, pode confiar em mim
Nem existe mais js asuhasuhusa mesmo que ainda haja humanidade, eles inventam outra tecnologia
Acho que não vai haver a humanidade até lá KKKKKK
Neo vai assistir e dar risada dele.
para quem não tem photoshop para as imagens; no CSS coloque:
img {
border-radius: 50%;
width: 150px;
height: 150px;
object-fit: cover
}
Se houverem muitas imagens, pra não ter que fazer vários ifs, pode-se fazer:
function verificar(){
var data = new Date()
var ano = data.getFullYear()
var fano = document.getElementById('txtano')
var res = document.querySelector('div#res')
if(fano.value.length == 0 || Number(fano.value) > ano) {
window.alert('[Erro] Verifique os dados e tente novamente')
} else {
var fsex = document.getElementsByName('radsex')
var idade = ano - Number(fano.value)
var genero = ''
var img = document.createElement('img')
var fasevida = ' '
img.setAttribute('id', 'foto')
if(fsex[0].checked){
genero = 'Homem'
} else if (fsex[1].checked){
genero = 'Mulher'
}
if(idade >= 0 && idade < 10){
fasevida = 'crianca'
} else if (idade >= 10 && idade < 21){
fasevida = 'jovem'
} else if (idade >= 21 && idade < 50){
fasevida = 'adulto'
} else {
fasevida = 'idoso'
}
var foto_res = `foto_${fasevida}_${genero.toLowerCase()}.png`
img.setAttribute('src', foto_res)
res.style.textAlign = 'center'
res.innerHTML = `Detectamos ${genero} com ${idade} anos.`
res.appendChild(img)
}
}
___________________________________________________________________________________________
nome das imagens:
foto_adulto_homem.png
foto_adulto_mulher.png
foto_crianca_homem.png
foto_crianca_mulher.png
foto_idoso_mulher.png
foto_idoso_homem.png
foto_jovem_homem.png
foto_jovem_mulher.png
Genial mano 👏
Muito bom e resolveu meu problema !!!!
se maluco, genial... parabéns irmão
nao intendi aonde coloco as imagens kk
valeu pela ideia, nunca ia pensar nissokksksks
Funcionou! Fiz direitinho, com calma.
Para quem está com o problema com o checked no Js: tenta colocar o .checked direto na variável onde está o input:radio
-- HTML:
Sexo:
Masculino
Feminino
-- JS:
var genero_masculino = document.getElementById('masculino')
var genero_feminino = document.getElementById('feminino')
if (genero_masculino.checked) {
var genero = 'Homem'
} else if (genero_feminino.checked) {
var genero = 'Mulher'
}
Valeu, mano. Tu é brabo!
resolveu, mas queria saber o porquê desse problema
Me salvou amigo, mas tb queria saber pq não funcionou no nosso e no do Guanabara sim
salvoou demaiss maninhoo
@@fabianomarques853 Use getElementByName e não getElementByTagName.
Estou adorando esses cursos. Tou aprendendo mto, nesse exercicios eu até mudei a forma que aparece. o JS detecta qnd é Criança, Adolescente, Jovem, Adulto e Idoso ^^
Pessoal não edite a foto pelo CSS não !
num futuro, quando for alocar o site em um servidor, vocês vão carregar a imagem com tamanho muito maior do que vocês vão usar no site.
EXEMPLO:
Carrega no servidor uma imagem de 1280x650
mas na hora de jogar no site vocês usam apenas 250x250..
estão gastando memória do server atoa, estão pagando por isso, no mais quando mais código estiver no seu css mais pesado seu site ficará... sendo assim evita redimensionar imagens no CSS.
O professor Guanabara falou sobre isso no curso de HTML5
Eu corto a foto e redimensiono no GIMP
@@zaqueubatista2786 Você sabe usar GIMP? Me ensina?
up
@@carlosantonio6112 procura no yt cara
Esse ai foi daora de fazer, adoro a sensação de ir codando e no final ter aquele código, "organizado", GRANDE, IMPONENTE, fico rodando a tela só para olhar para o código pq acho legal kkkkkkkk, OBG guanabara s2, já aprendi python, html, css e agr Js
Passei um dia inteiro tentado fazer esse exercicio sem pegar cola aqui no video mas nao consegui kkkkkkk. Mas sinto que estou aprendendo, isso é ótimo. Muito obrigado, Guanabara e toda a equipe do Curso em Vídeo =)
Não existe isso de "pegar cola". Você tenta fazer, e caso não tenha conseguido, você confere o seu código com o código certo, e descobre em qual ponto você errou, aprendendo assim a fazer do jeito certo. Quem te falou que você não pode pedir ajuda é orgulhoso e está errado. Humildade faz bem para o aprendizado e também para a vida.
Professor Guanabara é tem um jeito especial de ensinar. Estou aprendendo muito. Um abraço.
Otimo vídeo, ótimo curso, meus parabéns, mas você poderia ter colocado essas imagens pra gente poder baixar né? Pouparia tempo eu acho!!!
hoje ja tem o pessoal ajudando kkk
Assisti primeiro os 3 videos de exercícios, para acompanhar a linha de raciocínio. Amanhã vou pegar para fazer.
Agora terminei!!
Fiz o meu sozinho também, acho q só tive dificuldades pra pegar o conteúdo do radio e tive que ver essa parte do vídeo, meu código ficou todo estranho, mas deu certo. :)
Só eu passo umas 2 horas vendo uma aula de 20 minutos?
Não mano kkkkk, ta foda.... pior é quando invento de tentar resolver td sozinho
Estou tão feliz consegui fazer esse exercício Uhuullll booora
Pessoal, pra quem não tem Photoshop e quer deixar redondinha a foto... eu editei no css
img{
border-radius: 50%;
}
não vai ficar com centralização da imagem perfeita dependendo da foto mas é uma alternativa.
Para deixar centralizada, como se estivesse feito no Photoshop, eu fiz uma gambiarra no CSS e ficou igualzinho... Segue:
img {
width: 300px;
border-radius: 150px;
margin-top: 10px;
margin-left: 20px;
heigth: 300px;
}
Obs: baixei as imagens com os tamanhos originais dos sites.
Faz o teste aí e me fala se deu certo. 😊
@@roguerodrigo gente, pra centralizar imagem sem perder resolução é só usar object-fit: cover no css
Gracias
Eu uso o gimp, que é gratuito
vídeo incrível, junto da galera dos comentários ajudaram de mais
Eu fiz um poquiiinho diferente kk, ao invez de colocar pessoas normais eu coloquei AGIOTAS, não que agiota não seja pessoa mas enfim, coloquei o chris agiota como o jovem, o alek agiota como o adulto, o jacquin agiota como o veio e o goku bebe agiota, como não tinha agiotas mulheres eu coloquei o macaco agiota. Por mais mulheres agiota nesse mundo kkkk, ficou mt engraçado hahuahu
Literalmente meu tipo de humor kkkkk
Otimo exercicio de coisas assim q eu preciso para melhor aprender!
Para deixar a imagem redonda e centralizada, como se estivesse feito no Photoshop, eu fiz uma gambiarra no CSS e ficou igualzinho... Segue:
img {
width: 300px;
border-radius: 150px;
margin-top: 10px;
margin-left: 20px;
heigth: 300px;
}
Obs: baixei as imagens com os tamanhos originais dos sites.
Faz o teste aí e me fala se deu certo. 😊
Caraca. Salvou! Já estava desistindo! hahahahaha
@@MrZezinhoo que bom que mesmo aprendendo, pude ajudar alguém!!
Salvou em, n sei pq caralhos n tava centralizada a foto
Muito obrigada, meu nobre! Ajudando devs iniciantes até hoje haushusa
A configuração por CSS é válida, contudo se vc não reduziu o tamanho das imagens em algum programa, deixaria seu site lento. Então, mesmo que queira configurar por CSS, seria interessante reduzir o tamanho com um programa
Eu tentei fazer a parte do se senão sem olhar a resposta e eu apanhei feio, pq de alguma forma que eu não entendi, as chaves estavam erradas, ai nunca dava certo. Mas no final consegui compreender muito bem. Eu penso que não tem problema olhar a resposta, mas sim apenas copiar o código sem realmente te-lô compreendido. E graças a didática do Guanabara, hoje eu sou capaz de explicar o pq cada código desse exercício, é do jeito que é. Obrigado Curso em Vídeo, obrigado Professor Guanabara ❤
Man@, faz os exercícios!! eu fiquei 1h. batendo cabeça olhando meu código pra achar o erro, e olhava o meu e o do Guanabara e pensava: essa po##4 ta igual pq não funciona??
adivinha. um ' T ' que faltou o setAttibute( ' ' ) kkkkk
o curso e ótimo, obrigado Google e professor Guanabara.
Pra tu ver como nós errados kkkkkk ta faltando o 'r' ali no setAttribute(' ')
Muito legal, seu pra brincar bem nesse exercício!
Tempo da aula: 25 min
Tempo que eu levo pra assistir uma aula e fazer os exercícios junto: 2/ 2.5 horas
Kkkkk
Tô rindo, mas eh de nervoso....
kkkkkk tmj
comecei 7 horas caras to terminando 11:13 kkkkkkkkkkkk
kkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkk
vdd
cada testada no código vai meia hora procurando o erro... ta foda
Esse é o melhor professor do mundo!
SCRIPT AQUI
ATENÇÃO, FAÇA O SEU, USE ESSE APENAS EM CASO DE EMERGÊNCIA PARA TIRAR DÚVIDAS, DIGITE O SEU (há divergências de ids com o da aula)
function verificar() {
var data = new Date()
var ano = data.getFullYear()
var anoN = document.getElementById('txtano')
var anoNasc = anoN.value
var res = document.querySelector('div#res')
if (anoNasc ano) {
res.innerHTML = "Dados incorretos, revise-os!"
alert('Dados incorretos, revise-os!')
} else {
var sexo = document.getElementsByName('radsexo')
var idade = ano - anoNasc
var genero = ""
var img = document.createElement('img')
img.setAttribute('id', 'foto')
if (sexo[0].checked) {
genero = "Masculino"
if (idade < 10) {
img.setAttribute('src', 'kid-boy.png')
} else if (idade < 20) {
img.setAttribute('src', '_imagens/boy.png')
} else if (idade < 60) {
img.setAttribute('src', '_imagens/man.png')
} else {
img.setAttribute('src', '_imagens/old-man.png')
}
} else {
genero = "feminino"
if (idade < 10) {
img.setAttribute('src', '_imagens/kid-girl.png')
} else if (idade < 20) {
img.setAttribute('src', '_imagens/girl.png')
} else if (idade < 60) {
img.setAttribute('src', '_imagens/woman.png')
} else {
img.setAttribute('src', '_imagens/old-woman.png')
}
}
res.innerHTML = `A idade da pessoa foi ${idade} anos e o gênero ${genero}.`
img.style.padding = '10px'
res.appendChild(img)
}
//nada de pegar e colar espertinho ;)
}
Vlw amigo.
Obrigado!
O projeto do professor não consegui - e agora tentei o inicio do seu - e tb não vai - creio que houve alguma mudança nas regras.
Não estava conseguindo selecionar o input radio como ele fez, ai fiz assim e funcionou:
var radius = document.querySelectorAll("input[type='radio']")
var gen = ' '
if (radius[0].checked){
gen = 'Masculino'
} else {
gen = 'Feminino'
}
valew mano
sabe me dizer o pq o do Guanabara funcionou?
obrigado ajudou muito
@@andrejunior6991 Também gostaria de saber. O comentário do cara me salvou kkk
Olá amigo... estou perdido! Onde vc colocou o codigo???
Guanabara, muito obrigado por esse curso, bastante agregador e didático, TOP demais!!!!!!!
SCRIPT PRA QUEM NÃO QUER USAR POTOSHOP(pode usar foto inteira com isso), tente compreender é facil!!
troque apenas o caminho das minhas fotos, para o caminho da suas fotos!!
OBS: eu poderia arrumar essa parte das fotos no css, mas resolvi fazer ali no JS para praticar, por isso o código ficou um pouco mais extenso.
function verificar() {
var data = new Date()
var ano = data.getFullYear()
var fano = document.getElementById('txtano')
var res = document.getElementById('res')
if (fano.value.length == 0 || fano.value > ano) {
window.alert('[ERRO] Verifique os dados e tente novamente!!')
} else {
var fsex = document.getElementsByName('radsex')
var idade = ano - Number(fano.value)
var genero = ''
var img = document.createElement('img')
img.setAttribute('id', 'foto')
if (fsex[0].checked) {
genero = 'Homem'
if (idade >= 0 && idade < 10) {
//criança
img.setAttribute('src', 'media/garotinho.jpg')
img.style.width = '250px'
img.style.height = '250px'
img.style.borderRadius = '125px'
img.style.margin = '8px'
} else if (idade < 21) {
//jovem
img.setAttribute('src', 'media/jovemhomem.jpg')
img.style.width = '250px'
img.style.height = '250px'
img.style.borderRadius = '125px'
img.style.margin = '8px'
} else if(idade < 50) {
//adulto
img.setAttribute('src', 'media/adulto.jpg')
img.style.width = '250px'
img.style.height = '250px'
img.style.borderRadius = '125px'
img.style.margin = '8px'
} else {
//idoso
img.setAttribute('src', 'media/idosohomem.jpg')
img.style.width = '250px'
img.style.height = '250px'
img.style.borderRadius = '125px'
img.style.margin = '8px'
}
} else if (fsex[1].checked) {
genero = 'Mulher'
if (idade >= 0 && idade
Eu coloquei as características da '' img '' junto com o primeiro comando '' else '' declarado. Sabe se tem algum problema? Testando no exercício, não apresentou nenhuma falha mas vai q não é aconselhável fazer desse meu jeito...
function verificar(){
var data = new Date()
var ano = data.getFullYear() //full year é pq vai pegar com 4 digitos
var formano = document.querySelector('input#cxtextoano')
var res = document.querySelector('div#res')
if (formano.value.length == 0 || Number(formano.value) > ano){
window.alert('Verifique o ano e tente novamente!')
}else{
var fsex = document.getElementsByName('radsex')
var idade = ano - Number(formano.value)
var genero = ' '
var img = document.createElement('img')
img.setAttribute('id' , 'foto')
img.style.width = '250px'
img.style.height = '250px'
img.style.borderRadius = '125px'
img.style.margin = '8px'
if (fsex[0].checked){
.
.
.
Ajudou muito! Obrigada!
é mais fácil setar todas as imagens uma única vez no css. '-'
img{
border-radius: 50%;
padding: 15px;
width: 250px;
height: 250px;
}
Só pra dar interatividade. E dizer que o curso é ótimo
08/07/2020 - não sei porque a condição que copiei da aula não funcionou, não dava nem erro ''direto'', no debug no site eu via mensagem de erro escrito que não estava lendo o valor ''value'' dentro da expressão, mas resolvir da seguinte forma ;
if (fano.value == length || Number (fano.value) > ano )
estranhamente isso funcionou e a expressão que o coloquei seguindo o video não, se alguém souber o por que agradeceria muito se comentasse aqui !! desde já agradeço !
Nenhumas dessas formas estão indo pra mim. E agora ?
Tive o mesmo problema, tentei da sua maneira e deu certo! valeu!
Estou com o mesmo problema.
Com ambas expressões o alerta não é acionado.
Quem puder dar um help, valeu.
Deu certo com este processo! Valeu
Não sei o porquê, mas a imagem aqui ficava ao lado do texto. Tive de colocar um após o texto especificando o sexo e idade da pessoa.
Você pode usar .innerHTML e adicionar esse texto como patagrafo
res.style.textAlign = 'center'
res.innerHTML = `Detectamos ${gênero} com ${idade} anos.`
res.appendChild(img)
@@MarceloDiasSchneider Faz como eu, coloca um entre o texto e a imagem kkk Caso encontre uma solução melhor, manda a resposta aí.
Talvez o ideal seria criar outro ou uma tag específica para a imagem, aí solucionaria o problema.
Quem aqui fez na primeira vez, deu erro, tentou achar o erro (longo tempo), não achou, refez tudo do zero e deu certo. E fica se perguntando onde foi que eu errei??!!
Programação brinca com a sua paciência e principalmente com a atenção.
To quase fazendo isso, já olhei e refiz partes está tudo idêntico ao do professor e nada de aparecer a imagem.
minhas imgs tbm não aparecem, bad vibes
acharam a solução guys? o meu também não aparece
@@Cyberlucws refaz
fiquei muito feliz de conseguir fazer esse exercício
Olá o/
Estou fazendo o curso agora e estou com um problema nesse exercício, parece que não é reconhecida o método .checked nas condições para verificar se foi marcado sex masc ou fem, alguém tbm teve esse problema e poderia me dá uma ajudinha? Tentei o mesmo usando operador ternário e nada.
Também deu a mesma coisa pra mim
Oi, eu resolvi da seguinte forma:
1. Alterei o nome
2. Mudei de var para Let
3. Para fazer um teste coloquei um window.alert para me certificar que eles estavam funcionando.
Espero ter ajudado (:
@@rafaelaoliveira8677 continua a msm coisa , acho que esse comanda nao esta mais em uso
@@allantavares2535 no meu tava dando isso, mas eu percebi q eu quando eu criei a variavel "fsex" eu coloquei o seguinte comando:
var fsex = document.getElementById('radsex')
sendo o correto o:
var fsex = document.getElementsByName('radsex')
espero ter ajudado!
Achei bem interessante adicionar a função "onkeypress" é bem simples quem quiser usar, segue o código.
no html só ira mudar o button >>>
E no script.js adiciona esse codigo no final do codigo >>>>>
var input = document.getElementById("txtano");
input.addEventListener("keyup", function(event) {
if (event.keyCode === 13) {
event.preventDefault();
document.getElementById("enterKey").click();
}
});
Minha imagem não parece embaixo do "detectamos...' mas sim ao lado...não consigo achar o erro...alguem para ajudar?
o mesmo aqui. (edit: consegui arrumar essa parte colocando a largura da section em 400px mesmo, tinha colocado outro valor antes)
@@janaina68664 Disponibiliza seu estilos.css aqui pois o meu erro continua, agradeço.
to tendo esse mesmo problema...
@@miguelrangel707
Confere ai, pra ver se está igual.
body {
background: rgb(70, 142, 236);
font: normal 15pt Arial;
}
header {
color: white;
}
section {
background: white;
border-radius: 10px;
padding: 15px;
width: 500px;
margin:auto;
box-shadow: 3px 3px 7px rgb(0, 0, 0)
}
footer {
color: white;
text-align: center;
font-style: italic;
}
#res {
text-align: center;
}
@@thalitaleandra1652 Como a colega não respondeu segue o o estilo.css
/*--- Body ---*/
body {
font: normal 12pt Arial;
background-color: rgb(70, 142, 236);
}
/*--- Header ---*/
header {
color: white;
text-align: center;
}
/*--- Section ---*/
section {
background: white;
border-radius: 10px;
padding: 15px;
width: 400px;
margin: auto;
box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.37);
}
/*--- Div ---*/
div#anoNascimento {
font-size: 14pt;
}
/*--- Div ---*/
div#resposta {
text-align: center;
}
/*--- Footer ---*/
footer {
color: white;
text-align: center;
font-style: italic;
}