Skip to content

Instantly share code, notes, and snippets.

@AttemptToCallNull

AttemptToCallNull/app.js

Forked from anonymous/app.js
Created August 20, 2019 18:43
Show Gist options
  • Save AttemptToCallNull/0f1bc5783d62795ebc47b6963b4bf59f to your computer and use it in GitHub Desktop.
Save AttemptToCallNull/0f1bc5783d62795ebc47b6963b4bf59f to your computer and use it in GitHub Desktop.
Download ZIP
Raw
app.js
/* This file should be in a folder called `js` */
var clock = document.getElementById('clock');
var hexColor = document.getElementById('hex-color');
function hexClock() {
var time = new Date();
var hours = (time.getHours() % 12).toString();
var minutes = time.getMinutes().toString();
var seconds = time.getSeconds().toString();
if (hours.length < 2) {
hours = '0' + hours;
}
if (minutes.length < 2) {
minutes = '0' + minutes;
}
if (seconds.length < 2) {
seconds = '0' + seconds;
}
var clockStr = hours + ' : ' + minutes + ' : ' + seconds;
var hexColorStr = '#' + hours + minutes + seconds;
clock.textContent = clockStr;
hexColor.textContent = hexColorStr;
document.body.style.backgroundColor = hexColorStr;
}
hexClock();
setInterval(hexClock, 1000);
Raw
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<meta http-equiv="X-UA-Compatible" content="ie=edge"/>
<title>Document</title>
<link rel="stylesheet" href="css/style.css" />
</head>
<body>
<h1 id="clock"></h1>
<p id="hex-color"></p>
<script src="js/app.js"></script>
</body>
</html>
Raw
style.css
/* This file should be in a folder called `css` */
body {
font-family: 'Lato';
margin-top: 200px;
text-align: center;
color: white;
}
#clock {
font-weight: 300;
font-size: 100px;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment