Background-Gradient-Generator/code at main · Shubhamsingh168/Background-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
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
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            color: white;
            text-align: center;
            gap: 10px;
        }
        body{
            width: 100%;
            height: 100vh;
            background-image: linear-gradient(
                to right top,
                #051937,
                #004d7a,
                #008793,
                #00bf72,
                #a8eb12
            );
            display: flex;
            justify-content: center;
            align-items: center;
        }
        #mybutton1{
            height: 6vh;
            text-transform: uppercase;
            background-color: black;
            padding: 10px 20px;
            border-radius: 20px 20px 20px 20px;
            box-shadow: 7px 7px 9px rgba(0, 0, 0, 0.3);
        }
        #mybutton2{
            height: 6vh;
            text-transform: uppercase;
            background-color: rgb(13, 245, 17);
            padding: 10px 20px;
            color: black;
            border-radius: 20px 20px 20px 20px ;
            margin: 30px;
            box-shadow: 7px 7px 9px rgba(0, 0, 0, 0.3);
        }

        #edit{
            font-size: 15px;
            text-align: center;
        }
    </style>
</head>
<body>
    <section>
        <div>
        <button id="mybutton1">#0519387</button>
        <button id="mybutton2">#008793</button>
        </div>
        <h2 id="edit">Copy your code here</h2>
        <div class="copycode">
            background-image: linear-gradients(to right, rgb(92, 145 , 229), rgb(152, 63, 198))
        </div>
    </section>
    <script>
        let btn1 = document.getElementById("mybutton1");
        let btn2 = document.getElementById("mybutton2");
        let copyDiv = document.querySelector(".copycode");
        let rgb1 = "rgb(92, 145 , 229)";
        let rgb2 = "rgb(152, 63, 198)";

        const hexValues = ()=>{
            let myhexvalues = "0123456789abcdef";
            let colors = "#"
            for(let i=0 ; i<6 ; i++){
               colors = colors + myhexvalues[Math.floor(Math.random() * 16)];
            }
            return colors;
        }

        const handlebutton1 = ()=>{
            rgb1 = hexValues();
            btn1.innerHTML = rgb1;
            console.log(rgb1);
            document.body.style.backgroundImage = `linear-gradient(to right, ${rgb1}, ${rgb2})`;
            copyDiv.innerHTML = `background-image: linear-gradient(to right,  ${rgb1}, rgb(152, 63, 198))`;
        };

        const handlebutton2 = ()=>{
            rgb2 = hexValues();
            btn2.innerHTML = rgb2;
            console.log(rgb2);
            document.body.style.backgroundImage = `linear-gradient(to right,  ${rgb1}, ${rgb2})`;
            copyDiv.innerHTML = `background-image: linear-gradient(to right,  ${rgb1}, ${rgb2})`;

        };

        btn1.addEventListener("click",handlebutton1);
        btn2.addEventListener("click",handlebutton2);

        copyDiv.addEventListener("click", () => {
            navigator.clipboard.writeText(copyDiv.innerText);
        });

    </script>
</body>
</html>