Moment JS usage

by DOK_UA

HTML

<script src="http://cdnjs.cloudflare.com/ajax/libs/moment.js/2.5.1/moment.min.js"></script>
<center>
<div class='time-frame'>
    <div id='date-part'></div>
    <div id='time-part'></div>
</div>
<br>

<input type='button' class = "button" id='stop-interval' value='Stop time' />
</center>

CSS

.button {
  background-color: red;
  border: none;
  color: white;
  padding: 15px 32px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
  margin: 4px 2px;
  cursor: pointer;
  text-transform: uppercase;
  font-weight: bold;
}

body {
  background-color: black;
}

.time-frame {
    background-color: #ff0000;
    color: #000;
    width: 300px;
    font-family: Arial;
}

.time-frame > div {
    width: 100%;
    text-align: center;
}

#date-part {
    font-size: 1.2em;
    color:white;
}
#time-part {
    font-size: 2em;
}

JavaScript

$(document).ready(function() {
    var interval = setInterval(function() {
        var momentNow = moment();
        $('#date-part').html(momentNow.format('YYYY MMMM DD') + ' '
                            + momentNow.format('dddd')
                             .substring(0,3).toUpperCase());
        $('#time-part').html(momentNow.format('A hh:mm:ss'));
    }, 100);
    
    $('#stop-interval').on('click', function() {
       alert("nihrena ne ostanovilos!! SKA")
    });
});