gradient-generator/scripts.js at master · sharnajh/gradient-generator · GitHub

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
let pickerA = document.getElementById("color-a"),
pickerB = document.getElementById("color-b");

const colorA = pickerA.value,
colorB = pickerB.value;

let hexTextA = document.getElementById("hexTextA"),
hexTextB = document.getElementById("hexTextB");

let preview = document.getElementById("preview"),
see = document.getElementById("see");

let direction = document.getElementsByClassName("direction");

let generate = document.getElementById("generate");

hexTextA.innerHTML = colorA;
hexTextB.innerHTML = colorB;

let code

let percentageA = document.getElementById("range-a"),
percentageB = document.getElementById("range-b");

for(let i = 0; i < direction.length; i++ ) {

    direction[i].addEventListener("click", (event) => {
        document.getElementById("direction-input").innerText = `${direction[i].value}`;
        document.body.style = `background: linear-gradient(to ${document.getElementById("direction-input").textContent}, ${hexTextA.innerHTML} 0%, ${hexTextB.innerHTML} 100%)`;
    });

};

pickerA.addEventListener("input", (event) => {
    hexTextA.innerHTML = pickerA.value;
    document.body.style = `background: linear-gradient(to ${document.getElementById("direction-input").textContent}, ${hexTextA.innerHTML} ${parseInt(percentageA.value,10)}%, ${hexTextB.innerHTML} ${parseInt(percentageB.value,10)}%);`;
}, false);

pickerB.addEventListener("input", (event) => {
    hexTextB.innerHTML = pickerB.value;
    document.body.style = `background: linear-gradient(to ${document.getElementById("direction-input").textContent}, ${hexTextA.innerHTML} ${parseInt(percentageA.value,10)}%, ${hexTextB.innerHTML} ${parseInt(percentageB.value,10)}%);`;
}, false);

percentageA.addEventListener("input", (event) => {
    document.body.style = `background: linear-gradient(to ${document.getElementById("direction-input").textContent}, ${hexTextA.innerHTML} ${parseInt(percentageA.value,10)}%, ${hexTextB.innerHTML} ${parseInt(percentageB.value,10)}%);`;
});

percentageB.addEventListener("input", (event) => {
    document.body.style = `background: linear-gradient(to ${document.getElementById("direction-input").textContent}, ${hexTextA.innerHTML} ${parseInt(percentageA.value,10)}%, ${hexTextB.innerHTML} ${parseInt(percentageB.value,10)}%);`;
});

generate.addEventListener("click", (event) => {
    let code = `background: linear-gradient(to ${document.getElementById("direction-input").textContent}, ${hexTextA.innerHTML} ${parseInt(percentageA.value,10)}%, ${hexTextB.innerHTML} ${parseInt(percentageB.value,10)}%);`;
    let codeToCopy = document.createElement('textarea');
    codeToCopy.value = code;
    document.body.appendChild(codeToCopy);
    codeToCopy.select();
    document.execCommand('copy');
    alert(`The following code has been copied to your clipboard: "${code}"`);
    document.body.removeChild(codeToCopy);
})