Skip to content

Commit e05ba2e

Browse files
Siar-SohrabSiar-Sohrab
committed
done
1 parent 469042e commit e05ba2e

4 files changed

Lines changed: 47 additions & 2 deletions

File tree

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

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

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
<!DOCTYPE html>
1+
<!DOCTYPE html>
22
<html lang="en">
33
<head>
44
<meta charset="UTF-8" />

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

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

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

Lines changed: 15 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,21 @@
99
<link rel="stylesheet" href="styles.css" />
1010
</head>
1111
<body>
12-
<h1>color flipper</h1>
12+
<nav>
13+
<div class="nav-center">
14+
<h4>color flipper</h4>
15+
<ul class="nav-links">
16+
<li><a href="index.html">simple</a></li>
17+
<li><a href="hex.html">hex</a></li>
18+
</ul>
19+
</div>
20+
</nav>
21+
<main>
22+
<div class="container">
23+
<h2>background color : <span class="color">#f1f5f8</span></h2>
24+
<button class="btn btn-hero" id="btn">click me</button>
25+
</div>
26+
</main>
1327
<!-- javascript -->
1428
<script src="app.js"></script>
1529
</body>

0 commit comments

Comments
 (0)