html
html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<html>
<head>
<meta name="viewport" content="user-scalable=no">
</head>
<body id="body">
<div id="content">
<p id='rgb'>RGB : </p>
<p id='rgbS'></p>
</div>
<div id='color'></div>
<button id='btn' onfocus="blur()">Change color</button>
<script src="script.js">
</script>
</body>
Enter to Rename, Shift+Enter to Preview
css
css
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
html, body {
margin: 0;
}
#content {
width: 100%;
height: 20%;
color: #EEE;
text-align: center;
font-size: 20px;
background-color: #333;
margin-top: 10px;
}
#color {
width: 100%;
height: 80%;
top: 20%;
position: absolute;
z-index: -1;
background-color: #333;
}
div p {
display: block;
font-weight: bold;
padding: 10px 0;
line-height: 0;
Enter to Rename, Shift+Enter to Preview
js
js
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
function init(){
// your initialization stuff here
var bgColor = document.getElementById('color');
var bg = document.getElementById('btn');
var rgbS = document.getElementById('rgbS');
var rgbD = document.getElementById('rgb');
bg.addEventListener('click', colorSwitch);
var rgb = [255, 255, 255];
function colorSwitch () {
for(var i = 0; i < 3; i++) {
rgb[i] = (Math.floor(Math.random() * 255));
rgbS.innerHTML = '('+rgb[0]+', '+rgb[1]+', '+rgb[2]+')';
}
if(bgColor.style.backgroundColor != '#333') {
var content = document.getElementById('content');
content.style.borderBottom = '2px solid #222';
}
bgColor.style.backgroundColor = "rgb(" + rgb[0] + "," + rgb[1] + "," + rgb[2] + ")";
}
}
window.onload= init; // call init once HTML loaded'
Enter to Rename, Shift+Enter to Preview
BROWSER
Console
Run