Password Strength Meter

M.Muzammil

10 May, 2020

body {background: #F2F4F6;margin: 0;padding: 0;box-sizing: border-box;font-family: 'Roboto' , sans-serif;font-weight: 400;display: flex;height: 100vh;align-items: center;justify-content: center;font-size: 16px;
}.container .heading-2 {font-weight: 700;color: #0D3F67;font-size: 2rem;margin: 1rem 0;text-transform: capitalize;
}
.container .form-inline {display: flex;flex-direction: column;width: 100%;overflow: hidden;
}
.container .form-inline .input-password {border-radius: 3px;border: 1px solid rgba(17, 17, 17, 0.2);height: 20px;font-size: 1.1rem;padding: .7rem 1rem;outline: none;transition: border .4s ease-in-out;
}
.container .form-inline .meter-text {display: flex;width: 70%;justify-content: space-between;margin: 1rem 0 .1rem 0;color: rgba(17, 17, 17, 0.6);text-transform: capitalize;
}
.container .form-inline .meter-text .meter-status {text-transform: capitalize;
}
.container .form-inline .meter {display: block;width: 70%;height: 10px;border-radius: 3px;background: rgba(17, 17, 17, 0.1);overflow: hidden;
}
.container .form-inline .meter .meter-bar {display: block;width: 0;height: 100%;transition: width .4s ease-in-out , transform .4s ease-in-out;
}

$("#input-password").on("keyup",function(){
 checkStrength($(this).val());
});

M.Muzammil

I am Muzammil, a Self-taught Web Designer & Developer. I haven't yet completed my college degree. Started learning programming at the age of 12 and still learning. I love to work in Javascript and make eye-catchy designs. Free for your calls :)

Password Strength Meter

M.Muzammil

Popular Posts

Categories

Hashtag

Blog Archive

M.Muzammil

Popular Posts