ZYQxPm

index.html

<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>

script.js

(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;
    }
})();

style.css

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;
}

ZYQxPm.markdown

ZYQxPm

A Pen by Stephen Davies on CodePen.

License.