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 a 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 .
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
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 .
Referências:
https://github.com/klsio22/instagram-clone
https://code.tutsplus.com/pt/tutorials/the-30-css-selectors-you-must-memorize--net-16048
