JSFiddle - React, Tailwind, and code Playground

by Sam Korn

HTML

<h2>Froggle's Food Delivery Service<br>Order Form</h2>

<div class="form">
    <form NAME="FoodOrder" ACTION="#" METHOD="POST">
        <p>
            <input TYPE="text" NAME="Time" id="clock" SIZE=2 0>
            <p>Name
                <input TYPE="text" NAME="name" SIZE=2 0>
                <br>IST Room
                <input TYPE="text" NAME="room" id="room" SIZE=3>
                <br>Food Menu:
                <br>
                <input TYPE="radio" NAME="food" value="Chilli-4.50">Chilli $4.50
                <br>
                <input TYPE="radio" NAME="food" value="Pizza-2.50">Pizza $2.50
                <br>
                <input TYPE="radio" NAME="food" value="Wedges-4.50">Wedges $4.50
                <br>
                <input TYPE="radio" NAME="food" value="Bagel-3.00">Bagel $3.00
                <br>
                <br>Drink Menu:
                <br>
                <input TYPE="radio" NAME="drink" value="Flavoured Milk-1.00">Flavoured $1.00
                <br>
                <input TYPE="radio" NAME="drink" value="Mineral Water-1.50">Mineral Water $1.50
                <br>
                <input TYPE="radio" NAME="drink" value="Ale-4.50">Ale $4.50
                <br>
                <br>
                <input TYPE=SUBMIT VALUE="Order" id="submit">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                <input TYPE=RESET VALUE="Cancel">
                <br>
    </form>
</div>

JavaScript

function validateForm(form) {
    if (isNotEmpty(form.room)) {
        if (checkName(form.name)) {

            if (validRoom(form.room)) {

                return true;
            }
        }
    }
    return false;
}

function isNotEmpty(elem) {
    var str = elem.value;
    if (str == null || str.length == 0) {
        alert("Please fill in the required fields.");
        return false;
    } else {
        return true;
    }
}

function checkName(theName) {
    if (theName.value == "") {
        alert("Name must be entered");
        return false;
    };
    if (!validName(theName.value)) {
        alert("Name should be alphabetic");
        return false;
    };
    return true;
}

function validName(theName) {
    var valid = true;
    for (var i = 0; i < theName.length; i++) {
        thisChar = theName.charAt(i);
        if (((thisChar < "A") || (thisChar > "Z")) && ((thisChar < "a") || (thisChar > "z"))) {
            return !valid;
        };
    };
    theName.charAt(0).toUpperCase();
    return valid;
}

function validRoom(theRoom) {
    var valid = true;
    if (theRoom.value == "") {
        alert("Room number must be entered");
        return !valid;
    };
    roomNumber = parseInt(theRoom.value);
    if (isNaN(roomNumber)) {
        alert("A number is required");
        return !valid;
    };
    if ((roomNumber < 100) || (roomNumber > 399)) {
        alert("Room number must be between 100 and 399");
        return !valid;
    };
    return valid;
}

function formClock() {
    var time = new Date()
    var hour = time.getHours()
    var minute = time.getMinutes()
    var second = time.getSeconds()
    var temp = "" + ((hour > 12) ? hour - 12 : hour)
    temp += ((minute < 10) ? ":0" : ":") + minute
    temp += ((second < 10) ? ":0" : ":") + second
    temp += (hour >= 12) ? " P.M." : " A.M."
    document.FoodOrder.Time.value = temp;
    setTimeout("formClock()", 1000);
}

function checkRoom(theRoom) {
    if (theRoom.value == "") {
       ...