JavaScript Exercises (Part 2) - JavaScript Course
ฝัง
- เผยแพร่เมื่อ 4 ธ.ค. 2024
- Let's do some JavaScript exercises? The time has come to prove to yourself that all your effort is paying off here. When we learn and practice, we ask for our knowledge. So let's go! Do not skip this video and do all the proposed activities in JavaScript.
This video is an exercise but needs the support of the lesson. To access the full course of JavaScript and ECMAScript, go to • Curso Grátis de JavaSc...
Video Course
Be a supporter: cursoemvideo.co...
Website: www.cursoemvide...
TH-cam: / cursoemvideo
Facebook: / cursosemvideo
Twitter: / cursosemvideo
Twitter: / guanabara
Instagram: / cursoemvideo
Instagram: / gustavoguanabara
Sponsorship
Google: www.google.com
#CursoemVideo #JavaScript #EcmaScript #ModuleD #Exercise02
Pra quem não te Photoshop, pode fazer esse css:
img {
border-radius: 50%;
width: 150px;
height: 150px;
}
Em questão das cores, vocês podem usar a extensão ColorZilla.
obrigado voce ajudou mtt
vlww!!
muitoooo obg mesmo!!!!
Maravilhosa
Obrigadooooo
Outra dica pra que não tem photoshop, dá pra fazer no código mesmo:
EDIT: pra quem comentou que a imagem continua gigante e que é mais correto estilizar pelo CSS, tudo bem, concordo. Mas isso é uma resolução de exercício simples, não uma aplicação inteira que precisa ser escalável. :)
Excelente!
logo pode ficar pesado para web
Top.
@Raynard FKL , algum comando para diminuir o tamanho do arquivo direto no js?
show.
Mandou Bem Valeu
Hoje 05/03/2024 ... Galera tenho 61 anos de idade e nunca pensei ser Programador, mas aposentado comecei a mexer nesse trem, e com o Prof Gustavo Guanabara é show, explicação top, e deixa claro "" se vc errou dizendo eu fiz igualzinho a voce e nao rola, Você fez alguma coisa errada "" ... e não é que fiz mesmo kkkkkk mas consegui depois de tres dias assistindo e fazendo junto pra não perder nada ... show de bola ... Vlw Prof vcs são top D+ ... Agora so falta eu ser contratado kkkkk 😇
Verdade tem que prestar muita atenção e voltar e rever . Parabéns 👏 61 anos de idade e eu com 30 anos no mesmo barco ☝️☘️🙏
Pra quem ainda não conseguiu alterar a imagem nos IF eu consegui colocando um ID na tag deu certo
dois anos depois eu to aqui salvando meu tempo com essa dica, ja tava a 30 minutos preso nisso, valeu.
Finalmente consegui terminar esse exercício, dica de ouro LEIA OS COMENTÁRIOS e pesquise fora do curso tmb
No JS quando ele cria a variável "IMG" e coloca ela no "IF" como img.src =" ...", para mudar a foto ele ta utilizando a variável e não a tag IMG.
isso e um problema, deve ter muitos que estão pensando que aquilo era a TAG
mas não, era a variável.
ele devia ter utilizado outro nome.
no JS não precisa botar a tag, bota a variável e chama com src.
fiz assim:
var foto = document.getElementByiD('image")
...........
............
if (.............) {
img.src = " manha.npg"
}
e o img e var e não tag
deu certo quando botei
fotos.src= "manha.npg"
Obrigado!!!
menino tu foi um gênio agora hein kkk eu estava com esse mesmo problema e você ajudou, obrigadooo.
Sim estava com o mesmo problema, quebrando a cabeça, qdo troquei o nome da variavel deu certo vlw!
Queria ter lido esse comentário antes, kkkkk
Quebrei a cabeça tentando, mas enfim consegui \o/
Ele deve ter feito de propósito pra fazer a gente pensar. hahaha
uma coisa que não entendi, como a imagem mudou lá se ele não fez nenhum innerHTML com a imagem, sabe me responder?
Cara, como esse trio html + css e Js é extremamente poderoso.... Olha só as possibilidades que isso nos abre pra desenvolver coisas legais!
Na hora da mudança da imagem se atentem se vocês estão pegando o id certo no JS, pq tem um id na e um na em si! Tem que ser o id da tag :
Salvou! Valew
Cara, o que eu quebrei a cabeca ate tu me salvar nao ta escrito. Valeu pai vei.
Boa ! Valeu !
vlw mano salvou dms
Valeu mano, demorei uns minutos pra entender a lógica que voce pois, mas consegui. Deu certo aqui
Galera, pra quem não quiser abrir novamente o programa de edição de foto pra pegar a cor da imagem, dá pra fazer isso no próprio navegador e sem sair de dentro do seu exercício.
Aperte f12
vai em Elements
na direita deve ter alguma caixinha de cor igual a do VSCode, clica nela, vai abrir uma mini janela com as cores, e um conta gota. Clica nele. Viu que ficou ativado? Agora é só passar o mouse por cima da imagem e escolher a cor.
Embaixo do conta gota vai ter alguns números e duas setas, uma pra cima e outra pra baixo. Clica nelas até aparecer a "#" e você terá o mesmo código que teria no Photoshop. Agora é só colar no seu código e Voilá! ;)
Essa comunidade de programação e afins, namoral...namoral mesmo, so gente boa e disposta a ajudar, gosto muito de ver os comentarios de cada video, sempre tem alguem dando uma ajuda, falando uma motivação e coisas assim.
Pessoal tive a experiência de pagar um curso em HTML, CSS e JAVA SCRIPT e me arrepender por ter abandonado as aulas gratuitas de nosso professor Guanabara.
Graças a Deus o curso esta sempre disponivel e pude voltar de onde parei.
Super recomendo #CursoEmVideo #GustavoGuanabara.
A melhor parte de estudar JS é ver as coisas acontecerem enquanto prática, assim tem mais empolgação para estudar. Obrigado Guanabara você é um ser iluminado!!
Esse foi o melhor comentario. programar somente no codigo alem de a gente nao compreender pra que serve o codigo, fica muitas duvidas pra que sera utilizado.
queria deixar aqui um EU TE AMO pra toda equipe do curso em video, AMO VOCÊS!!!
Uma dica bacana:
colocar a mensagem "Hora do dia" dentro dos if/else if e else. Pois assim você consegue, por exemplo, colocar "Bom dia/Boa tarde/Ba noite! Agora são..."
E também utilizar uma Transition do css, que nada mais é que o tempo de transição de uma característica para outra.
No javascript fica assim:
document.body.style.transitionDuration = "2s"
sabia fazer transiton só em CSS, valeuzão minha altarquia
eu adicionei uma linha no código para que os minutos também possam aparecer
var minute = data.getMinutes()
e no msg complementei, ficando assim:
msg.innerHTML = `Agora são ${hora} horas e ${minute} minutos`
obrigado amiga ajudou muito aqui ficou muito melhor !!! acabei de fazer em segundos.
`agora são ${hora} horas e ${minute} minutos ${seconds} segundos.`
top demais
valeu!!
Show!👏
Gostei! Partindo da sua ideia eu fiz assim: `Agora são ${hora}:${min}` pra aparecer assim 15:01 igual no windows. Obrigado! Por falar nisso, 4 anos se passaram. Iai, como você tá hoje com relação a carreira?
Também temos a licença do PS :D -- É verdade esse bilhete --
kkkkkkkkkkkkkk
E um ps4
kkkkkkkkkkkkkkkk
hahahah
kkkkkkkkkkkkkkkkkkkkkkkkkk
Galera pra quem quiser pular essa parte parte do Photoshop é só baixar a foto no pexels / personalizado e colocar 250 por 250 vai ficar quadrada ainda mais o importante é resolver o exercício e depois claro aprender a utilizar essas ferramentas de edição pq é super necessário para desenvolvimento web. Vlw
É só dar um border-radius: 50% que resolve, ela fica redondinha
@@higorsousa376 Moço, eu dei border-radius: 50% e ela ainda sim fica enorme e ainda fica fora do quadrado branco. O que eu faço?
para formatar as imgs consegui fazer pelo word: formatar > cortar > cortar para demarcar forma > elipse. Depois é só colar no paint e salvar.
De pensar que oq mais me deu trabalho foi editar a fotos KKKKKKK
somos 3 kkkkkkkkkkkkkkk
5 kkkk
6 kkk, trabalho é elogio...
8
Pra mim tb cara kkkkk
Para quem quer colocar os minutos também e está em dúvida quando um minuto menor que 0 fica assim ,por exemplo, "9:3" invés de "9:03" eu fiz dessa forma:
if (min < 10) {
min = msg.innerHTML = `Agora são ${hora}:0${min}` //adicionei a variável var min = data.getMinutes()
}
Coloquei um 0 antes do ${min}
Achei bem prático assim.
var hora_msg = data.toLocaleTimeString() ,, Mano add essa variavel aí e na hora que mandar aparecer, lá no tamplate, põe assim =>> msg.innerHTML = `Agora são ${hora_msg.substring()} horas` Se quiser pegar a hora só até os minutos, usa 0, 5 entre os parenteses.
@@sarafaniceto faz um tempo já que ñ mexo nessa parte, mas se eu não me engano, slice e substring selecionam caracteres, porém, tem uma certa diferença. Para esse caso não é problema, mas para um que precise ser mais específico, vai precisar rever as diretrizes de cada método.
Eu não editei a foto em editor, fiz a alteração pelo codigo no css. Deu super certo.
#imagem {
width: 250px;
height: 250 px;
border-radius: 125px;
}
Cara tu não é ser humano tu é um anjo 🫶 vlw ,depois do Java vou meu aprofundar no css e html
Não tenho photoshoot, então usei o css pra alterar o tamanho e arredondar a imagem, também acrescentei um bom dia/tarde/noite dependendo da hora abaixo da imagem. Ficou bem bacana. Esse curso é excelente pra quem quer reforçar a base da programação.
Ontem não consegui. Hoje consegui depois de rever as 2 aulas novamente. A sensação é muito boa.
eu não tinha conseguido ontem também rs. Daí vi seu comentário e tentei novamente hoje, deu 100% certo!
if e else é muuuuuuito perigoso, qualquer erro ja era
Onde você errou? Não estou conseguindo fazer aparecer a imagem.
@@gustavozuini Deve ter alguma coisa a ver com o "if", é o que o Davi falou, qualquer errinho já era.
Para deixar o Bom dia, Boa tarde automático com a hora.
No tem que pôr no HTML5.
No Javascript dentro da function vai criar: var mensagem = document.getElementByid("mensagem").
Mete isso abaixo do var hora.
Depois no If, else If e else:
Escreva: mensagem.innerHTML = "bom dia" e aí vai um por um até boa noite.
Uma dica aleatória em um vídeo aleatório:
Tente fazer os exercícios que ele te passa sozinho e depois assiste o vídeo e vê o jeito que ele fez, é difícil mas se você fizer isso aprende a resolver problemas sozinho indo atrás no google, que é o que várias empresas querem, e também aprende muito mais do meu ponto de vista.
Nss mn, tú leu minha mente, eu acabei de fazer isso
@@Frankzin faz isso com tudo, 11 meses depois, mesmo estudando menos agora por ter menos tempo, ainda sim sempre vejo dizerem que esse é o melhor jeito de estudar
Muito massa! Eu adicionei algumas coisas, como minuto, segundos, data completa e com mensagem de bom dia, boa tarde e boa noite, dependendo do horário, foi divertido!
Galera, recomendo usar o Gimp como alternativa para o photoshop (para aqueles que não tem a ousadia da pirataria kkkk), ele tem a maioria das funções do photoshop e é gratuito.
Outra dica é cortar a imagem quadrada mesmo, e extrair como jpg (já que ele é consideravelmente mais leve que o png), e depois usar o border-radius: 50%; para transformar em circulo a imagem, uma prática simples, que na vida real de desenvolvedor web em projetos escalonáveis poupa um espaço considerável em servidor.
valeu
vlw
Para quem não esta conseguindo fazer a troca das IMG, eu apenas retirei o endereço da imagem no do html deixando o src sem nada. Toda alteração das img foram no JS.
Muito legal, consegui até fazer a função madrugada \o/
E atribui essa linha para atualizar o horário de brasilia: "var hora = data.toTimeString()"
FICOU BEM LEGAL!!!
Estou adorando esse canal... super aprendendo!
Eu uso o GIMP para edição de fotos, ele é bem parecido com o Photoshop!
Eu amo a patada com amor "Ah Guanabara tava igualzinho o seu" "Se tivesse igual, tava funcionando" KKKKKKKKKKKKKKKKKKKKKK
Eu fui cortar as imagens por conta própria no GIMP e ficou tudo diferente uma da outra kkkk mas o que importa é a prática. Muito bom, professor!
eu nao tÔ conseguindo é exportar
mesmo tudo sendo diferente, deu certo??
Gustavo você é um professor completo. Além de ter uma didática boa pacacete, tu estimulas aos bons modos da programção e no desenvolvimento pessoal, pois me faz lembrar/aceitar a realidade da programação de que errar é normal, de que é como aprender qualquer coisa na vida, e se o código não rodou é porq minha lógica não tá certa e isso me faz criar uma maturidade sob minhas frustrações no meu desenvolvimento pessoal e profissional !! obrigado Professor.
Gostei muito dessa aula mostrando as funções e o if na prática, pra mim, o principal desafio é conseguir usar código para expressar minhas ideias e essas aulas com certeza estão me ajudando
Meu Deus, não acredito ter conseguido fazer isso... é tão legal ver uma coisa que você mesmo fez funcionando!
Pra quem desejar colocar o " rodapé" ao fim da pagina, segue codigo pra fazer no css :
footer{
color: white;
font: italic 12pt Arial;
text-align: center;
border-width: ;
position : absolute;
bottom : 0px;
width : 100%;
}
o que faz ele ficar lá em baixo é o position : absolute o bottom : 0px ( retirando o espaço do fim da pagina par ao rodapé) e o width : 100%
ATENÇÃO ::: !!!!!!!!!!!!!!!!! esse codigo não servirá para quando tiver muito conteúdo na página !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
Muito orgulhoso de ter feito PRIMEIRO o HTML/CSS e depois ter vindo fazer o JavaScript, consegui fazer o exercício todinho sozinho, ficou um pouco diferente algumas coisas mas funcionou, inclusive aprendi que tem como criar o JavaScript externo igual o estilo, no meu código ficou interno mesmo, mas vou acrescentar isso no próximo exercício. Guanabara é um monstro da programação, TE AMO✨
Para quem fez os testes usando as imagens de dia, tarde e noite e as imagens não apareceram.
Recomendo colocar o caminho das imagens no javascript da mesma forma que no html.
Exemplo: img.src = 'imagens/tarde.png'
O Guanabara não fez dessa forma por ter implementado o código usando Mac OS.
na vdd, acho que ele não criou pasta pra imagens. aparece 'imagens' mas é pq o mac 'cria' uma organização... Eu tive problema ao carregar as imagens pq eu ja fui criando a pasta imagens kkk
mas depois arrumei
Eu ainda não consiguir, é exatamente esse problema que está acontecendo. Como o Guanabara colocou apenas uma imagem no htm e no Javascript ele colocou 3 caminhos ... Tou perdida
eu fiquei 1 hr tentando entender e resolver, só de ler seu comentario deu certo kkkkk vlw mano
@@nancysantana8197 cria uma pasta no seu ex com o nome "img" e coloca as foto aI dentro e sempre que for conectar usa com "CTRL" + "ESPAÇO"
Aí valeu gui eu te amo❤😢
O conteúdo apresentado é excelente, e estou aprendendo muito sobre o javascript poderoso e versátil, muito obrigado !
Guanabara, adoro o modo com que você conduz a aula. Mesmo já sendo um programador experiente assisto todas as aulas! Você consegue prender a atenção do publico de uma maneira incrível. Parabéns e muito sucesso! Hoje é meu aniversário e vou passa-lo estudando javaScript, estou amando essa linguagem!
boa tarde! no arquivo do js verifica se esta img ou imagem.src... como alterou id
original tem que alterar la tamben.
Mesmo sabendo fazer o exercício, assisti o vídeo inteiro, segundo por segundo! E aprendi várias coisas que ainda não sabia, curso muito bom! Parabens prof guanabra!!!
/* COMPARTILHANDO CONHECIMENTO
Pra quem não conseguiu alterar a imagem nas condições if, observem que no html ele definiu o id da imagem como imagem (
Obrigado seu comentário me salvou estava confundindo achando que tinha que colocar o id da div 2 nunca estava dando certo rsrs
Usei o css para dimensionar as imagens. Criei uma classe para elas e defini as width, height e o border radius. Até que deu bom
comecei de manhã , parei para assistir o jogo do Brasil ! finalizei , resultado ficou top d mais .
Muito massa essa aula, curti demais!! e pra quem não tiver Photoshop, é só pesquisar Photoshop online, encontrei um site que me ajudou bastante e, embora tenha menos recursos que o original, nao tive nenhuma dificuldade em editar as imagens.
No figma você consegue recortar a forma do jeito que precisa
E no paint 3d você consegue o código hexadecimal das cores :)
2 apps gratuitos para usar
Funcionou belezinha. E como eu não tenho Photoshop, utilizei o Gimp para criar os arquivos de imagem. Foi bem legal.
Curso muito bacana, só um dica para os próximos: dar um zoom maior na tela. Valeu!
Verdade! Inclusive mudar o fundo da tela do VS Code para branco.
@@fabiolsc29 BRANCO? QUE PECADO
venho do futuro dizer que teu comentário foi ignorado com sucesso kkk
@@pedrophillipe KKKKKKKKKKK
@@pedrophillipe Todas as aulas ja tinham sido gravadas, n tinha como mudar
Muito boa aula!
Para quem não quer instalar/utilizar o Photoshop ou GIMP, tem um editor online chamado Photopea, é muito bom! Fiz as edições das imagens com ele.
pra quem quiser adicionar os minutos tbm, basta criar uma variável com o nome que quiser e colocar "data.getMinutes()"
Muito obrigado. Ficou bem melhor.
Fiquei tão orgulhoso de mim, eu incluí o "Boa madrugada" e ficou perfeito *------*
Bom demais, fiz a edição das imagens no Power Point mesmo kkkk
Nossa estou mesmo apaixonado pelo JavaScript.
Tenho procurado aprender muitas coisas dentro dessa tecnologia. Obrigado tio Guana.
Salve, Prof. Guanabara! Obrigado pelo conhecimento compartilhado! Estou gostando muito do curso!
Gostaria de compartilhar uma dica útil com os demais gafanhotos. Podemos usar o Gimp para editar fotos. Ele é um software open source e pode ser instalado em qualquer plataforma (GNU/Linux, Windows e OS X). Download através do site gimp.org/downloads.
Abraço!
Gente, quando esse trem funciona, é simplesmente Mágico!
Pessoal que nao esta conseguindo mudar de imagem, tente colocar um ID na tag , o meu estava dando erro porque coloquei o id na div e nao na imagem
Depois de tentar todas alternativas do pessoal do topo, cansado encontrei a solução kkk valeu Felipe Allue
Mano, tu me salvou demais kkkkkkkkkkk
Eu já tinha tentado de tudo e nada dava certo, maldito id colocado no lugar errado kkkkkkkkkk
cara depois de muita tentativa, procurando em outros forum, nossa apareceu seu comentário e pimba
valeu!!!!!!!!!!!!!!!!!!!
Meu amigo, você ajudou alguém 2 anos depois do seu comentário, obrigado !!
11:20 - 11:50
pra quem não conseguir inserir as imagens usando o javascript, eu fiz a seguinte alteração:
if(hora >= 0 && hora < 12){
foto.innerHTML = '';
}
else if(hora >= 12 && hora < 18){
foto.innerHTML = '';
}
else{
foto.innerHTML = '';
}
}
no seu computador pode funcionar só assim talvez
Fazendo em 19-09-2023... Solução para problema na section (duplicação indesejada):
Fazendo aqui hoje, estava tendo um problema na parte do section, criei a section conforme o Guanabara, mas duplicava uma parte dela abaixo do footer, então, depois de um tempo tentando encontrar qual era o erro, descobri que foi o 'padding' no CSS que estava gerando essa "duplicação". Tirei o padding do section e inseri na div, resolveu o problema! Valeu pelas aulas Guanabara, show demais!
Uma dica pra quem não tem Photoshop é instalar o 'Gimp', um editor de imagens gratuito que é muito bom também.
Detesto os comerciais do TH-cam, mas o conteúdo está tão bom que assisto a todos (entre os vídeos da playlist)!
No exercício do EP.11 naquela parte de If e else, fui tentar fazer sozinho e não tava dando certo, comecei de noite e fui conseguir resolver só no outro dia (eu dormi e continuei no outro dia) mas sempre fui tentando, pesquisando e refazendo, até q consegui e é muito bom quando vc consegue fazer dar certo. A dica é ser persistente e não desistir.
Ainda não consegui também. Mas vou perseverar!!!
sim, na verdade eu fiquei 4 dias tentando aprender isso do if e else, depois de um tempão eu realmente aprendi; é só não desistir
O meu funcionou certinho, fiquei muito feliz!!! Ótima aula, obrigado!
Acrescentei os minutos e os segundos em tempo real, segue a dica:
var intervald = window.setInterval(() => {carregar()
},1000);
function carregar(){
var msg = window.document.getElementById('msg')
var img = window.document.getElementById('imagem')
var data = new Date()
var hora = data.getHours()
var minuto = data.getMinutes()
var segundo = data.getSeconds()
msg.innerHTML = `Agora são ${hora}:${minuto}:${segundo}`
Mandou bem demais mano, valeu!
valeuu
so fiquei triste porque eu tentei copiar digitando tudo nao deu certo mas eu copiei e colei deu certo. mas acredito que com o tempo vou me adaptando to aprendendo ainda comecei a 2 semanas
@@esdraspenha Quando isso acontecer, não desista de encontrar o erro, aconteceu comigo várias vezes e o problema era uma letra errada, uma chave mal colocada, entenda a sintaxe, confira ponto por ponto até seu cérebro fritar, só assim irá conseguir evoluir. Abraços!
queria entender esse metódo setInterval... alguem pode explicar?
se VOCÊ persistir e insistir, vai CONSEGUIR !!!!!!!!! tu é foda @GustavaoGuanabarra
PARABÉNNNNNNNNNNS :)
A imagem nao mudava / nao alterava , fiquei caçando solução porque tinha feito exatamente como o prof passou literalmente copiei tudo e percebi que nao alterava, primeira coisa foi alterar jpg para png (mas nao mudou o problema), como vi no HTML
estava aparecendo a foto que eu colocava, então notei que o problema era no sricpt.js
entao fui, vi que as cores mudavam, mas imagem/foto nao alterava (muda a imagem em relação ao periodo) e
no prof esta img.scr = 'imagem/fotodemanha.png' ,
eu alterei para img.scr="imagem/fotodemanha.png" com aspas duplas e tudo junto
ai foiiii para NOSSAAAA ALEGRIA \o/
decidi fazer por conta propria dps de assistir a primeira parte do exercicio e me surpreendi de conseguir ter feito tudo, muito obrigado por me fazer entender oque parecia ser um bicho de 7 cabeças, agora só bora pra mais!!
DICA: para quem não quiser editar a foto em nenhum programa. (Muito mais fácil).
colocar no CSS.
img{
height: 250px;
width: 250px;
border-radius: 50%;
}
O height e o width vcs podem mudar, porém, recomendo deixar sempre o mesmo valor, o border-radius, vcs deixam sempre em 50%, assim ele vai fazer um circulo na imagem.
Valeu
Mto obg me ajudou mto
Bom d+ ver a galera ajudando um ao outros aqui nós comentários.
Pra quem nao conseguiu colocar as imagens, provavelmente você colocou em outro diretório. Por exemplo, eu criei a pasta img. Meu codigo precisou ficar assim:
if (hora >= 0 && hora < 12)
{
foto.src = 'img/manha.png' // OBSERVE O NOME DA PASTA ANTES DO NOME DO ARQUIVO .png; coloque o nome do diretorio das imagens!
}
else if (hora >= 12 && hora < 18)
{
foto.src = 'img/tarde.png'
}
else
{
foto.src = 'img/noite.png'
}
Muitíssimo obrigado. Até deixei um like pro teu comentário subir e poder ajudar outros com esse problema também.
nossaaa,salvou mto!! obrigada!!!
Show de bola.Grato pela ajuda.
vc é foda cara merece a medalha gafanhoto do ano
vlw, cupinxa !!!
pra quem não está conseguindo fazer as imagens trocarem de acordo com o horário, assim como eu estava, tente tirar os comandos de dentro função, delete a função e aquele onload="carregar()"; aqui funcionou.
Deu certo....depois de uma hora tentando encontrar o erro! obg
Pra quem estiver estudando agora e der problema na hora de chamar as imagem no JS, certifique-se de que as chamou corretamente. Veja se elas estão em subpastas dentro da principal. Tudo isso interfere.
N acredito que errei por erro nas pastas, mó cota tentando descobrir aqui, salvou mt valeu
Ok , verifiquei essa possibilidade mil vezes e infelizmente não é , o pior é que a chamada img.scr=' ' tá idêntica usei o mesmo caminho do html pra não ter erro mas essa praga custa a funcionar
@@ryanserradasilva6277o meu tbm não funciona mn
@@eduardoamerico6046 Olha eu consegui resolver , tenta dessa forma img.src ="caminho do arquivo " ou pelo INNER HTML ="" , no INNER HTML ele vai pela mesma linha de código do Html então é só copiar e colar , se não estiver indo só me avisar aqui que te ajudo
@@ryanserradasilva6277 pedi a ajuda do CHATGPT e FINALMENTE consegui uma forma, deu bastante linhas, mas deu certo:
function carregar() {
var msg = document.querySelector('div#mensagem');
var manhaImg = document.querySelector('img#manha');
var tardeImg = document.querySelector('img#tarde');
var noiteImg = document.querySelector('img#noite');
var data = new Date();
var hora = data.getHours();
var minutos = data.getMinutes()
msg.innerHTML = `Agora são ${hora}:${minutos} horas`;
if (hora >= 0 && hora < 12) {
manhaImg.src = "images/manha.png";
tardeImg.style.display = "none";
noiteImg.style.display = "none";
} else if (hora >= 12 && hora < 18) {
manhaImg.style.display = "none";
tardeImg.src = "images/tarde.png";
noiteImg.style.display = "none";
} else {
manhaImg.style.display = "none";
tardeImg.style.display = "none";
noiteImg.src = "images/noite.png";
}
}
Primeiramente: Que aula e que curso legal!
só pra dar um toque pra galera que ta começando como eu.. .
eu tava fazendo o codigo... todo bonito.. incrivel.. e na hr de executar n tava acontecendo nada... hahahahh
tava me mostrando um erro na aba 'script' e eu olhava tudo, parecia tudo perfeito e nada de rodar o programa hahahaha
alguns minutos depois eu percebi que eu havia escrito ''functio'' e não ''function'' com o N no final...
enfim.. é isso ae... um errinho bobo faz tudo ir por agua abaixo! hahahahha obrigado pela aula!
galera eu sei que esse vídeo é antigo, mas se alguém estiver com dificuldade pra deixar a imagem certa ou não tem PhotoShop, eu tenho uma solução super simples que vocês podem até usar mais vezes no futuro...
Dentro do seu css você vai escrever esse codigo:
img{
width: 200px;
height: 200px;
clip-path: circle();
}
Pronto, problema resolvido XD!!
Obrigado, amigo! Você é um amigo.
EU TE AMO
Guanabara... mão na roda esse para mim... aprendi o básico para fazer uma página aqui na empresa onde trabalho! Adorando o curso.
Faaala Guanabara, segui os exercicios e fiz algumas melhorias para ele Dizer Bom dia, boa tarde e boa noite em seus respectivos Horarios eu fiz isso adicionando a linha de codigo document.querySelector('div#foto').innerHTML += 'Bom Dia!' / 'Boa Tarde!' / 'Boa Noite!', mas não só isso! como a texto fica do lado da foto por conta da estilização eu usei flexbox na div com seu id correspondente pra estilizar, então o css ficou assim
#foto{
display: flex;
justify-content: center;
flex-direction: column;
align-items: center;
gap: 10px;
}
#msg {
text-align: center;
padding: 5px 0 5px 0;
}
Nunca mais eu pulo um exercício na vida!
eles são os mais importantes
fala galera, DICA PRECIOSA:
quando forem usar o
prestem atenção no caminho da sua imagem, por exemplo se ela estiver dentro de uma pasta chamada de "imagens ou img" você precisa colocar o caminho da imagem..
ex:
Irmão, muito obrigado pela dica! Tu me salvou!
@@gustavophellipe7942ajudando a gente aprende muito tbm né, agora que você comentou, eu percebi que estava um pouco errado a minha explicação, eu falei que o img não funcionava mais daquele jeito, na verdade eu apenas não sabia que precisava do caminho e entendi errado na época 😅, mas eu ajeitei o comentário, então eu também tenho a agradecer a você!
@@Gostosolucas hahaha. Tranquilo, irmão. Eu q agradeço!
@@Gostosolucas irmão, o meu só carrega a imagem do dia independente da hora q seja sabe oq pode ser?
@@Pablo-fz2ks pode ser na HR de carregar a imagem certa, por exemplo, quando for dia, carregue a imagem fotomanha.png, mas quando for noite use a imagem fotonoite.png. Ou algo assim, faz MT tempo que assiste o curso
Obrigado por mais uma aula, por mais um ensinamento. Você e sua equipe são incríveis, sua didática é muito envolvente, obrigado por compartilhar tanto conhecimento conosco. Muito obrigado mesmo, meu professor.
Para o pessoal que está tendo erro no img.src
certifique-se se escreveu scr ao invés de src
Valeu!!!!
Matou na mosca ... Sem muita teoria ... Exatamente isso q tava ocorrendo ... Valeu Guerreiro!
mano tava des de ontem procurando o problema, ME SAAAAAAAAAALVOU MTTT vlwwww
Não precisava do Photoshop, professor. Se foi pra não trabalhar como CSS, perdeu uma oportunidade de atrair a galera pra o curso de css e html. Mas, continua sendo o melhor conteúdo de JS para iniciantes no TH-cam. Muito obrigado!
Olá 🦗, obrigado pelo seu comentário e por acompanhar nossos conteúdos! Ficamos felizes em saber que estamos ajudando você a aprender JavaScript. Quanto ao uso do Photoshop, é importante destacar que ele é apenas uma das ferramentas que pode ser utilizada para criar designs. O conhecimento em CSS e HTML é fundamental para o desenvolvimento de interfaces web e é abordado em nossos cursos. Agradecemos sua sugestão e continuaremos trabalhando para oferecer aulas de qualidade em diversas áreas da tecnologia. Muito obrigado por fazer parte da nossa comunidade de aprendizado! 🚀💻
Colegas, neste site html-color-codes.info/Codigos-de-Cores-HTML/ também temos cores em hexadecimal. Espero ter ajudado.
Show de bola!
Tem o da Mozilla também, developer.mozilla.org/pt-BR/docs/Web/CSS/CSS_Colors/seletor_de_cores
Uma dica pra não demorar a edição é só usar css coloca uma borda de 100px o codigo seria esse:
Img {
border:none;
border-radius:100px;
}
Para quem não está conseguindo fazer funcionar na parte da troca de imagens por meio de condições (if, else if, else) , vou deixar em baixo aqui como eu fiz. Não sei se o JS mudou a forma na qual o SRC é utilizado, pois coloquei todo o código certo com o os diretórios e tudo mais e não funciona de forma alguma, então fui pesquisar. Segue o código:
function carregar() {
var msg = document.getElementById('msg')
var img = document.getElementById('image')
var data = new Date()
var hora = data.getHours()
msg.innerHTML = `Agora são ${hora} horas.`
if (hora >= 0 && hora < 12) {
img.setAttribute('src','img/fotomanha.png')
} else if (hora >= 12 && hora < 18) {
img.setAttribute('src','img/fototarde.png')
} else {
img.setAttribute('src','img/fotonoite.png')
}
}
percebesse que eu utilizei ( img.setAttribute('src' , 'img/fotomanha.png' ) ao invés de img.src = 'img/fotomanha.png'
Olá! Aqui pegou normal o img.src = " "
o meu tb não funcionou com o img.src
Só tenho o que agradecer, mão na massa!
conseguir fazer o código todo sozinho é bem satisfatório. NÃO DESISTAM!
Parabéns! 👏
Guanabara você é um Deus cara!
esse guanabara eh fod...o cara usa mac no inicio e do nada ta com um windows kkkkkk
né kkkk
Não esqueçam de colocar o id="imagem" na pq se não, não vai dar certo. tava sem saber pq o meu não dava certo, quando percebi isso. se o seu não deu certo é pq vc esqueceu alguma coisa. volta e refaz de novo com calma, dez vezes se for preciso!
Para quem estiver com dificuldade em editar as fotos, eu recomendo o Canvas !
Existem várias formas de fazer o arredondamento de imagens, as quais já foram aqui expostas. No entanto, acho que ninguém disse porque é dificultoso esse processo no sentido de adequar a imagem no navegador.
A razão central é porque o navegador NÃO RECEBE IMAGENS REDONDAS. Se você abrir o DevTools do Google Chrome e checar a tag deste exercício, irá descobrir que o conteúdo interno (dentro de "padding") tem seu tamanho calculado no formato A x B, em outras palavras, no formato retangular - e não o formato pir² do nosso "círculo". Por isso, a imagem arredondada é uma "gambiarra" que fazemos, porque o navegador em si não a concebe. Assim, se você quisesse digitar algum texto ao lado dessa imagem, notaria que ele é "empurrado" para fora. Isso porque aquelas bordinhas que você viu o Guanabara transparecendo no Photoshop permanecem sendo "vistas" pelo navegador, ele apenas não as está exibindo ao usuário, mas continua contabilizando o tamanho.
Nesse sentido, eu acredito que a melhor maneira de arredondá-las, com os conhecimentos disponíveis até aqui, é usando a propriedade border-radius do CSS, que alguém aqui já citou. Isso porque, por meio dessa propriedade, podemos usar uma imagem no formato JPEG/JPG em vez de PNG - apenas PNG permite deixar o fundo transparente. A vantagem é que o JPEG torna as imagens mais leves. As imagens que o Guanabara carregou provavelmente "pesavam" em torno de 50 a 100 kB, enquanto no JPEG isso cairia para 10kB. Neste exercício, de fato não faz diferença, mas para a produção de sites, via de regra, usasse o formato JPEG, que é mais leve e, com efeito, vai gastar menos recursos do servidor. Aqui vale a pena o JPEG porque a parte "retangular" que não faz parte do conteúdo circular, ao usar o border-radius em 50%, será automaticamente excluída da exibição, ainda que o navegador tenha a baixado mesmo assim.
Uma coisa bem importante na hora que vcs forem fazer é deixar as fts no msm arquivo q os arquivo html, css e js esta
tmj cara vlw dms c é zika
Dei uma pausa na aula lá no site só para comentar: que execício maravilhoso JavaScript é vida ❤.
depois de uma hora aprendendo a mexer no gimp voltei aqui kkkkkkkk
Não consegui nem abrir essa p****
Pela primeira vez tive um erro no código e pareceu que ele adivinhou que isso aconteceria kkk revi o código 8 vezes, cada vez achei um erro diferente, até que resolvi refazer tudo de novo olhando o vídeo minuciosamente e finalmente... DEU CERTO!!!
Enquanto Guanabara falava da licença do photoshop, eu tava vendo pro meu todo crackeado ksksksksksk
eu nao fiz document.body.style.background
MAS
eu fiz desse jeito:
criei uma variavel chamada corpo e dps usei corpo.style.background, funciona do mesmo jeito
eu tento fazer antes de vc fazer, para saber se estou conseguindo aprender, eu utilizei assim, coloque um id para o body, ai no js eu coloquei o id.style.background = ' '
tbm deu certo
faço as mesmas coisas, as vezes até me enrolo pq eu tento fazer mais do que ele ensina pra ver se eu descubro sozinho, mas quando n consigo eu paro e sigo no que ele está ensinando hahaha
Pra fazer aparecer a mensagem de bom dia, boa tarde ou boa noite junto do horário :
Coloca o msg.innerHTML , dentro de cada condição que você criou e concatena usando +=
if (hora >= 5 && hora = 13 && hora
o meu não está nem mudando o msg.innerHTML = `Agora são ${hora} horas.` Essa linha tá escrito com letras brancas e não está funcionando, o que poderia ser?
Aprendo muito contigo Guanabara. Muito obrigado e Parabéns!
Para colocar os minutos : var hora = data.getHours() + ":" + data.getMinutes().toString().padStart(2, "0")
se alguem souber um melhor avisa!!
var hora = data.getHours() +':'+ data.getMinutes() +':'+ data.getSeconds();
var hora = data.getHours()
var min = data.getMinutes()
msg.innerHTML = `Agora são${hora} Horas e ${min} MIn.`
Parabéns, equipe do Curso em Vídeo!
Excelente conteúdo do curso de JavaScript.
Muito obrigado!