< > Código se funcionou está certo? </ > Resolvido: Trocando imagens com radio e javascript
Boa noite galera!
Pessoal estou apredendo programação afim de entrar na área, como não saiu nenhuma vaga vou fazendo os freelas que aparece.
Como não tenho experiencia em aplicações que são usadas em empresas queria tirar uma duvida com vocês, como sei se meu código está bom ou no padrão que vocês devs usam nas empresas.
Meu foco é Front end, então para contextualizar segue essa landing page que fiz para um cliente divulgar seu produto, a ideia é que quando o usuário escolhe uma cor a foto do produto muda para aquela cor.
Basicamente criei buttons devido a acessibilidade, e fiz um add.eventListener para cada um deles e troco o atributo src da tag img no meu html.
codigo resumido:
const btnBlack = document.querySelector("#black")
const btnBlue = document.querySelector("#blue")
const btnOrange = document.querySelector("#orange")
const btnPink = document.querySelector("#pink")
const btnGrey = document.querySelector("#grey")
const btnGold = document.querySelector("#gold")
const productImg = document.querySelector(".product img")
function changeImg(path) {
productImg.setAttribute("src", path)
productImg.classList.add("fadeJS")
productImg.style.filter = "grayscale(0)"
setTimeout(() => {
productImg.classList.remove("fadeJS")
}, 200);
}
// funcao que executa a troca de imagens, repare que o path eh uma parametro
function changeImg(path) {
productImg.setAttribute("src", path)
productImg.classList.add("fadeJS")
productImg.style.filter = "grayscale(0)"
setTimeout(() => {
productImg.classList.remove("fadeJS")
}, 200);
}
// opcoes de cores quando usuario clicka na cor branca
btnWhite.addEventListener("click", () => {
changeImg(path = "/public/orange.opti.webp")
productImg.style.filter = "grayscale(1)"
btnBlue.addEventListener("click", () => {
changeImg(path = "/public/azul-off.opti.webp")
btnWhite.focus()
})
btnOrange.addEventListener("click", () => {
changeImg(path = "/public/orange.opti.webp")
btnWhite.focus()
})
btnPink.addEventListener("click", () => {
changeImg(path = "/public/pink.opti.webp")
btnWhite.focus()
})
btnGrey.addEventListener("click", () => {
changeImg(path = "/public/grey.opti.webp")
btnWhite.focus()
})
btnGold.addEventListener("click", () => {
changeImg(path = "/public/gold.opti.webp")
btnWhite.focus()
})
})
// opcoes de cores quando usuario clicka na cor preta
btnBlack.addEventListener("click", () => {
changeImg(path = "/public/orange-dark.opti.webp")
productImg.style.filter = "grayscale(1)"
btnBlue.addEventListener("click", () => {
changeImg(path = "/public/azul-off-dark.opti.webp")
btnBlack.focus()
})
btnOrange.addEventListener("click", () => {
changeImg(path = "/public/orange-dark.opti.webp")
btnBlack.focus()
})
btnPink.addEventListener("click", () => {
changeImg(path = "/public/pink-dark.opti.webp")
btnBlack.focus()
})
btnGrey.addEventListener("click", () => {
changeImg(path = "/public/grey-dark.opti.webp")
btnBlack.focus()
})
btnGold.addEventListener("click", () => {
changeImg(path = "/public/gold-dark.opti.webp")
btnBlack.focus()
})
})
Funcionou mas eai esse código é profissional ou gambiarra?
link do site: https://pix.em3de.com/
link do codigo: https://github.com/Dener-Garcia/pix.em3d/blob/production/src/app.js
ps: não tenho frescuras podem mandar as respostas do jeito que quiserem