JSFiddle - React, Tailwind, and code Playground

by prasad raja

HTML

<script src="https://code.jquery.com/jquery-3.5.0.js"></script>
      <table border="1" style="border-collapse:collapse;" width="100%">
            <thead class="btn-primary">
                <tr class="table-prima1ry">
                    <th>Day</th>


                    <th>Start Time</th>

                    <th>End Time</th>

                    <th colspan="2" class="text-center">Break 1</th>

                    <th colspan="2" class="text-center">Break 2</th>

                    <th colspan="2" class="text-center">Break 3</th>

                    <th>Total Shift Hrs</th>
                    <th>Total Shift Excl Break</th>

                </tr>
            </thead>
            <tbody>

                <tr dayno="0">
                    <td class="shift-day-name">
                        <span>
                            Sunday
                        </span>
                    </td>

                    <td class="form-group mb-0">
                        <input placeholder="00:00" class="form-control validate-time shift_starttime" data-validate-time="true" />
                    </td>
                    <td class="form-group mb-0">
                        <input placeholder="00:00" class="form-control validate-time shift_endtime" data-validate-time="true" />
                    </td>

                    <td class="form-group mb-0">
                        <input placeholder="00:00" class="form-control validate-time break1_starttime" data-validate-time="true" />
                    </td>
                    <td class="form-group mb-0">
                        <input placeholder="00:00" class="form-control validate-time break1_endtime" data-validate-time="true" />
                    </td>

                    <td class="form-group mb-0">
                        <input placeholder="00:00" class="form-control validate-time break2_starttime" data-validate-time="true" />
                    </td>
                    <td class="form-group mb-0">
      ...

CSS

.validate-time-invalid {
        border: 2px solid #f46a6a;
    }

    .in_validate_break_time {
        border: 2px solid yellow !important;
    }

JavaScript

$(function () {
        shift.init();
    });
    let shift = {
        init: function () { 
            shift.commonevent();
        },
        commonevent: function () {

            //validatetime
            $("[data-validate-time=true]").focusout(function (event) {
                let current = $(this);
                let value = current.val();
                let isValid = shift.isValidate24HourTime(value);
                current.removeClass("validate-time-invalid");
                if (isValid == false) {
                    current.val("");
                    current.addClass("validate-time-invalid");
                }
                //console.log("The time is ", isValid, ", the value entered:", value);
            });
              
            $("#btnvalidateshifttiming").click(function (e) {
                e.preventDefault();                
                let validateTime = shift.validateShiftDetails();
            });
        },
        validateStartAndEndTime: function (fromTimeElement, toTimeElement) {

            let timeStatus = false;

            //shift start and end time
            let startTimeEl = fromTimeElement;
            let endTimeEl = toTimeElement;

            startTimeEl.removeClass("validate-time-invalid");
            endTimeEl.removeClass("validate-time-invalid");

            //validate start time
            if (shift.isValidate24HourTime(startTimeEl.val()) == false) {
                startTimeEl.addClass("validate-time-invalid");
            }
            //validate end time
            if (shift.isValidate24HourTime(endTimeEl.val()) == false) {
                endTimeEl.addClass("validate-time-invalid");
            }
            //   console.log("Start time status:", shift.isValidate24HourTime(startTimeEl.val()), startTimeEl.val(), ", End time status:", endTimeEl.val(), shift.isValidate24HourTime(endTimeEl.val()));
            if (shift.isValidate24HourTime(startTimeEl.val()) == true &&...