ColorChangeApp/index.html at main · Ayushgit28/ColorChangeApp · 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
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Color Changer</title>
</head>
<style>
    .canvas{
        text-align: center;

    }
    .buttons{
        display: grid;
        grid-template-columns: repeat(4,auto);
        justify-content: center;
        gap: 40px;
    }
    .button{
        display: flex;
        height: 200px;
        width: 200px;
        border-radius: 50%;
        border: 2px solid black;
        justify-content: center;
        align-items: center;
    }
    #grey{
        background-color: grey;
    }
    #skyblue{
        background-color: skyblue;
    }
    #yellow{
        background-color: yellow;
    }
    #lightgreen{
        background-color: lightgreen;
    }
    #brown{
        background-color: brown;
    }
    #black{
        background-color: black;
    }
    #white{
        background-color: white;
    }
    #red{
        background-color: red;
    }
    #orange{
        background-color: orange;
    }
    #pink{
        background-color: pink;
    }
    #purple{
        background-color: purple;
    }
    #cyan{
        background-color: cyan;
    }
    #lime{
        background-color: lime;
    }
    #magenta{
        background-color: magenta;
    }
    #maroon{
        background-color: maroon;
    }
    #olive{
        background-color: olive;
    }


</style>
<body>
    <div class="canvas">
        <h1>Color Switcher</h1>
        <div class="buttons">
            <span class="button" id="grey"></span>
            <span class="button" id="skyblue"></span>
            <span class="button" id="yellow"></span>
            <span class="button" id="lightgreen"></span>
            <span class="button" id="brown"></span>
            <span class="button" id="black"></span>
            <span class="button" id="white"></span>
            <span class="button" id="red"></span>
            <span class="button" id="orange"></span>
            <span class="button" id="pink"></span>
            <span class="button" id="purple"></span>
            <span class="button" id="cyan"></span>
            <span class="button" id="lime"></span>
            <span class="button" id="magenta"></span>
            <span class="button" id="maroon"></span>
            <span class="button" id="olive"></span>
        </div>
        <h2>
            Try Clicking the color box
            <span>to change the background color!</span>
        </h2>
    </div>
    <!-- <script src="C:\Users\ayush\Desktop\html\javascript\Projects\ColorChanger\script.js"></script> -->
     <script defer src="script.js"></script>

</body>
</html>