Hex Clock

Developer
Kyle Shanks
Size
3,459 Kb
Views
14,168
  1. Hex Clock Previews
  2. Hex Clock HTML Codes
  3. Hex Clock CSS Codes
  4. Hex Clock JS Codes

How do I make an hex clock?

What is a hex clock? How do you make a hex clock? This script and codes were developed by Kyle Shanks on 13 October 2022, Thursday.

Hex Clock Previews
IQ Test

Hex Clock - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Hex Clock</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css"> <link rel="stylesheet" href="css/style.css">
</head>
<body> <link href="https://fonts.googleapis.com/css?family=Droid+Sans+Mono" rel="stylesheet">
<div id="app"> <div class="background" :style="{'background-color': '#'+rgb}"> <div :class="['text', white]"> #{{rgb}} <span class="small">{{time}}</span> </div> </div>
</div> <script src='https://cdnjs.cloudflare.com/ajax/libs/vue/2.1.10/vue.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

Hex Clock - Script Codes CSS Codes

.background { position: absolute; top: 0; left: 0; right: 0; bottom: 0; -webkit-transition: 0.8s ease; transition: 0.8s ease; overflow: hidden;
}
.text { position: absolute; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); padding: 30px; background-color: rgba(255,255,255,0.1); border-radius: 4px; box-shadow: 0 2px 9px -1px rgba(0,0,0,0.3); text-align: right; text-transform: uppercase; font-family: "Droid Sans Mono", monospace; font-size: 40px; letter-spacing: 4px; -webkit-transition: 0.8s ease; transition: 0.8s ease;
}
.text.white { color: #fff;
}
.small { display: block; position: relative; font-size: 14px; margin-top: 8px; letter-spacing: 1px;
}

Hex Clock - Script Codes JS Codes

// --- Notes ---
// Making a Hex Clock. Nothing special, just for fun
// Values are adjusted from regular time values to make it cover more of the hex spectrum
// Should hook it up to an API to give the color names
// http://chir.ag/projects/name-that-color/
// http://www.thecolorapi.com/
function getTime() { var thyme = new Date(),	hr = thyme.getHours(),	min = thyme.getMinutes(),	sec = thyme.getSeconds(), r = Math.round(hr * 10.625).toString(16),	g = Math.round(min * 4.32).toString(16),	b = Math.round(sec * 4.32).toString(16); if(r.length === 1) { r='0'+r; } if(g.length === 1) { g='0'+g; } if(b.length === 1) { b='0'+b; } if(hr < 10) {hr='0'+hr} if(min < 10) {min='0'+min} if(sec < 10) {sec='0'+sec}	return [hr,min,sec,r,g,b];
};
// Functions to convert the text color if it is a dark background color
function hexToRGB(hex) { var hex = hex.split('#').join(''), r = parseInt(hex.slice(0,2), 16), g = parseInt(hex.slice(2,4), 16), b = parseInt(hex.slice(4,6), 16); return [r,g,b];
}
function rgbToHsl(r, g, b){ r /= 255, g /= 255, b /= 255; var max = Math.max(r, g, b), min = Math.min(r, g, b); var h, s, l = (max + min) / 2; if(max == min){ h = s = 0; // achromatic }else{ var d = max - min; s = l > 0.5 ? d / (2 - max - min) : d / (max + min); switch(max){ case r: h = (g - b) / d + (g < b ? 6 : 0); break; case g: h = (b - r) / d + 2; break; case b: h = (r - g) / d + 4; break; } h /= 6; } return [h, s, l];
};
function isDark(hex) { var a = hexToRGB(hex), // returns [r,g,b] b = rgbToHsl(a[0],a[1],a[2])[2]; return (b <= 0.6);
}
var app = new Vue({ el: '#app', data: { info: '', white: '' }, computed: { rgb: function() { return this.info[3]+this.info[4]+this.info[5] }, time: function() { return this.info[0]+':'+this.info[1]+':'+this.info[2] }, }, methods: { update: function() { this.info = getTime(); this.white = ((isDark(this.rgb))?'white':''); } }
});
app.update();
window.setInterval(app.update, 1000);
Hex Clock - Script Codes
Hex Clock - Script Codes
Home Page Home
Developer Kyle Shanks
Username mavrK
Uploaded October 13, 2022
Rating 4
Size 3,459 Kb
Views 14,168
Do you need developer help for Hex Clock?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Kyle Shanks (mavrK) Script Codes
Name
Guchi Boys
Color palette stuff
Package Manager Thing
Progress v2
Book Cover
New cube thingy
Rainbow
Test design stuff
Just social stuff
Isometric Stuff
Create amazing Facebook ads with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!