Skip to content

Commit 82429c7

Browse files
gantavyamalviyagantavyamalviya
authored
Merge pull request #17 from siddhi-244/Siddhi-244
Added Background Color Changer
2 parents dd84e24 + 2775d2f commit 82429c7

4 files changed

Lines changed: 41 additions & 0 deletions

File tree

‎Background Color Changer/README.md‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
### Background Color Changer
2+
3+
### Tech stack
4+
- Html
5+
- css
6+
- JavaScript

‎Background Color Changer/index.html‎

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<title>Color Changer</title>
5+
<link rel="stylesheet" type="text/css" href="style.css">
6+
</head>
7+
<body>
8+
<button>CHANGE</button>
9+
<script type="text/javascript" src="script.js"></script>
10+
</body>
11+
</html>

‎Background Color Changer/script.js‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
var color= ["#222f3e","#f368e0","#ee5353","#6c55cc","#24ffff","#ff2626","#ffffff","#000000","#7878ff","#cdcdcd","#454545","#909090","#cccddd","#0abde3","#10ac84","#5f27cd"];
2+
var i=0;
3+
document.querySelector("button").addEventListener("click",function(){
4+
i=1<color.length ? ++i : 0;
5+
document.querySelector("body").style.background=color[i]
6+
})

‎Background Color Changer/style.css‎

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
body{
2+
margin: 0;
3+
padding: 0;
4+
background-color: #222f3e;
5+
}
6+
button{
7+
position: absolute;
8+
top: 50%;
9+
left: 50%;
10+
transform: translate(-50%,-50%);
11+
padding: 10px;
12+
background-color: #fff;
13+
border:none;
14+
outline: none;
15+
font-size: 16px;
16+
text-transform: uppercase;
17+
cursor: pointer;
18+
}

0 commit comments

Comments
 (0)