Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
ZYQxPm
<div class="container">
<div class="fs1">
<fieldset>
<legend>Enter hour (1-12)</legend>
<input type="text" class="th" id="twelveHour" name="twelveHour" palceholder="enter your 12 hour number" />
<button class="btn">Get 24 Hour</button>
</fieldset>
</div>
<div class="fs2">
<fieldset>
<legend>Choose Am / Pm</legend>
<input type="radio" name="apm" value="am" checked="true" />: am
<input type="radio" name="apm" value="pm" />: pm
</fieldset>
</div>
<div id="final">Result: <span id="twentyfourHour"></span></div>
</div>
(function () {
'use strict';
var otp = document.getElementById('twentyfourHour'),
btn = document.getElementsByClassName('btn')[0],
ampm = document.getElementsByName("apm");
function getPM() {
var p = false;
[].forEach.call(ampm, function (i) {
if (i.checked) {
if (i.value === 'pm') {
p = true;
}
}
});
return p;
}
btn.onclick = function () {
var inp = document.getElementById('twelveHour').value,
tw4 = '';
if (inp) {
tw4 = get24Rep(inp);
otp.innerHTML = '<span class="up">' + tw4 + '</span>';
} else {
otp.innerHTML = '<span class="up">empty!</span>';
}
};
function get24Rep(tw) {
var t4;
if(/\D/ig.test(tw)) {
return 0;
}
if(tw) {
tw = Math.floor(+tw);
}
if (getPM()) {
if (+tw === 0 || +tw === 12) {
t4 = '12:00';
} else {
t4 = (+tw + 12).toString() + ':00';
}
} else {
if (+tw === 12) {
t4 = '00:00';
} else {
if( tw.toString().split('').length === 2){
t4 = tw+':00';
} else {
t4 = '0' + tw + ':00';
}
}
}
return t4;
}
})();
body {
background-color: black;
margin-top:5%;
margin-left:35%;
text-align:center;
}
body input[type="text"] {
background-color:#ecf0f1;
color:#2c3e50;
padding:5px;
font-size: 16px;
border:1px solid #2980b9;
}
.btn {
background-color:#3498db;
font-size: 16px;
padding:5px;
color:#ecf0f1;
border:1px solid #ecf0f1;
}
.container {
width:400px;
height:180px;
padding:15px;
background-color:#3498db;
color: #ecf0f1;
font-family:'sans-serif';
border:1px solid #bdc3c7;
}
legend {
font-weight:600;
color:#ecf0f1;
}
body fieldset {
border: 0;
}
.up {
color:#ecf0f1;
!important font-style: italic;
font-weight:bold;
font-size:18px;
}
#final {
margin-top:10px;
margin-left:18px;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment