working password validation

HTML

<div>
              <label for="username">Username</label>
              <input size="30" placeholder="username" name="username" id="username" onblur="validateName(username)type="text">
          </div>
           
          <div>
              <label for="password">Password</label>
              <input size="30" required="required" placeholder="password" name="pwd1" id="pwd1" type="password"> 
                 <span class="hint" id="pwd1Hint">Password must be at least 8 characters.</span>
          </div>
          <div>
              <label for="password">Repeat Password</label>
              <input size="30" required="required" placeholder="password" name="pwd2" id="pwd2" type="password"> 
              
                 <span class="hint" id="pwd2Hint">Passwords must match</span>
                 <button type="submit">submit</button>
          </div>

CSS

.hint {
	display:none;
	color:red;
}
.red {
    color: red;
    display:inline-block;
}
.pass {
    color: #66cc66;
    display:block;
}

JavaScript

/*-------------------------------------------------------------------------------------------------
	PASSWORD
	-------------------------------------------------------------------------------------------------*/

    var pwd1 = document.getElementById("pwd1");
    var pwd2 = document.getElementById("pwd2");

    //var success = "#66cc66";
    
    pwd1.addEventListener("keyup", function(){
        // pwd1 must have at least 8 characters
        if (pwd1.value.length < 8) {
           pwd1Hint.setAttribute('class', 'red');
           pwd1Hint.innerHTML = "Your password must be at least 8 characters.";            
        }
        // success
        if (pwd1.value.length >= 8) {
            //pwd1Hint.setAttribute('class', 'pass');
            pwd1Hint.innerHTML = "";
        }
    });
    
    pwd2.addEventListener("keyup", function(){
        // compare the values in the password fields
        if(pwd1.value != pwd2.value){
            //The passwords do not match
            pwd2Hint.setAttribute('class', 'red');
            pwd2Hint.innerHTML = "Your passwords must match";
            
        } else {
            //The passwords match
           //pwd2Hint.setAttribute('class', 'pass');
           pwd2Hint.innerHTML = "";
        }
    });