JSFiddle - React, Tailwind, and code Playground

by kougiland

HTML

<header>
    <nav>
        <ul>
            <li><a>Home</a></li>
            <li><a>Blog</a></li>
            <li><a>Lab</a></li>
            <li><a>Contact</a></li>
        </ul>
    </nav>
</header>

<input placeholder="Enter your password" type="password" id="password" name="password" />

CSS

*{box-sizing:border-box;margin:0;padding:0}
:root{background: #e7e7e7}
header{height:100px;background:white;position:relative;}
nav{position:absolute;bottom:0;text-align:center}
nav ul{margin:0 auto;width:100%;max-width:480px}
nav li{float:left;list-style:none}
nav a{color: #545454;padding:16px 12px;background: #f5f5f5;}

JavaScript

(function() {
  var container = document.getElementById('container');

  var eightPlus = document.getElementById('eight-plus');
  var uppercase = document.getElementById('uppercase');
  var lowercase = document.getElementById('lowercase');
  var numbers = document.getElementById('numbers');
  var punctuation = document.getElementById('punctuation');
  var matchesPassword = document.getElementById('matches-password');

  var passwordSubmitBtn = document.getElementById('password-submit');
  var passwordInput = document.getElementById('password');
  var passwordForm = document.getElementById('new-password');

  var verifyPasswordSubmitBtn = document.getElementById('verify-password-submit');
  var verifyPasswordInput = document.getElementById('verify-password');
  var verifyPasswordForm = document.getElementById('verify-new-password');
  var goBack = document.getElementById('go-back');

  var allDone = document.getElementById('all-done');

  var containsUppercase = /[A-Z]/;
  var containsLowercase = /[a-z]/;
  var containsNumbers = /[0-9]/;
  var containsPunctuation = /[^\w\s]|_/;

  passwordInput.addEventListener('input', function() {

    var value = passwordInput.value;

    // More than 8 characters
    if (value.length >= 8)
      eightPlus.classList.add('complete');
    else
      eightPlus.classList.remove('complete');

    // Contains uppercase
    if (containsUppercase.test(value))
      uppercase.classList.add('complete');
    else
      uppercase.classList.remove('complete');

    // Contains lowercase
    if (containsLowercase.test(value))
      lowercase.classList.add('complete');
    else
      lowercase.classList.remove('complete');

    // Contains numbers
    if (containsNumbers.test(value))
      numbers.classList.add('complete');
    else
      numbers.classList.remove('complete');

    // Contains punctuation
    if (containsPunctuation.test(value))
      punctuation.classList.add('complete');
    else
     ...