Article image
Klésio Nascimento
Klésio Nascimento14/09/2021 20:55
Compartilhe

Como mudar imagem e trocar cor ao clicar

  • #JavaScript
  • #HTML
  • #CSS

Fiz esse projeto na própria Dio usando como base as aulas do instagram clone, então fiz um a acréscimo do modo escuro na página. Nesse projeto eu fiz uso de variáveis CSS para não precisamos sempre reescrever as cores toda vez que que precisarmos delas . Nesse artigo eu busquei fazer uma descrição do que fiz para mudar as cores da pagina. Dicas sugestões de melhorias, serei muito grato .

1.Criando o input div que receberá a funcionalidade.

Primeiro criei um input do tipo checkbox depois um id e uma classe, que no caso nomeie de “active-dark-mode” , depois criei uma div que irá receber o dark-mode, dentro da div criei uma label com o “for” que recebe o nome do id pertencente ao input criado anteriormente para fazer uma referência, então quando clicarmos nela irá mudar a as cores da página . 

image

2. Criando o estilo dark-mode.

Após ter criado a div e nomeá-la criei uma classe chamada dark-mode.css, reatribui novos valores as variáveis já existente para mudar as cores da página. Outro detalhe é o significado desse “~”, ele irá selecionar qualquer classe que vier após a sua chamada, no caso ele executada após o clique no input

image

image

 

3.Criando a ação na mudança de ícone da lampada.

Criei um no arquivo JS a atribui um nome a ele nesse caso atribui um nome de acordo com a funcionalidade do script change-image.js , criei uma função expression que irá executar o evento de onclick() no id selecionado . No meu if usei um método chamando match() , também podemos usar o includes() para encontrar uma strings , no caso eu precisava encontrar uma String que fazia referencia ao nome da imagem inicial da página , então o if que basicamente troca a imagem quando ela existe caso não exista ele inverte para anterior . 

image

 

Referências:

image https://github.com/klsio22/instagram-clone 

 

image https://medium.com/reactbrasil/como-o-javascript-funciona-entendendo-as-fun%C3%A7%C3%B5es-e-suas-formas-de-uso-eb387c7fa138#:~:text=Em%20Javascript%20h%C3%A1%20mais%20de,function%20constructor%20e%20function%20generators. 

 

image https://code.tutsplus.com/pt/tutorials/the-30-css-selectors-you-must-memorize--net-16048 

 

Compartilhe
Comentários (2)
Leandro Carvalho
Leandro Carvalho - 15/09/2021 07:32

Ficou incrível seu projeto, meus parabéns.

Vagner Bellacosa
Vagner Bellacosa - 14/09/2021 21:26

Klesio, esse é o espirito, ficou muito bacana, parabéns e sucesso em sua formação.


Somos 1 milhao, juntos mais forte e compartilhando o conhecimento ninguem nos segurara