<div class="wrap">
    <div class="group">
        <input type="password" id="pas">
        <label for="pas">Password</label>
        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 80 80">
            <path d="M39.5 49.5C31.688 49.5 25 42.258 25 40c0-1.862 6.514-9.5 14.5-9.5S54 38.138 54 40c0 2.661-6.894 9.5-14.5 9.5zm-12.491-9.453c.319 1.366 5.78 7.453 12.491 7.453 6.804 0 12.234-6.101 12.493-7.461-.436-1.315-5.808-7.539-12.493-7.539-6.553 0-12 6.208-12.491 7.547z" />
            <path d="M39.5 45.5c-3.033 0-5.5-2.467-5.5-5.5s2.467-5.5 5.5-5.5c3.032 0 5.5 2.467 5.5 5.5s-2.468 5.5-5.5 5.5zm0-9c-1.93 0-3.5 1.57-3.5 3.5s1.57 3.5 3.5 3.5S43 41.93 43 40s-1.57-3.5-3.5-3.5z" /></svg>
    </div>
    <div class="tips">
        <p>At least one <span class="upper">uppercase letter,</span> <span class="number">one number</span></p>
        <div class="count">
            <span class="from">0</span>/<span>6</span>
        </div>
    </div>
</div>









<!-- github  -->
<a href="https://github.com/alikinvv/password-check" target="_blank" class="github-corner" aria-label="View source on GitHub"><svg width="80" height="80" viewBox="0 0 250 250" style="fill:#151513; color:#F6F6F7; position: absolute; top: 0; border: 0; right: 0;" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a><style>.github-corner:hover .octo-arm{animation:octocat-wave 560ms ease-in-out}@keyframes octocat-wave{0%,100%{transform:rotate(0)}20%,60%{transform:rotate(-25deg)}40%,80%{transform:rotate(10deg)}}@media (max-width:500px){.github-corner:hover .octo-arm{animation:none}.github-corner .octo-arm{animation:octocat-wave 560ms ease-in-out}}</style>

html, body {
	height: 100%;
}

body {
	font-family: 'Roboto', sans-serif;
	background: #F6F6F7;
	display: flex;
	align-items: center;
	justify-content: center;
	color: #a3b1c0;
}

.wrap {
	background: #fff;
	border-radius: 10px;
	padding: 39px 45px 19px;

	.tips {
		font-size: 14px;
		display: flex;
		align-items: center;
		padding: 10px 0;

		p {
			margin-bottom: 0;
			margin-top: 0;
			margin-right: 60px;
		}
	}

	.group {
		position: relative;
		padding-bottom: 5px;

		&::before {
			content: '';
			position: absolute;
			bottom: 0;
			left: 0;
			width: 100%;
			height: 2px;
			background: #edf0f5;
			transition: all .15s ease-in-out;
			z-index: 1;
		}
		
		&.active {
			label {
				top: -15px;
				font-size: 14px;
			}
			
			&::before {
				background: #6884dd;
			}
		}	
	}

	svg {
		width: 70px;
		position: absolute;
		top: -21px;
		right: -20px;
		fill: #c5d6e7;
		cursor: pointer;
		transition: all .2s ease-in-out;

		&.active {
			fill: #428bfa;
		}
	}

	label {
		position: absolute;
		top: 5px;
		left: 0;
		transition: all .15s ease-in-out;
		pointer-events: none;
	}

	.number {
		transition: all .2s ease-in-out;
		
		&.active {
			color: #428bfa;
		}
	}

	.count {
		transition: all .2s ease-in-out;
		
		&.active {
			color: #428bfa;
		}
	}

	.upper {
		transition: all .2s ease-in-out;
		
		&.active {
			color: #428bfa;
		}
	}

	input {
		border: 0;
		position: relative;
		display: block;
		width: 100%;
		padding: 4px 0;

		&:focus {
			outline: none;
		}
	}
}

$('body').on('focus', '.wrap input', function (event) {
        $(this).parent().addClass('active');
    });

    $('body').on('blur', '.wrap input', function () {
        if (!$(this).val().length > 0) {
            $(this).parent().removeClass('active');  
        }
    });

    $('body').on('keyup', '.wrap input', function () {
        $('.wrap .from').text($(this).val().length);

        if ($(this).val().length >= 6) {
            $('.wrap .count').addClass('active');
        } else {
            $('.wrap .count').removeClass('active');
        }

        if ($(this).val().search(/\d/) != -1) {
            $('.wrap .number').addClass('active');
        } else {
            $('.wrap .number').removeClass('active');
        }

        if (/[A-Z]/.test($(this).val())) {
            $('.wrap .upper').addClass('active');
        } else {
            $('.wrap .upper').removeClass('active');
        }
    });

    $('body').on('click', '.wrap svg:not(.active)', function () {
        $(this).addClass('active');
        $('.wrap input').attr('type', 'text');
    });

    $('body').on('click', '.wrap svg.active', function () {
        $(this).removeClass('active');
        $('.wrap input').attr('type', 'password');
    });