Pen Settings

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URL's added here will be added as <link>s in order, and before the CSS in the editor. If you link to another Pen, it will include the CSS from that Pen. If the preprocessor matches, it will attempt to combine them before processing.

+ add another resource

You're using npm packages, so we've auto-selected Babel for you here, which we require to process imports and make it all work. If you need to use a different JavaScript preprocessor, remove the packages in the npm tab.

Add External Scripts/Pens

Any URL's added here will be added as <script>s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.

+ add another resource

Use npm Packages

We can make npm packages available for you to use in your JavaScript. We use webpack to prepare them and make them available to import. We'll also process your JavaScript with Babel.

⚠️ This feature can only be used by logged in users.

Code Indentation

     

Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

HTML Settings

Here you can Sed posuere consectetur est at lobortis. Donec ullamcorper nulla non metus auctor fringilla. Maecenas sed diam eget risus varius blandit sit amet non magna. Donec id elit non mi porta gravida at eget metus. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.

            
              // https://dribbble.com/shots/4755212-Password-Guide
// Concept by Saptarshi Prakash - https://dribbble.com/saptarshipr
.setPw
  .pwGuide
    .pwList
      ul
        li
          span#pwChar 7 Characters
        li
          span#pwLower 1 lowercase
        li
          span#pwCap 1 UPPERCASE
        li
          span#pwNum 1 Number
    svg.pwCheck(width='32' height='33' viewbox='0 0 32 33')
      circle(cx='16.1886' cy='16.6948' r='15.7492' fill='#70D5B9')
      path(d='M10.5639 16.4698L14.3887 20.7446L22.7133 12.645' stroke='white' stroke-width='2.69986')
    svg(width='225' height='160' viewbox='0 0 225 160' fill='none' xmlns='http://www.w3.org/2000/svg')
      path(d='M74.3499 1.61518C116.925 -6.45707 134.575 17.6849 138.078 30.765C143.295 42.3501 136.065 80.2503 137.631 113.057C139.867 159.921 117.282 159.024 107.444 159.921C97.605 160.818 41.4799 154.091 22.6969 139.292C7.67061 127.453 -8.81015 78.4076 5.47931 45.3399C14.1999 25.1592 31.7753 9.68743 74.3499 1.61518Z' fill='#3A296A')
      path(d='M21.6109 83.1567L20.9714 79.1187C20.2749 74.7216 23.275 70.5924 27.6722 69.8959V69.8959C32.0119 69.2086 36.1027 72.1232 36.8703 76.4495L37.6107 80.6226' stroke='#A59FC9' stroke-width='5.39972')
      rect(x='14.4999' y='84.283' width='30.5984' height='28.3486' rx='3.59982' transform='rotate(-9 14.4999 84.283)' fill='#BE337A')
      rect(x='14.4999' y='84.283' width='30.5984' height='20.249' rx='3.59982' transform='rotate(-9 14.4999 84.283)' fill='#E3488B')
      path(fill-rule='evenodd' clip-rule='evenodd' d='M34.3401 100.243C35.3055 99.4602 35.8385 98.1979 35.63 96.8819C35.319 94.9182 33.475 93.5785 31.5114 93.8895C29.5478 94.2005 28.208 96.0445 28.519 98.0081C28.7275 99.3242 29.6245 100.36 30.7846 100.806L31.2823 103.949C31.4378 104.93 32.3598 105.6 33.3416 105.445C34.3234 105.289 34.9933 104.367 34.8378 103.386L34.3401 100.243Z' fill='#3A296A')
      path(fill-rule='evenodd' clip-rule='evenodd' d='M45.4836 25.9488C42.0049 25.8881 39.1357 28.6589 39.075 32.1376L37.4494 125.269C37.3886 128.747 40.1594 131.617 43.6381 131.677L48.6056 131.764C48.596 131.615 48.5923 131.465 48.595 131.314C48.647 128.332 51.1064 125.957 54.0881 126.009C57.0698 126.061 59.4448 128.521 59.3928 131.502C59.3901 131.654 59.3813 131.804 59.3664 131.952L216.403 134.693C219.882 134.754 222.751 131.983 222.812 128.504L224.437 35.3731C224.498 31.8944 221.727 29.0252 218.248 28.9645L45.4836 25.9488ZM54.9048 79.2187C57.8866 79.2707 60.3459 76.8957 60.398 73.914C60.45 70.9323 58.0751 68.4729 55.0933 68.4209C52.1116 68.3688 49.6522 70.7438 49.6002 73.7255C49.5481 76.7073 51.9231 79.1666 54.9048 79.2187ZM59.8954 102.708C59.8433 105.69 57.384 108.065 54.4022 108.013C51.4205 107.961 49.0455 105.501 49.0976 102.52C49.1496 99.538 51.609 97.163 54.5907 97.215C57.5724 97.2671 59.9474 99.7264 59.8954 102.708Z' fill='#F6BD41')
  .inp-password
    form#pwSignup(method='post' action='#')
      input#password.inp(type='password' placeholder='Passwort')
      #showPW.hide
      
a.dribbble(href='https://dribbble.com/shots/4755212-Password-Guide' target='_blank') @saptarshipr
            
          
!
            
              @import url('https://fonts.googleapis.com/css?family=Special+Elite&display=swap');

body
  background: #553E8F
  min-height: 100vh
  display: flex
  justify-content: center
  align-items: center
  font-family: sans-serif
  
*
  box-sizing: border-box
  
.pwGuide
  position: relative
  width: 250px
  height: 160px
  
  .pwList
    position: absolute
    top: 25px
    left: 52px
    width: 194px
    height: 104px
    border-radius: 6px
    background: white
    box-shadow: inset 3px 0 0 #CFDAE1
    transform: rotate(-5deg) translate3d(0,0,0)
    font-family: 'Special Elite', cursive
    font-size: 12px
    &:before
      content: ''
      width: 2px
      height: 100%
      background: #E45998
      position: absolute
      left: 22px
    ul
      padding: 13px 0 0 0
      li
        padding-bottom: 3px
        margin-bottom: 6px
        padding-left: 34px
        border-bottom: 1px solid #D8CBF5
        span
          position: relative
          color: #423666
          &:after
            content: ''
            width: 100%
            height: 3px
            background: #70D5B9
            position: absolute
            left: 0
            top: 3px
            transform-origin: left
            transform: scaleX(0)
            transition: transform .4s ease
          &.valid:after
            transform: scaleX(1)
  .pwCheck
     position: absolute
     fill: none
     top: 84px
     right: 10px
     
.pwCheck
  transform: scale(0)
  transition: transform .3s cubic-bezier(.86,.45,.72,1.2)
  &.pwValid
    transform: scale(1)
     
     
.inp-password
  position: relative
  margin: 60px 0 0 0
  input
    background: #3A296A
    width: 100%
    border: 0
    border-radius: 6px
    font-size: 16px
    padding: 12px 16px
    margin: 0
    color: white
    &:focus
      outline: none
      
  #showPW
    position: absolute
    right: 15px
    top: 14px
    line-height: 14px
    cursor: pointer
    color: #f6bd41
    font-size: 12px
    font-weight: bold
    &:after
      content: 'HIDE'
    &.hide:after
        content: 'SHOW'
    
.dribbble
  position: fixed
  right: 20px
  bottom: 16px
  color: #251a46
  font-family: 'Special Elite', cursive
  font-size: 17px
  text-decoration: none
          
  
::-webkit-input-placeholder {
  color: #AD9ED3;
}
            
          
!
            
              //Password
var password = document.querySelector('#password');

var helperText = {
  charLength: document.querySelector('#pwChar'),
  lowercase: document.querySelector('#pwLower'),
  uppercase: document.querySelector('#pwCap'),
  number: document.querySelector('#pwNum')
};

var pattern = {
  charLength: function () {
    if (password.value.length >= 7) {
      return true;
    }
  },
  lowercase: function () {
    var regex = /^(?=.*[a-z]).+$/;

    if (regex.test(password.value)) {
      return true;
    }
  },
  uppercase: function () {
    var regex = /^(?=.*[A-Z]).+$/;

    if (regex.test(password.value)) {
      return true;
    }
  },
  number: function () {
    var regex = /^(?=.*[0-9]).+$/;

    if (regex.test(password.value)) {
      return true;
    }
  }
};

// Listen for keyup action on password field
password.addEventListener('keyup', function () {
  // Check that password is a minimum of 8 characters
  patternTest(pattern.charLength(), helperText.charLength);

  // Check that password contains a lowercase letter      
  patternTest(pattern.lowercase(), helperText.lowercase);

  // Check that password contains an uppercase letter
  patternTest(pattern.uppercase(), helperText.uppercase);

  // Check that password contains a number or special character
  patternTest(pattern.number(), helperText.number);

  // Check that all requirements are fulfilled
  if (hasClass(helperText.charLength, 'valid') &&
    hasClass(helperText.lowercase, 'valid') &&
    hasClass(helperText.uppercase, 'valid') &&
    hasClass(helperText.number, 'valid')
  ) {
    addClass(password.parentElement, 'valid');
    $('.pwCheck').addClass('pwValid');
  } else {
    removeClass(password.parentElement, 'valid');
    $('.pwCheck').removeClass('pwValid');
  }
});

function patternTest(pattern, response) {
  if (pattern) {
    addClass(response, 'valid');
  } else {
    removeClass(response, 'valid');
  }
}

function addClass(el, className) {
  if (el.classList) {
    el.classList.add(className);
  } else {
    el.className += ' ' + className;
  }
}

function removeClass(el, className) {
  if (el.classList)
    el.classList.remove(className);
  else
    el.className = el.className.replace(new RegExp('(^|\\b)' + className.split(' ').join('|') + '(\\b|$)', 'gi'), ' ');
}

function hasClass(el, className) {
  if (el.classList) {
    return el.classList.contains(className);
  } else {
    new RegExp('(^| )' + className + '( |$)', 'gi').test(el.className);
  }
}

//Show and hide pw
$('#showPW').click(function () {
  if ($(this).hasClass('hide')) {
    $('#password').attr('type', 'text');
    $(this).removeClass('hide');
  } else {
    $('#password').attr('type', 'password');
    $(this).addClass('hide');
  }
});

            
          
!
999px
🕑 One or more of the npm packages you are using needs to be built. You're the first person to ever need it! We're building it right now and your preview will start updating again when it's ready.

Console