Exercícios JavaScript (Parte 2) - Curso JavaScript

Vamos fazer alguns exercícios de JavaScript? Chegou a hora de provar a si mesmo que todo o seu esforço está valendo a pena até aqui. Quando aprendemos e praticamos, solicitamos os nossos conhecimentos adquiridos. Então vamos lá! Não pule esse vídeo e faça todas as atividades propostas em JavaScript.

Curso em Vídeo

Patrocínio

#CursoemVideo #JavaScript #EcmaScript #MóduloD #Exercício02

[maiaraborges]

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.

[anacarolinahernandes]

Outra dica pra que não tem photoshop, dá pra fazer no código mesmo:

<div>
<img id="img" style="border-radius: 50%" width="250" height="250" src="manha.png" alt="Foto do Horário">
</div>

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. :)

[marcosjesus]

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 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 😇

[beatrizjouberth]

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`

[denisdosreis]

Também temos a licença do PS :D -- É verdade esse bilhete --

[kaiquefigui]

De pensar que oq mais me deu trabalho foi editar a fotos

[marcosantoniobeletatojunio]

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 <div> e um na <img> em si! Tem que ser o id da tag <img>:

<div id="foto">
<img id="imagem" src="">
</div>

[matheusdarosavicosadesouza]

Finalmente consegui terminar esse exercício, dica de ouro LEIA OS COMENTÁRIOS e pesquise fora do curso tmb

[kanibas]

Cara, como esse trio html + css e Js é extremamente poderoso.... Olha só as possibilidades que isso nos abre pra desenvolver coisas legais!

[lucasmatos]

Pra quem ainda não conseguiu alterar a imagem nos IF eu consegui colocando um ID na tag <img> deu certo

[koljyssk]

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 <img>
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 =



if {

img.src = " manha.npg"
}

e o img e var e não tag

deu certo quando botei

fotos.src= "manha.npg"

[penseleve_oficial]

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.

[tiagocosta]

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!!

[brenolima._]

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

[wolly_hat]

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á! ;)

[TonyDorifter]

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:
= "2s"

[pedroaugusto]

queria deixar aqui um EU TE AMO pra toda equipe do curso em video, AMO VOCÊS!!!

[guimoncao]

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.

[thkwrd]

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.

[laisnardes]

Eu amo a patada com amor "Ah Guanabara tava igualzinho o seu" "Se tivesse igual, tava funcionando"