Untitled

<html>

<head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>Exercise 14 | Activity 1</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <style>
        body {
            padding: 50px;
        }

        table,
        td,
        tr {
            border: none;
        }

    </style>
</head>

<body>

    <h1>DIGITAL CLOCKS</h1>
    <p>Create a web page that contains a digital clock at the top right corner, it should be in 24 hrs. Format </p>


    <form id="form1">
        <table id="t1">
            <tr>
                <td>
                    <label for="usname">Username</label>
                </td>
                <td>
                    <input type="text" name="username" id="usname">
                </td>
                <td id="uerr" class="err">
                </td>
            </tr>
            <tr>
                <td>
                    <label for="pass">Password</label>
                </td>
                <td>
                    <input type="Password" name="pass" id="pass">
                </td>
                <td rowspan="2" id="perr" class="err">

                </td>
            </tr>
            <tr>
                <td>
                    <label for="cpass">Confirm Password</label>
                </td>
                <td>
                    <input type="Password" name="cpass" id="cpass">
                </td>
                <td>
                </td>
            </tr>
            <tr>
                <td>
                    <label for="gender">Gender</label>
                </td>
                <td>
                    <input type="radio" name="gender" id="male" value="male">Male
                    <br>
                    <input type="radio" name="gender" id="female" value="female">Female
                </td>
                <td id="gerr" class="err">
                </td>
            </tr>
            <tr>
                <td>
                    <label for="dob">Date Of Birth</label>
                </td>
                <td>
                    <input type="date" id="dob" name="dob">
                </td>
                <td id="derr" class="err">
                </td>
            </tr>
            <tr>
                <td>
                    <label for="courses">Courses Completed</label>
                </td>
                <td>
                    <input type="checkbox" name="DBMS" id="DBMS" value="DBMS">DBMS
                    <br>
                    <input type="checkbox" name="SE" id="SE" value="SoftwareEngineering">Software Engineering
                    <br>
                    <input type="checkbox" name="OS" id="OS" value="Operating Systems">Operating Systems
                </td>
                <td id="cerr" class="err">
                </td>
            </tr>
            <tr>
                <td>
                    <label for="country">Select Country</label>
                </td>
                <td>
                    <select id="country">
                        <option value="none">--</option>
                        <option value="US">US</option>
                        <option value="India">India</option>
                        <option value="UK">UK</option>
                    </select>
                </td>
                <td id="crerr" class="err">
                </td>
            </tr>
            <tr>
                <td>
                </td>
                <td>
                    <button onclick="validate();">Submit</button>
                </td>
            </tr>
        </table>
    </form>


</body>


<script>

    function validate() {

        var username = document.getElementById("usname").value;
        if (username == "") {
            document.getElementById("uerr").innerHTML = "Username Should not be Empty";
            // return false;
        }
        if (username.length < 8) {
            document.getElementById("uerr").innerHTML = "Username Should be Minimum 8 characters";
            // return false;
        }
        var pass = document.getElementById("pass").value;
        var cpass = document.getElementById("cpass").value;
        if (pass == "") {
            document.getElementById("perr").innerHTML = "Password Should not be Empty";
            // return false;
        }
        if (cpass == "") {
            document.getElementById("perr").innerHTML = "Confirm Password Should not be Empty";
            // return false;
        }
        if (pass != cpass) {
            document.getElementById("perr").innerHTML = "Passwords don't match";
            // return false;
        }
        var male = document.getElementById("male").checked;
        var female = document.getElementById("female").checked;
        if (male == false && female == false) {
            document.getElementById("gerr").innerHTML = "Select Gender";
            // return false;
        }

        var dob = new Date();
        dob = document.getElementById("dob").value;
        if (dob == "") {
            document.getElementById("derr").innerHTML = "Select Date of Birth";
            // return false;
        }

        var dbms = document.getElementById("DBMS").checked;
        var os = document.getElementById("OS").checked;
        var se = document.getElementById("SE").checked;
        if (dbms == false && os == false && se == false) {
            document.getElementById("cerr").innerHTML = "Select Courses";
            // return false;
        }
        var country = document.getElementById("country").selectedIndex;
        if (country == 0) {
            document.getElementById("crerr").innerHTML = "Select Country";
            // return false;
        }

        // return true;
    }

</script>

</html>