Random Compliment Generator

by LosHantos

HTML

<script src="http://rawgithub.com/DimitarChristoff/primish/master/primish-min.js"></script>
<div class="ac box">
    Random compliment generator. <br/>Generate compliments until you get one you like.<br/>
    <button class="heading">
        generate new compliment
    </button>    
    
    <div id="compliment"></div>

    <div>
					<a target="_blank" role="button" class="btn btn-info my-btn" id="tweet"><i class="fa fa-twitter"></i> Tweet this</a>
				</div>
</div>

CSS

@import url(http://fonts.googleapis.com/css?family=Russo+One);
* {
    font-family: arial;
    font-weight: bold;
}
body,html {
    height: 100%;
    margin: 0;
}
body {
    background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHhtbG5zOnhsaW5rPSdodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rJyB3aWR0aD0nMTAwJScgaGVpZ2h0PScxMDAlJz4KICA8ZGVmcz4KICAgIDxnIGlkPSdhJz4KICAgICAgPHBhdGggZD0nTTUgNmwtNiAtNiB2LTIgbDYgNicgZmlsbC1vcGFjaXR5PScwJyBzdHJva2U9JyMyYjNhNzUnIC8+CiAgICAgIDxwYXRoIGQ9J001IDVsNiAtNiB2LTIgbC02IDYnIGZpbGwtb3BhY2l0eT0nMCcgc3Ryb2tlPScjMzE0MTdkJyAvPgogICAgPC9nPgogICAgPHBhdHRlcm4gcGF0dGVyblVuaXRzPSd1c2VyU3BhY2VPblVzZScgeD0nMCcgeT0nMCcgaWQ9J3AnIHdpZHRoPScyMCcgaGVpZ2h0PScyMCcgdmlld0JveD0nMCAwIDEwIDEwJz4KICAgICAgPHVzZSB4bGluazpocmVmPScjYScvPiAgCiAgICAgIDx1c2UgeGxpbms6aHJlZj0nI2EnIHk9Jy00Jy8+CiAgICAgIDx1c2UgeGxpbms6aHJlZj0nI2EnIHk9JzQnLz4KICAgICAgPHVzZSB4bGluazpocmVmPScjYScgeT0nOCcvPgogICAgICA8dXNlIHhsaW5rOmhyZWY9JyNhJyB5PScxMicvPgogICAgPC9wYXR0ZXJuPgogICAgPHJhZGlhbEdyYWRpZW50IGdyYWRpZW50VW5pdHM9J3VzZXJTcGFjZU9uVXNlJyBpZD0nZycgY3g9JzUwJScgY3k9JzUwJScgZng9JzMwJScgZnk9JzMwJScgcj0nNjAlJz4KICAgICAgPHN0b3Agb2Zmc2V0PScwJScgc3RvcC1jb2xvcj0nI2FhYWFhYScgc3RvcC1vcGFjaXR5PScuNScgLz4KICAgICAgPHN0b3Agb2Zmc2V0PScxMDAlJyBzdG9wLWNvbG9yPScjMDAwMDAwJyBzdG9wLW9wYWNpdHk9Jy43JyAvPgogICAgICA8L3JhZGlhbEdyYWRpZW50PgogIDwvZGVmcz4KICA8cmVjdCB4PSctNSUnIHk9Jy01JScgd2lkdGg9JzExMCUnIGhlaWdodD0nMTEwJScgZmlsbD0nIzAwMDAyMicvPgogIDxyZWN0IHdpZHRoPScxMTAlJyBoZWlnaHQ9JzExMCUnIGZpbGw9J3VybCgjcCknLz4KICA8cmVjdCB4PSctNSUnIHk9Jy01JScgd2lkdGg9JzExMCUnIGhlaWdodD0nMTEwJScgZmlsbD0ndXJsKCNnKScvPgo8L3N2Zz4=');
}
.box {
    text-align: center;
    width: 600px;
    height: 276px;
    color: rgba(255, 255, 255, .7);
    text-shadow: 1px 1px 5px rgba(0, 0, 0, .7);
}
#compliment {
    font-family: "Russo One";   
    text-transform: uppercase;
    font-size: 4em;
}
button.heading {
    outline: none;
    -moz-box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.3);
    -webkit-box-shadow:...

JavaScript

// idea + dictionary by hnldesign from b3ta
var Complimenter = primish({
    a:  'lovely,beautiful,gorgeous,kind,wonderful,nice,perfect'.split(','),
    b: 'good-looking,super-duper,awesome'.split(','), 
    c: 'pal,friend,person,human'.split(','),
    d: 'improver,supporter,juggler'.split(','),
    
    combos: ['a,b,c', 'a,b,d', 'b,c', 'b,d'],

    constructor: function(element){
        element && (this.element = element);
        this.combos = this.combos.map(function(c){return c.split(',')});
        this.compliment();
    },

    compliment: function(e){
        e && e.preventDefault();
        var compliment= this.get();
        
        this.element && (this.element.innerHTML = compliment);
        
        return compliment;
    },
    
    get: function(){
        var c = this.combos, 
            self = this;
        
        return c[Math.random()*c.length>>0].map(function(k){
            return self[k][Math.random()*self[k].length>>0]
        }).join(' ');    
    }        
});

(function(){
    var complimenter = new Complimenter(document.getElementById('compliment'));
    document.querySelector('.heading').addEventListener('click', complimenter.compliment.bind(complimenter));
    
    var link = "https://twitter.com/intent/tweet?hashtags=compliment&related=complimenttime&text=" + complimenter;
	document.getElementById('tweet').setAttribute("href", link); //assigns url above as href to twitter button
	document.getElementById('compliment').innerHTML = "<span class='bold'>" + complimenter + "</span>" + "<br />";
    
    
    
}());