JSFiddle - React, Tailwind, and code Playground

by pdavis68

HTML

<table class="workspacetable">
    <thead><tr><th>&nbsp;</th><th>Sun</th><th>Mon</th><th>Tue</th><th>Wed</th><th>Thu</th><th>Fri</th><th>Sat</th><th>Total</th></tr></thead>
    <tr><td>Regular</td><td><input type="text" data-bind="value: RegSun" class="timesheethours" /></td><td><input type="text" data-bind="value: RegMon" class="timesheethours" /></td><td><input type="text" data-bind="value: RegTue" class="timesheethours" /></td><td><input type="text" data-bind="value: RegWed" class="timesheethours" /></td><td><input type="text" data-bind="value: RegThu" class="timesheethours" /></td><td><input type="text" data-bind="value: RegFri" class="timesheethours" /></td><td><input type="text" data-bind="value: RegSat" class="timesheethours" /></td><td><span data-bind="text: Number(RegTot())">&nbsp;</span></td></tr>
    <tr><td>Holiday</td><td><input type="text" data-bind="value: HolSun" class="timesheethours" /></td><td><input type="text" data-bind="value: HolMon" class="timesheethours" /></td><td><input type="text" data-bind="value: HolTue" class="timesheethours" /></td><td><input type="text" data-bind="value: HolWed" class="timesheethours" /></td><td><input type="text" data-bind="value: HolThu" class="timesheethours" /></td><td><input type="text" data-bind="value: HolFri" class="timesheethours" /></td><td><input type="text" data-bind="value: HolSat" class="timesheethours" /></td><td><span data-bind="text: HolTot">&nbsp;</span></td></tr>
    <tr><td><b>Total</b></td><td><span data-bind="text: TotSun">&nbsp;</span></td><td><span data-bind="text: TotMon">&nbsp;</span></td><td><span data-bind="text: TotTue">&nbsp;</span></td><td><span data-bind="text: TotWed">&nbsp;</span></td><td><span data-bind="text: TotThu">&nbsp;</span></td><td><span data-bind="text: TotFri">&nbsp;</span></td><td><span data-bind="text: TotSat">&nbsp;</span></td><td><span data-bind="text: TotTot">&nbsp;</span></td></tr>
</table>

CSS

.workspacetable {
    margin-left: 5px;
    border: solid;
    border-color: black;
    border-width: 1px;
}

    .workspacetable input {
        margin: 0;
    }

.workspacetable th, td {
    padding: 3px;
    border: solid;
    border-color: black;
    border-width: 1px;
}

.timesheethours {
    width: 25px;
}

JavaScript

var ViewModel = function() {
    self = this;
    this.RegSun = ko.observable(0);
    this.RegMon = ko.observable(0);
    this.RegTue = ko.observable(0);
    this.RegWed = ko.observable(0);
    this.RegThu = ko.observable(0);
    this.RegFri = ko.observable(0);
    this.RegSat = ko.observable(0);
    this.HolSun = ko.observable(0);
    this.HolMon = ko.observable(0);
    this.HolTue = ko.observable(0);
    this.HolWed = ko.observable(0);
    this.HolThu = ko.observable(0);
    this.HolFri = ko.observable(0);
    this.HolSat = ko.observable(0);
   
    this.RegSun.extend({ required: true, min: 0, max: 24 });
    this.RegMon.extend({ required: true, min: 0, max: 24 });
    this.RegTue.extend({ required: true, min: 0, max: 24 });
    this.RegWed.extend({ required: true, min: 0, max: 24 });
    this.RegThu.extend({ required: true, min: 0, max: 24 });
    this.RegFri.extend({ required: true, min: 0, max: 24 });
    this.RegSat.extend({ required: true, min: 0, max: 24 });
    this.HolSun.extend({ required: true, min: 0, max: 24 });
    this.HolMon.extend({ required: true, min: 0, max: 24 });
    this.HolTue.extend({ required: true, min: 0, max: 24 });
    this.HolWed.extend({ required: true, min: 0, max: 24 });
    this.HolThu.extend({ required: true, min: 0, max: 24 });
    this.HolFri.extend({ required: true, min: 0, max: 24 });
    this.HolSat.extend({ required: true, min: 0, max: 24 });
    
    this.RegTot = ko.computed(function() {
        return self.RegSun() + self.RegMon() + self.RegTue() + self.RegWed() + self.RegThu() + self.RegFri() + self.RegSat();
    });
    this.HolTot = ko.computed(function() {
        return self.HolSun() + self.HolMon() + self.HolTue() + self.HolWed() + self.HolThu() + self.HolFri() + self.HolSat();
    });
    this.TotSun = ko.computed(function() {
        return self.RegSun() + self.HolSun();
    });
    this.TotMon = ko.computed(function() {
        return self.RegMon() + self.HolMon();
    });
    this.TotTue =...