passwordify

stupid little password generator

by brebory

HTML

<p class="about"><strong>Passwordify!</strong>A tiny password generator written in javascript. It's not secure enough to use as an encryption hash, but it's good for generationg secure passwords from easy-to-remember words. If you can figure out the pattern, you should be able to generate your passwords in your head! It's not impossible to figure out!</p>
<div class="container">
  <form id="passwordify-form">
      <input id="password" type="text" name="password" placeholder="Type word to convert here..."></input>
        <input id="submit-button" type="submit" name="submit" value="PassWordify!"></input>
    </form>    
</div>    
<div id="output"></div>

CSS

* {
    background-color: #888;
    box-sizing: border-box; 
    font-family: Helvetica Arial sans-serif;
    font-size: .9em;
}
.container {
    width: 250px;
    height: 100px;
    margin: 20px auto;
    padding: 0;
    background-color: #333;
    border: 1px solid black;
    border-radius: 5px;
    box-shadow: 1px 1px 2px #666;
}

#output {
    display: none;
    width: 250px;
    padding: 50px;    
    background-color: #EEEEEE;
    box-shadow: 1px 1px 2px #666;
    color: black;
    text-align: center;
    border: 1px solid #DDDDDD;
    border-radius: 5px;
    margin: 50px auto;
    font-weight: bold;
}
#passwordify-form {
    position: relative;
    width: 210px;
    height: 80px;
    padding: 0;
    margin: 10px 20px;
    background-color: #555;
    border: solid 1px #222;
    border-radius: 5px;
    box-shadow: 0 0 2px #444 inset;
}
#submit-button {
    position: absolute;
    background-color: #333;
    border: none;
    border-bottom: 1px solid black;
    border-right: 1px solid black;
    border-bottom-left-radius: 5px;
    border-bottom-right-radius: 5px;
    padding: 10px;
    bottom: -40px;
    right: -20px;
    color: white;
    box-shadow: 1px 1px 2px #666;
    font-weight: bold;
}
#submit-button:hover {
    text-shadow: 0 0 5px #FFF; 
}
#password {
    width: 200px;
    padding: 3px;
    margin: 27px 4px;
    border-radius: 3px;
    border: solid 1px #444;
    background-color: #FFF;
}
.about {
    background: #FFF;
    width: 250px;
    margin: 20px auto;
    padding: 20px;
    border-radius: 20px;
    box-shadow: 1px 1px 4px #333 inset;
    font-family: Georgia;
    font-size: .8em;
    z-index: -1;
}
.about strong {
    background: #FFF;
    display: block;
    margin-bottom: 10px;
    font-size: 1.2em;
}

JavaScript

/*********************** PASSWORDIFIER CLASS DEFINITIONS **********************/

    function PassWordifier() {
        /* Array of different types of conversion methods to be accessed by
           passWordify method */
           
        var conversions = [convert1, convert2, convert3, convert4];

    /* PRIVATE METHODS */
    
        /* Returns lowercase version of char */
        function convert1(char) {
            return char.toLowerCase();
        }
    
        /* Returns char converted into its index in the alphabet, with second number,
           (if there is one) converted to its corresponding symbol on the keyboard. */
        function convert2(char) {
            var index = char.toAlphabetIndex();
            /* If index is 2 numbers, convert second to symbol, leave first. If only 1,
               just return first number */     
            if(index.length === 2) {
                return index.charAt(0) + index.charAt(1).numToSymbol();
            } else if (index.length === 1) {
                return index;
            }
        }

        /* Returns uppercase version of char */
        function convert3(char) {
            return char.toUpperCase();
        }

        /* Same as convert2, except first number is symbol, second is number */
        function convert4(char) {
            var index = char.toAlphabetIndex();
            /* If index is 2 numbers, convert first to symbol, leave second. If only 1,
               just return first as symbol */     
            if(index.length === 2) {
                return index.charAt(0).numToSymbol() + index.charAt(1);
            } else if (index.length === 1) {
                return index.numToSymbol();
            }        
        }
        
        /* PUBLIC METHODS */
        
        this.passWordify = function(str) {
            var arr = str.stripNonAlphabetic().split("");
            return arr.doForEach(conversions).join("");
        };
    }

    /***************** JAVASCRIPT CORE...