Found a really good code from jsfiddle, http://jsfiddle.net/ivangrs/zf80q3nh/ for my project posted here on stackoverflow, but I'm unable to see anything appear upon implementing the code after grabbing it from the site! Help please?
Here's the code I copied
HTML:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" href="css/style.css" />
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css">
<script src="http://code.jquery.com/jquery-1.11.2.min.js"></script>
<script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/moment.js/2.7.0/moment.min.js" type="text/javascript"></script>
<script src="js/javascript.js"></script>
</head>
<body>
<div class='time-frame'>
<div id='time-part'></div>
<div id='date-part'></div>
</div>
<br>
</body>
</html>
javascript.js:
$(document).ready(function() {
var interval = setInterval(function() {
var momentNow = moment();
$('#time-part').html(momentNow.format(' hh:mm:ss a'))
$('#date-part').html(momentNow.format('dddd').substring(0, 8) + ' ' + momentNow.format('DD MMMM YYYY'));
});
$('#stop-interval').on('click', function() {
clearInterval(interval);
});
});
style.css CSS:
.time-frame {
color: #000;
width: 500px;
font-family: Arial;
}
.time-frame > div {
width: 100%;
text-align: center;
background-color: red;
}
#date-part {
font-size: 1.2em;
}
#time-part {
font-size: 2em;
}
#demo {
background-color: red;
font-family: Arial;
}
#demonew {
background-color: green;
font-family: Arial;
}
UPDATE: Ive implemented the changes as suggested by @below the radar but the time does not appear, only the stop time button does.
you forgot a duration for the setInterval function in your javascript.js
you forgot the input for the stop button in your body: