js-pass1.html

<style>
    .tutorial-wrapper{
        width: 100%;
    }
    .tutorial-wrapper form{
        background-color: #ffc;
        border: 1px solid #cc9;
        padding: 10px;
        font-family: verdana;
        width: 75%;
        font-size: 1em;
    }
    .field-wrapper{
        margin: 2px 0 2px 0;
        padding: 0;
    }
    .tutorial-wrapper label{
        float: left;
        text-align: right;
        margin: 0 5px 0 0;
        width: 30%;
    }
    .tutorial-wrapper input{
        width: 200px;
        border: 1px solid #cc9;
    }
    .confirm-message{
        margin: 0;
        padding: 0;
        font-size: .8em;
    }
</style>
<script type="text/javascript">
function checkPass()
{
    //Store the password field objects into variables ...
    var password = document.getElementById('password2');
    var confirm  = document.getElementById('confirm2');
    //Store the Confirmation Message Object ...
    var message = document.getElementById('confirm-message2');
    //Set the colors we will be using ...
    var good_color = "#66cc66";
    var bad_color  = "#ff6666";
    //Compare the values in the password field 
    //and the confirmation field
    if(password.value == confirm.value){
        //The passwords match. 
        //Set the color to the good color and inform
        //the user that they have entered the correct password 
        confirm.style.backgroundColor = good_color;
        message.style.color           = good_color;
        message.innerHTML             = '<img src="/wp-content/uploads/2019/04/tick.png" alt="Passwords Match!">';
    }else{
        //The passwords do not match.
        //Set the color to the bad color and
        //notify the user.
        confirm.style.backgroundColor = bad_color;
        message.style.color           = bad_color;
        message.innerHTML             = '<img src="/wp-content/uploads/2019/04/publish_x.png" alt="Passwords Do Not Match!">';
    }
}  
</script>
<div class="tutorial-wrapper">
    <form>
        <div class="field-wrapper">
            <label for="password2">Password:</label>
            <input type="password" name="password" id="password2" onkeyup="checkPass();">
        </div>
        <div class="field-wrapper">
            <label for="confirm2">Confirm Password:</label>
            <input type="password" name="confirm" id="confirm2" onkeyup="checkPass();">
            <span id="confirm-message2" class="confirm-message"></span>
        </div>
    </form>
</div>