Skip to content

Commit 694d813

Browse files
BITS08SATHYABITS08SATHYA
committed
Project 1 Color flipper
1 parent 936dd36 commit 694d813

4 files changed

Lines changed: 46 additions & 4 deletions

File tree

‎1-color-flipper/setup/app.js‎

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1 +1,16 @@
11
const colors = ["green", "red", "rgba(133,122,200)", "#f15025"];
2+
3+
const btn = document.getElementById("btn");
4+
const color = document.querySelector(".color");
5+
6+
btn.addEventListener("click", function () {
7+
//get random number between 0 - 3 colors[]
8+
const randomNumber = getRandomNumber();
9+
console.log(randomNumber);
10+
document.body.style.backgroundColor = colors[randomNumber];
11+
color.textContent = colors[randomNumber];
12+
});
13+
14+
function getRandomNumber() {
15+
return Math.floor(Math.random() * colors.length);
16+
}

‎1-color-flipper/setup/hex.html‎

Lines changed: 2 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -3,9 +3,7 @@
33
<head>
44
<meta charset="UTF-8" />
55
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
6-
<title>
7-
Color Flipper || Simple
8-
</title>
6+
<title>Color Flipper || Simple</title>
97

108
<!-- styles -->
119
<link rel="stylesheet" href="styles.css" />
@@ -23,7 +21,7 @@ <h4>color flipper</h4>
2321
</nav>
2422
<main>
2523
<div class="container">
26-
<h2>background color : <span class="color">#f1f5f8</span></h2>
24+
<h2>background color - hex : <span class="color">#f1f5f8</span></h2>
2725
<button class="btn btn-hero" id="btn">click me</button>
2826
</div>
2927
</main>

‎1-color-flipper/setup/hex.js‎

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1 +1,19 @@
11
const hex = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, "A", "B", "C", "D", "E", "F"];
2+
3+
const btn = document.getElementById("btn");
4+
const color = document.querySelector(".color");
5+
6+
btn.addEventListener("click", function () {
7+
let hexColor = "#";
8+
// console.log(getRandomNumber());
9+
for (let i = 0; i < 6; i++) {
10+
hexColor += hex[getRandomNumber()];
11+
}
12+
// console.log(hexColor);
13+
color.textContent = hexColor;
14+
document.body.style.backgroundColor = hexColor;
15+
});
16+
17+
function getRandomNumber() {
18+
return Math.floor(Math.random() * hex.length);
19+
}

‎1-color-flipper/setup/index.html‎

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,7 @@
88
<!-- styles -->
99
<link rel="stylesheet" href="styles.css" />
1010
</head>
11+
1112
<body>
1213
<!-- <h1>color flipper</h1> -->
1314

@@ -25,6 +26,16 @@ <h4>color flipper</h4>
2526
</div>
2627
</nav>
2728

29+
<main>
30+
<div class="container">
31+
<h2>
32+
background color :
33+
<span class="color"> #f1f5f8 </span>
34+
</h2>
35+
<button class="btn btn-hero" id="btn">click me</button>
36+
</div>
37+
</main>
38+
2839
<!-- javascript -->
2940
<script src="app.js"></script>
3041
</body>

0 commit comments

Comments
 (0)