July 28, 2017 19:34 · zulhardinata97 · Jun 28, 2019
diff --git a/app.js b/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);
diff --git a/index.html b/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>
diff --git a/style.css b/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;
 }
	/* 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);
	<!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>
	/* 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;
	}