Skip to content

Instantly share code, notes, and snippets.

@pranid

pranid/moment-clock.html

Created August 16, 2016 06:35
Show Gist options
  • Save pranid/c4384d9c738b08800741c084955c53d8 to your computer and use it in GitHub Desktop.
Save pranid/c4384d9c738b08800741c084955c53d8 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
moment-clock.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="description" content="Moment JS clock for beginners.">
<meta name="keywords" content="HTML,CSS,MOMENT, JAVASCRIPT, JQUERY, CLOCK, TIME">
<meta name="author" content="Praneeth Nidarshan">
<title>MOMENT CLOCK</title>
<script src="https://code.jquery.com/jquery-2.2.4.min.js" integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44=" crossorigin="anonymous"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.14.1/moment.min.js"></script>
<script type="text/javascript">
$(function() {
datetime = $('.time h1');
datetime2 = $('.time p');
clockInit();
});
var clockInit = function() {
setInterval(function(){
date = moment(new Date());
datetime.html(date.format('HH:mm:ss'));
datetime2.html(date.format('dddd, MMMM Do YYYY'));
}
, 100);
};
</script>
<style type="text/css">
body{
font-family: cursive;
padding:0em 3em;
background-color: #AD1457;
}
body > h1{
margin: 0px;
color:#ECEFF1;
text-align: center;
padding-bottom: 0.5em;
}
.time{
width: auto;
margin: 0 auto;
background-color: #C2185B;
color: #fafafa;
padding: 1em;
text-align: center;
}
.time h1{
font-size: 5em;
margin: 0;
text-shadow: 1px 10px 14px #AD1457;
}
.time p{
margin: 0;
font-size: 2em;
text-shadow: 1px 10px 14px #AD1457;
}
.container {
width:100%;
padding:0.7em;
}
.col{
width: 45%;
height: auto;
padding: 0.2em 0.7em;
float: left;
background-color: #212121;
margin: 15px;
}
pre{
color:#7CB342;
white-space: pre-wrap;
white-space: -moz-pre-wrap;
white-space: -o-pre-wrap;
word-wrap: break-word;
}
pre .comment{
color:#fff;
}
.tag{
background-color: aliceblue;
float: right;
position: absolute;
padding: 0 1.5em;
color: #212121;
margin-left: -15px;
}
</style>
</head>
<body>
<h1>MOMENT JS CLOCK FOR BEGINNERS</h1>
<div class="time">
<h1></h1>
<p></p>
</div>
<div class="container">
<div class="col">
<span class="tag">JAVASCRIPT</span>
<pre>
<code>
$(function() {
var time = $('.time h1');
var date = $('.time p');
<span class="comment">// INITIALIZING CLOCK</span>
clockInit();
});
<span class="comment">// CLOCK INIT FUNCTION</span>
var clockInit = function() {
setInterval(function(){
date = moment(new Date());
time.html(date.format('HH:mm:ss'));
date.html(date.format('dddd, MMMM Do YYYY'));
}, 100);
};
</code>
</pre>
</div>
<div class="col">
<span class="tag">CSS</span>
<pre>
<code>
.time{
width: auto;
margin: 0 auto;
background-color: #C2185B;
color: #fafafa;
padding: 1em;
text-align: center;
}
.time h1{
font-size: 5em;
margin-bottom: 0;
text-shadow: 1px 10px 14px #AD1457;
}
.time p{
margin-top: 0;
margin-bottom: 3em;
font-size: 2em;
text-shadow: 1px 10px 14px #AD1457;
}
</code>
</pre>
</div>
</div>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment