-
Notifications
You must be signed in to change notification settings - Fork 0
/
script.js
83 lines (67 loc) · 3.17 KB
/
script.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
const imagemVisualizacao = document.getElementById("imagem-visualizacao");
const tituloProduto = document.getElementById("titulo-produto");
const nomeCor = document.getElementById("nome-cor-selecionada");
const miniaturaImagem0 = document.getElementById("0-imagem-miniatura");
const miniaturaImagem1 = document.getElementById("1-imagem-miniatura");
const miniaturaImagem2 = document.getElementById("2-imagem-miniatura");
const verdeCipreste = {
nome: "Verde-cipreste",
pasta: "imagens-verde-cipreste"
}
const azulInverno = {
nome: "Azul-inverno",
pasta: "imagens-azul-inverno"
}
const meiaNoite = {
nome: "Meia-noite",
pasta: "imagens-meia-noite"
}
const estelar = {
nome: "Estelar",
pasta: "imagens-estelar"
}
const rosaClaro = {
nome: "Rosa-claro",
pasta: "imagens-rosa-claro"
}
const opcoesCores = [verdeCipreste, azulInverno, meiaNoite, estelar, rosaClaro]
// n0 n1 n2 n3 n4
const opcoesTamanho = ["41 mm", "45 mm"];
// meiaNoite.pasta acessar valor em particular no objeto
// minhaLista[3] acessar um valor em particular na lista
let imagemSelecionada = 1;
let tamanhoSelecionado = 1;
let corSelecionada = 1;
function trocarImagem() {
const idOpcaoSelecionada = document.querySelector("[name='opcao-imagem']:checked").id;
imagemSelecionada = idOpcaoSelecionada.charAt(0);
imagemVisualizacao.src = "./imagens/opcoes-cores/" + opcoesCores[corSelecionada].pasta + "/imagem-" + imagemSelecionada + ".jpeg";
}
function trocarTamanho() {
// atualizar variavel de controle do tamanho da caixa
const idOpcaoSelecionada = document.querySelector("[name='opcao-tamanho']:checked").id;
tamanhoSelecionado = idOpcaoSelecionada.charAt(0);
// mudar o titulo do produto
tituloProduto.innerText = "Pulseira loop esportiva " + opcoesCores[corSelecionada].nome + " para caixa de " + opcoesTamanho[tamanhoSelecionado];
// mudar o tamanho da imagem de acordo com a opcao
if (opcoesTamanho[tamanhoSelecionado] === "41 mm") {
imagemVisualizacao.classList.add("caixa-pequena");
} else {
imagemVisualizacao.classList.remove("caixa-pequena");
}
}
function trocarCor() {
// atualizar cor selecionada
const idOpcaoSelecionada = document.querySelector("[name='opcao-cor']:checked").id;
corSelecionada = idOpcaoSelecionada.charAt(0);
// trocar titulo da pagina
tituloProduto.innerText = "Pulseira loop esportiva " + opcoesCores[corSelecionada].nome + " para caixa de " + opcoesTamanho[tamanhoSelecionado];
// trocar nome da cor
nomeCor.innerText = "Cor - " + opcoesCores[corSelecionada].nome;
// trocar imagens das miniaturas exibidas
miniaturaImagem0.src = "./imagens/opcoes-cores/" + opcoesCores[corSelecionada].pasta + "/imagem-0.jpeg";
miniaturaImagem1.src = "./imagens/opcoes-cores/" + opcoesCores[corSelecionada].pasta + "/imagem-1.jpeg";
miniaturaImagem2.src = "./imagens/opcoes-cores/" + opcoesCores[corSelecionada].pasta + "/imagem-2.jpeg";
// trocar imagem de visualizacao
imagemVisualizacao.src = "./imagens/opcoes-cores/" + opcoesCores[corSelecionada].pasta + "/imagem-" + imagemSelecionada + ".jpeg";
}