gradiendb/script.js at main · Mansi-Tiwari/gradiendb · 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
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
class Color{
     color1;
     color2;
    constructor(color1='#00bfa5', color2='#00332e'){
        this.color1 = color1;
        this.color2 = color2;
    }


    generateCode(container,defaultDirection,code){
        code.value = `background-image: linear-gradient(${defaultDirection}, ${this.color1},${this.color2})`;
        container.style.backgroundImage =`linear-gradient(${defaultDirection}, ${this.color1},${this.color2})`;
    }

    generateRandom(container,defaultDirection,code){
        let clr1='',
            clr2='';

            const array = new Array('0','1','2','3','4','5','6','7','8','9','a','b','c','d','e','f');

            for(let i=0; i<6; i++){
                clr1+=array[Math.floor(Math.random()*array.length)]

                clr2+=array[Math.floor(Math.random()*array.length)]
            }

            code.value = `background-image: linear-gradient(${defaultDirection}, ${this.color1},${this.color2})`;

            container.style.backgroundImage =`linear-gradient(${defaultDirection}, #${clr1},#${clr2})`;

            this.color1 = '#'+clr1;
            this.color2 = '#'+clr2;

    }
}


const color1 = document.querySelector('#color1');
const color2 = document.querySelector('#color2');

const container = document.querySelector('#random_color');
const code = document.querySelector('.code')
const copy = document.querySelector('.copy')

const random = document.querySelector('.random');


let defaultDirection = 'to bottom';

var background = new Color();


background.generateCode(container,defaultDirection,code)


function setGradientDirection(directionName,directionAngle){
let directions = document.querySelectorAll(".directions button");

for(let i of directions){
    i.classList.remove("active")
}
directionAngle.classList.add("active")
defaultDirection = directionName;

background.color1 = color1.value;
background.color2 = color2.value;

background.generateCode(container,defaultDirection,code)

}


color1.addEventListener("input",function(){
    background.color1 = this.value;
    background.color2 = color2.value;

    background.generateCode(container,defaultDirection,code)

})


color2.addEventListener("input",function(){
    background.color1 = color1.value;
    background.color2 = this.value;

    background.generateCode(container,defaultDirection,code)
})


random.addEventListener('click',function(){

    background.generateRandom(container,defaultDirection,code)

    color1.value = background.color1;
    color2.value = background.color2;

})

copy.addEventListener("click",function() {
    code.select();
    document.execCommand("copy")

    copy.innerHTML = "Code copied !";

    setTimeout(function() {
        copy.innerHTML = "Copy";
    },2000)

})