What's your password?

Shows the strength of your password

by Anatoly Kulikov

HTML

<div class="Modal">
  <h1>Registration Form</h1>
  <div class="Half">
    <form>
      <label for="login">
			<input type="text" id="login" name="login">
      <span>Full Name</span>
		</label>
      <hr>
      <label for="email">
        	<input type="email" id="email" name="email">
          <span>E-mail</span>
		</label>
      <hr>
      <label for="password">
			<input type="password" id="password" name="password">
      <span>Set you Password</span>
		</label>
    <input type="reset" value="Sign Up">
    </form>
  </div>
  <div class="Half">
    <img id="sticker" src="https://vkclub.su/_data/stickers/suspiciousowl/sticker_vk_suspiciousowl_000.png" alt="Password strength">
  </div>
</div>

SCSS

* {
    margin: 0;
    padding: 0;
    border: none;
    box-sizing: border-box;
}

body {
    display: flex;
    width: 100%;
    height: 100vh;
    align-content: center;
    align-items: center;
    justify-content: center;
    background: #fafafa;
}

.Modal {
    display: flex;
    flex-wrap: wrap;
    width: 680px;
    justify-content: space-between;
    margin: auto;
    padding: 20px;
    border-radius: 4px;
    box-shadow: #cecece 0px 0px 6px 0px;
}

h1 {
    display: block;
    width: 100%;
    margin: 0px 0px 10px;
    text-align: center;
}

.Half {
    display: block;
    width: 50%;
    padding: 5px;
}

label {
    display: flex;
    flex-wrap: wrap-reverse;
    width: 100%;
    margin-bottom: 7px;
    font-size: 18px;
    font-weight: bold;
}
label > span {
    display: block;
    width: 100%;
    margin-bottom: 4px;
    transition: all ease-in-out 0.2s;
}

hr {
    display: block;
    width: 100%;
    height: 2px;
    border: none;
    outline: none;
}

input {
    display: block;
    width: 100%;
    padding: 6px;
    border: #cecece solid 1px;
    font-size: 16px;
}

input:focus + span {
    color: #2196F3;
}

input[type=reset] {
    display: block;
    width: 100%;
    margin-top: 24px;
    padding: 6px;
    border: #2196F3 solid 1px;
    font-size: 16px;
    color: #FFFFFF;
    background: #2196F3;
    transition: all ease-in-out 0.2s;
}
input[type=reset]:hover {
    background: #1565C0;
}
input[type=reset]:active {
    background: #283593;
}

img {
    display: block;
    width: auto;
    margin-left: auto;
    margin-right: auto;
    height: 100%;
    max-height: 245px;
}

JavaScript

const IMAGES = [
  'http://vkclub.su/_data/stickers/suspiciousowl/sticker_vk_suspiciousowl_013.png',
  'http://vkclub.su/_data/stickers/suspiciousowl/sticker_vk_suspiciousowl_006.png',
  'http://vkclub.su/_data/stickers/suspiciousowl/sticker_vk_suspiciousowl_003.png',
  'http://vkclub.su/_data/stickers/suspiciousowl/sticker_vk_suspiciousowl_007.png'
];
$(function() {
  const $pwdInput = $('#password');
  const $sticker = $('#sticker');
  $pwdInput.on('input', function(e) {
    const length = this.value.length;
    if (length < 4) {
      $sticker.attr('src', IMAGES[0]);
    }
    if (length >= 4 && length < 8) {
      $sticker.attr('src', IMAGES[1]);
    }
    if (length >= 8 && length < 13) {
      $sticker.attr('src', IMAGES[2]);
    }
    if (length >= 13) {
      $sticker.attr('src', IMAGES[3]);
    }
  });
})