Cacher is the code snippet organizer for pro developers

// vars
@baseline: 100%;
@primary_color: #fff;
@secondary_color: #f55;
@font-size: 13px;
@font-family: "Helvetica Neue", Arial, Helvetica, Sans-Serif;

.border-box() {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

* {
  .border-box();
}
html {
  font-size: 100.01%;
}
body {
  font-size: @baseline;
  color: darken(@primary_color,60%);
  line-height: 1.5em;
  font-family: @font-family;
  // Optional type aliasing
  text-shadow: 0 -1px 1px rgba(255, 255, 255, 0.01);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}


header.top{
  position:relative;
  display:block;
  width:100%;
  height:auto;
  background:@secondary_color;
  padding:0.5em;
  margin:0;
  .btn{
    position:absolute;
    top:0;
    right:0;
    display:inline-block;
    padding:0.5em 1em;
    background:darken(@secondary_color,5%);
    color:@primary_color;
    text-decoration:none;
  }
  hgroup{
    margin:0 auto;
    text-align:center;
    h3,h4{
      color:darken(@primary_color,5%);
      em{
        color:@primary_color;
      }
    }
  }
}

section{
  width:90%;
  margin: 0 auto;
  ul{
    margin:1em auto;
    padding:0;
    list-style:none;
    li{
      pre{
        word-break:break-word;
        padding:1em;
        background:@secondary_color;
        border: 1px solid darken(@secondary_color,10%);
        color:@primary_color;
      }
    }
  }
}

var make = document.querySelector('#make');
make.addEventListener('click',function(e){
  e.preventDefault();
  var r = document.querySelector('#resultOfMake')
  return encrypt(r);
},false);



function decrypt(selector,text){
  var decrypt = prompt(text),
      element = selector;
  if (decrypt != null) {
    // decrypt password input value
    var result = CryptoJS.AES.decrypt(element.textContent,decrypt );
    // show in result div
    element.innerHTML = result.toString(CryptoJS.enc.Utf8);
  } 
}

function encrypt(selector){
  var text = prompt('What is your info'),
      encyptPass =  prompt('What is your password');
  if (text != null) {
    if (encyptPass != null) {
      var pass = CryptoJS.AES.encrypt(text,encyptPass),
          result = selector;
      result.innerHTML = 
        '<b>This is the code</b>'+ 
        '<pre ondblclick="decrypt(this,\' What is your passWord ? \')">'+pass+'</pre>'+
        '<small>Now only need include in your library ( See html )</small>';
    }
  }
}

<header class="top">
  <a href="#" id="make" class="btn">Make password</a>
  <hgroup>
    <h3>My passwords</h3>
    <h4>Click in encrypted code to show. 
      <em>( double click to show )</em>
    </h4>    
  </hgroup>
</header>
<section>
  <ul>
    <li>
      <p>Twitter ( For demo this is the pass: <b>codepen</b>)</p>
      <pre id="twitter" ondblclick="decrypt(this,' What is your passWord')">
U2FsdGVkX1+GtZVeWvuWPoLGTgr0DXBXhpDv9S081p8mcJduNYizFUEdTpqS1Y+t2PRQdkDQlkM4+L1sOxm5/w==</pre>
    </li>
    <li>
      <p>My Web ( For demo this is the pass: <b>1234</b>)</p>
      <pre id="twitter" ondblclick="decrypt(this,' What is your passWord')">
U2FsdGVkX1+N7dAvwaYJ5/nGE4Y8iYAH/hz8z/0khGyUSa/1jAhpb4l+QcseUbRw</pre>
    </li>
    <!-- Result crypto -->
    <li id="resultOfMake"></li>
  </ul>
</section>