Emoji Clock

Developer
Thepheer
Size
2,336 Kb
Views
30,360
  1. Emoji Clock Previews
  2. Emoji Clock HTML Codes
  3. Emoji Clock CSS Codes
  4. Emoji Clock JS Codes

How do I make an emoji clock?

What is a emoji clock? How do you make a emoji clock? This script and codes were developed by Thepheer on 30 December 2022, Friday.

Emoji Clock Previews
IQ Test

Emoji Clock - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Emoji Clock</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <template id='Clock'>	<div class='clock'>	<div class='emoji' :style='style'>{{ emoji | fromCode }}</div>	<div class='caption'><slot>Time Now</slot></div>	</div>
</template>
<main v-cloak>	<Clock tz='America/New_York'>New York</Clock>	<Clock tz='Europe/London'>London</Clock>	<Clock tz='Asia/Tokyo'>Tokyo</Clock>	<Clock>Local Time</Clock>
</main> <script src='https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.18.1/moment.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/moment-timezone/0.5.13/moment-timezone-with-data.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/vue/2.4.3/vue.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

Emoji Clock - Script Codes CSS Codes

@import url('//fonts.googleapis.com/css?family=Josefin+Sans:700');
html {	display: table;	width: 100%;	height: 100%;
}
body {	display: table-cell;	vertical-align: middle;	text-align: center;	background: #FF4136;
}
.clock {	overflow: hidden;	display: inline-block;	vertical-align: top;	font: 2vw 'Josefin Sans';
}
.clock .emoji {	display: inline-block;	font-size: 6em;	line-height: 1.25em;	padding-top: 0.2em;
}
.clock .caption {	text-transform: uppercase;
}
[v-cloak] {	display: none;
}

Emoji Clock - Script Codes JS Codes

const Clock = Vue.extend({	template: '#Clock',	props: {	tz: { default: moment.tz.guess() }	},	data: () => ({	t: 0	}),	computed: {	emoji: ({ t }) => 0x1F550 + (0 | t/12 + t*11 + 11) % 12,	style: ({ t }) => `transform: rotate(${t*30 % 360}deg)`	},	methods: {	tick() {	const m = moment().tz(this.tz);	this.t = m.hours()*12 + m.minutes()/5 | 0;	setTimeout(() => this.tick(), 3e5 - m%3e5);	}	},	created() {	this.tick();	},	filters: {	fromCode: String.fromCodePoint	}
});
const App = Vue.extend({	components: { Clock }
});
new App({ el: 'main' });
Emoji Clock - Script Codes
Emoji Clock - Script Codes
Home Page Home
Developer Thepheer
Username thepheer
Uploaded December 30, 2022
Rating 3
Size 2,336 Kb
Views 30,360
Do you need developer help for Emoji 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!

Thepheer (thepheer) Script Codes
Name
Audio Visualiser
100 000 particles
WebGL shader video processing
Magnetic Field
Radix Converter
A Pen by thepheer
Braille
Color Wheel
Filters
Fluid Cube
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!