-
Notifications
You must be signed in to change notification settings - Fork 0
/
script.js
78 lines (56 loc) · 2.05 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
const slider = document.getElementById("myRange");
const maxSliderValue = slider.getAttribute("max");
const price = document.querySelector('#price');
const view = document.querySelector('#pageviews');
const checkbox = document.querySelector('#toggle');
const btn = document.querySelector('#resetBtn');
let isChecked = false;
// data
const numsArr = ['8', '12', '16', '24', '36'];
const viewsArr = ['10K', '50K', '100K', '500k', '1M'];
// slider color change
const setSliderBg = function(e) {
const { value, min, max } = e.target;
const bgPercentage = ((value - min) / (max - min)) * 100;
const color = `linear-gradient(90deg, hsl(174, 76%, 80%) ${bgPercentage}%, hsl(226, 68%, 95%) ${bgPercentage}%)`;
slider.style.background = color;
};
const setNumbers = function(e) {
const { value } = e.target;
const currNumValue = numsArr[value - 1];
const currViewValue = viewsArr[value - 1];
price.textContent = validateChecked(currNumValue);
view.textContent = `${currViewValue} pageviews`;
};
const validateChecked = (price) => isChecked ? `$${countDiscount(price)}.00` : `$${price}.00`;
const countDiscount = (price) => price - price * 0.25;
const applyDiscount = function(e) {
const { checked } = e.target;
const number = +price.textContent.slice(1);
if (checked) {
isChecked = true;
price.textContent = `$${countDiscount(number)}.00`;
} else {
isChecked = false;
price.textContent = `$${numsArr[slider.value - 1]}.00`;
}
};
const reset = function() {
const color = `linear-gradient(90deg,
hsl(174, 76%, 80%) 50%,
hsl(226, 68%, 95%) 50%)`;
slider.value = 3;
isChecked = false;
checkbox.checked = false;
slider.style.background = color;
price.textContent = `$${numsArr[2]}.00`;
view.textContent = `${viewsArr[2]} pageviews`;
};
// event
slider.addEventListener('input', (e) => {
setSliderBg(e);
setNumbers(e);
});
checkbox.addEventListener('click', applyDiscount);
btn.addEventListener('click', reset);
window.addEventListener('load', reset);