Digital Solutions

Text Input

input.html

<!DOCTYPE html>
<html>
    <head>
        <title>Getting Input</title>
        <link rel="stylesheet" type="text/css" href="input.css">
    </head>
    <body>
        <form method="get">
            <table>
                <tr>
                    <td>Username:</td>
                    <td><input type="text" name="uname" id="txtUsername" value="Minecrafter"></td>
                </tr>
                <tr>
                    <td>Password:</td>
                    <td><input type="password" name="pword" id="txtPassword" value="Fortnite"></td> 
                </tr>
                <tr>
                    <td colspan=2>
                        <input type="button" value="Check" onclick="validate()">
                        <input type="reset">
                        <input type="submit" value="Login">
                    </td>
                </tr>
                <tr>
                  <td colspan=2 id="status"></td>
                </tr>
            </table>
        </form>
        <br>
        <script src="input.js"></script>
    </body>
</html>

input.css

body{
    background-color: ghostwhite;
}

table {
    border-collapse: collapse;
}

td {
    border: 3px solid #778899;
    text-align: left;
    padding: 5px;
}

tr:nth-child(even) {
    background-color: lavenderblush;
}

input.js

function validate(){
    var username = document.getElementById("txtUsername").value;
    var password = document.getElementById("txtPassword").value;
    
    var feedback = "";
    
    if (username != "Minecrafter"){
        feedback = feedback + "Username is incorrect.<br>";
        document.getElementById("status").style.color = "red";
    }
    
    if (password != "Fortnite"){
        feedback = feedback + "Password is incorrect.<br>";
        document.getElementById("status").style.color = "red";
    }
    
    if (feedback == ""){
        feedback = "Everything seems fine.<br>"
        document.getElementById("status").style.color = "green";
    }
    
    document.getElementById("status").innerHTML = feedback;
}

the CSS for this task uses tr:nth-child(even) to style every second row.. how does this improve the 'readability' of the table?
look at the HTML table in the source. What is the difference between tr and td? How does colspan work?
the getElementById() method looks for a corresponding, unique ID on the page. This is the most common used method in the HTML DOM. In this example I am using it to change innerHTML as well as style.color. Can you change the current values to something else?
Look at the CSS source. Explain the concept of padding using the CSS box model.