moment to time tick

by leotwot

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.22.2/moment.min.js"></script>
<div class="box-content" style="min-height:300px;">
<h3 class="page-header">Timestamp Converter</h3>

<h5>Enter a Date &amp; Time:</h5>
        <p>
          <input style="width:5em;" class="form-control year" name="y" type="text" id="y" size="4" maxlength="4" placeholder="YYYY">
-
          <input style="width:3em;" class="form-control month" name="m" type="text" id="m" size="2" maxlength="2" placeholder="MM">
-
          <input style="width:3em;" class="form-control day" name="d" type="text" id="d" size="2" maxlength="2" placeholder="DD">
          @
          <input style="width:3em;" class="form-control hour" name="hours" type="text" id="m22" value="0" size="2" maxlength="2" placeholder="HH">
          :
          <input style="width:3em;" class="form-control minute" name="min" type="text" id="min" value="0" size="2" maxlength="2" placeholder="MM">
          :
          <input style="width:3em;" class="form-control second" name="sec" type="text" id="sec" value="0" size="2" maxlength="2" placeholder="SS">
          (24h:min:sec) </p>
<h5>Enter a Timestamp:</h5>
        <p>
          <input class="form-control result" type="text" name="timestamp" id="timestamp" placeholder="1415463675">
        </p>
          <button class="btn btn-primary convert" name="Submit" value="Convert"  style="vertical-align: top;"><span class="glyphicon glyphicon-arrow-right"></span> Convert</button>

			</div>

CSS

box-content {
    position: relative;
    -webkit-border-radius: 0 0 3px 3px;
    -moz-border-radius: 0 0 3px 3px;
    border-radius: 0 0 3px 3px;
    padding: 15px;
    background: #FCFCFC;
}
* {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}
user agent stylesheet
div {
    display: block;
}
body {
    background-color: #F5F5F5;
    font-family: Roboto,sans-serif;
    font-weight: 400;
    margin-bottom: 150px;
    margin-top: 50px;
    padding-top: 0;
}
body {
    font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
    font-size: 14px;
    line-height: 1.42857143;
    color: #333;
    background-color: #fff;
}
html {
    font-size: 10px;
    -webkit-tap-highlight-color: rgba(0,0,0,0);
}
html {
    font-family: sans-serif;
    -webkit-text-size-adjust: 100%;
    -ms-text-size-adjust: 100%;
}
:after, :before {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}
:after, :before {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

JavaScript

$(document).ready(function(){
	const year = $('.year');
	const month = $('.month');
  const day = $('.day');
	const hour = $('.hour');
  const minute = $('.minute');
	const second = $('.second');
  
  const result = $('.result');
  
  const btnConvert = $('.convert');
  
  btnConvert.on("click", function() {
  	var timetick = moment(`${year.val()}/${month.val()}/${day.val()} ${hour.val()}:${minute.val()}:${second.val()}`);
    result.val(timetick.unix());
  });

});