JSFiddle - React, Tailwind, and code Playground

by jakie8

HTML

<input type="text" id="url" placeholder="URL to Brazzify">
<select id="corner">
    <option value="topleft">Top Left</option>
    <option value="topright">Top Right</option>
    <option value="bottomleft">Bottom Left</option>
    <option value="bottomright">Bottom Right</option>
</select>

<input type="button" id="generate" value="Generate">

<div id="res"></div>

CSS

#url, #corner, #generate{
    display:block;
    margin:10px auto;
    width:300px;
    padding:10px;
}
#url{
    width:280px;
}
#res{
    text-align:center;
}

JavaScript

var brazzed = brazzed || (function(){

    var text = $('#url'),
        url = 'http://jakiestfu.com/lab/brazzed.php'        
        corner = $('#corner');        
    
    function apply(){
        return url+'?url='+text.val()+'&corner='+corner.val();        
    }


    return {
        apply: apply        
    }
    
})();

$(document).on('click', '#generate', function(){
    var d = brazzed.apply();
    $('#res').html('<img src="'+brazzed.apply()+'">');

});