Regex for input

by dunerunner

HTML

<input id="dataInput" type="text"></input>
<button id="submitData">Send</button>
<div id="savedData"> <span id="measureDate"></span>

    <ul id="measurements">
    </ul>
</div>

CSS

.invalid {
    border:1px solid red;
}

JavaScript

$(document).ready(function () {
    var inputRegex = /^([0-9]{1}\.[0-9]{2})$/;
    var data = {
        values: []
    };
    $('#submitData').attr('disabled', true);

    function retrieveDataFromStorage() {
        var savedData = window.localStorage.getItem('measurements');
        if (savedData) {
            data = JSON.parse(savedData);
            $('#measureDate').html(data.date);
            var list = $('#measurements');
            data.values.forEach(function (element) {
                list.append('<li>' + element.value + '<span>' + element.time + '</span></li>');
            });
        }
    }
    $('#dataInput').on('change paste keyup', function () {
        var value = $(this).val();
        if (value.length > 4) {
            console.log(value.length);
            $(this).addClass('invalid');
            $('#submitData').attr('disabled', true);
            return;
        }
        var result = inputRegex.test(parseFloat(value).toFixed(2));
        if (result) {
            $(this).removeClass('invalid');
        } else {
            $(this).addClass('invalid');
        }
        $('#submitData').attr('disabled', !result);
    });
    $('#submitData').on('click', function () {
        var date = new Date();
        data.date = data.date || date.getDate() + '.' + date.getMonth() + '.' + date.getFullYear();
        $('#measureDate').html(data.date);
        var time = date.getHours() + ':' + date.getMinutes();
        var value = parseFloat($('#dataInput').val());
        if (data.values.length < 4) {
            var toAdd = {
                time: time,
                value: value
            };
            data.values.push(toAdd);
            $('#measurements').append('<li>' + value + ' <span>' + time + '</span></li>');
            window.localStorage.setItem('measurements', JSON.stringify(data));
        }
        console.log(data);
    });
});