Skip to content

Commit 9c44acb

Browse files
Roshith93Roshith93
committed
setting random background color
1 parent 133c642 commit 9c44acb

2 files changed

Lines changed: 27 additions & 2 deletions

File tree

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

Lines changed: 12 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1 +1,12 @@
1-
const colors = ["green", "red", "rgba(133,122,200)", "#f15025"];
1+
const colors = ['green', 'red', 'rgba(133,122,200)', '#f15025']
2+
const getDiv = document.querySelector('.container')
3+
const getVal = getDiv.querySelector('span')
4+
const getButton = document.querySelector('#btn')
5+
6+
function getRandomValue(e) {
7+
let random = Math.floor(Math.random() * colors.length)
8+
let randomColor = colors[random]
9+
getVal.textContent = randomColor
10+
document.body.style.backgroundColor = randomColor
11+
}
12+
getButton.addEventListener('click', getRandomValue)

‎1-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)