-
Notifications
You must be signed in to change notification settings - Fork 0
/
script.js
82 lines (64 loc) · 2.92 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
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];
const opcoesTamanho = ['41 mm', '45 mm'];
let imagemSelecionada = 1;
let tamanhoSelecionado = 1;
let corSelecionada = 1;
function trocarImagem() {
const idOpcaoSelecionada = document.querySelector('[name="opcao-imagem"]:checked').id;
imagemSelecionada = idOpcaoSelecionada.charAt(0); //pegando o primeiro caracter do id
imagemVisualizacao.src = './imagens/opcoes-cores/' + opcoesCores[corSelecionada].pasta + '/imagem-'+ imagemSelecionada +'.jpeg';
}
function trocarTamanho() {
//atualizar variável tamanhoSelecionado
const idOpcaoSelecionada = document.querySelector('[name="opcao-tamanho"]:checked').id;
tamanhoSelecionado = idOpcaoSelecionada.charAt(0);
//mudar o título do produto
tituloProduto.innerText = "Pulseira loop esportiva " + opcoesCores[corSelecionada].nome + " para caixa de " + opcoesTamanho[tamanhoSelecionado];
//mudar tamanho da imagem de acordo com a opção
if (opcoesTamanho[tamanhoSelecionado] === '41 mm') {
imagemVisualizacao.classList.add('caixa-pequena');
} else {
imagemVisualizacao.classList.remove('caixa-pequena');
}
}
function trocarCor() {
//atualizar variável de corSelecionada
const idOpcaoSelecionada = document.querySelector('[name="opcao-cor"]:checked').id;
corSelecionada = idOpcaoSelecionada.charAt(0);
//trocar título do produto
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 visualização
imagemVisualizacao.src = './imagens/opcoes-cores/'+ opcoesCores[corSelecionada].pasta +'/imagem-'+ imagemSelecionada +'.jpeg';
}