-
Notifications
You must be signed in to change notification settings - Fork 0
/
script.js
75 lines (64 loc) · 2.99 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
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);
imagemVisualizacao.src = './imagens/opcoes-cores/' + opcoesCores[corSelecionada].pasta + '/imagem-' + imagemSelecionada +'.jpeg';
}
function trocarTamanho() {
//Atualizar o Tamanho da Caixa
const idOpcaoSelecionada = document.querySelector('[name="opcao-tamanho"]:checked').id;
tamanhoSelecionado = idOpcaoSelecionada.charAt(0);
//mudar o título do Produto
tituloProduto.innerText = 'Pulseira loop esportiva azul-inverno para caixa de ' + opcoesTamanho[tamanhoSelecionado];
//mudar o 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 cor selecionada
const idOpcaoSelecionada = document.querySelector('[name="opcao-cor"]:checked').id;
corSelecionada = idOpcaoSelecionada.charAt(0);
//trocar título da página
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';
}