JSFiddle - React, Tailwind, and code Playground

by secretgspot

HTML

<div class="noise">
    <div class="shadow"></div>
    <h1>Noise Generator</h1>
    
    <div class="form-container">
        <form>
            <div class="base-color option">
                <span class="option-name">Base color</span>
                <span class="option-value"></span>
                <input class="option-color">
            </div>
            
            <div class="noise-color option">
                <span class="option-name">Noise color</span>
                <span class="option-value"></span>
                <input class="option-color" />
            </div>
            
            <div class="rate option">
                <span class="option-name">Noise rate</span>
                <span class="option-value"></span>
                <span class="option-slider"></span>
            </div>
            
            <button class='generate'>generate</button>
            <a class="generated-image-link" target="_blank">Image link</a>
        </form>
    </div>
</div>

CSS

html, body{
    color: white;
    width: 100%;
    height: 100%;
    min-height: 465px;
    overflow: hidden;
}

.noise{
    display: block;
    position: relative;
    width: 400px;
    margin: auto;
    text-align: center;
}
.noise .shadow{
    position: absolute;
    width: 600px;
    height: 600px;
    margin: auto;
    border-radius: 50%;
    background: -webkit-gradient(
        radial,50% 50%, 0, 50% 50%, 300,
        from(rgba(255, 255, 255, 0.3)) ,
        color-stop(0.6, rgba(255, 255, 255, 0)),
        to(rgba(255, 255, 255, 0)));
    background: -webkit-radial-gradient(
        center, circle,
        rgba(255, 255, 255, 0.3),
        rgba(255, 255, 255, 0) 60%,
        rgba(255, 255, 255, 0));
    background: -moz-radial-gradient(
        center, circle,
        rgba(255, 255, 255, 0.3),
        rgba(255, 255, 255, 0) 60%,
        rgba(255, 255, 255, 0));
    left: -100px;
    top: -200px;
}

.noise h1{
    position: relative;
    margin-bottom: 20px;
    font: bold 40px/1 Helvetica, sans-serif;
    text-shadow: 0px 0px 10px #000, 2px 0px 10px #000, 0px 2px 10px #000, 2px 2px 10px #000;
    z-index: 1;
}

.noise .form-container{
    position: relative;
    height: 350px;
    -moz-border-radius: 20px;
    border-radius: 20px;

    background: rgba(0, 0, 0, 0.6);
    -webkit-box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.3), 2px 2px 5px 3px rgba(0, 0, 0, 0.7), inset 0px 0px 3px 1px #999;
    -moz-box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.3), 2px 2px 5px 3px rgba(0, 0, 0, 0.7), inset 0px 0px 3px 1px #999;
    box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.3), 2px 2px 5px 3px rgba(0, 0, 0, 0.7), inset 0px 0px 3px 1px #999;
    
    font: 14px/1.8 monospace;
    color: rgba(255, 255, 255, 0.8);
    text-shadow: 0px 0px 10px #000;
    white-space: nowrap;
}

.noise .option{
    padding: 30px 20px;
}

.noise .option span{
    display: inline-block;
}

.noise .option-name{
    width: 100px;
}

.noise .option-value{
    width: 100px;
}

.noise .option-slider, .noise input{
 ...

JavaScript

function Rgb(colorString){
    var match = /^#?(\w\w?)(\w\w?)(\w\w?)$/.exec($.trim(colorString))
    for(var i = 1; i < 4; i++){
        if(match[i].length === 1){
            match[i] += match[i]
        }
    }
    this.r = parseInt(match[1], 16),
    this.g = parseInt(match[2], 16),
    this.b = parseInt(match[3], 16)
}

Rgb.prototype.toString = function(){
    var codes = [this.r.toString(16), this.g.toString(16), this.b.toString(16)]
    codes.forEach(function(code, i){
        if(code.length === 1){
            codes[i] = "0" + codes[i]
        }
    })
    return "#" + codes.join("")
}


$(function(){
if($.browser.msie){
    alert("Opps! Your browser is not supported.")
}
    
params = {};
params.baseColor = new Rgb("#111")
params.noiseColor = new Rgb("#222")
params.rate = 0.5
params.width = 200
params.height = 200

var root = $(".noise")
var form = root.find("form").submit(function(event){
    event.preventDefault()
    var dataURL = generate(params).toDataURL()
    document.body.style.backgroundImage = "url(" + dataURL + ")"
    $(".generated-image-link", form).attr("href", dataURL).show()
}).submit()

// base color
$(".base-color", form)
    .find(".option-value").text(params.baseColor.toString()).end()
    .find(".option-color").val(params.baseColor.toString()).change(function(){
        params.baseColor = new Rgb($(this).val())
        $(this).siblings(".option-value").text(params.baseColor.toString())
    })

// noise color
$(".noise-color", form)
    .find(".option-value").text(params.noiseColor.toString()).end()
    .find(".option-color").val(params.noiseColor.toString()).change(function(){
        params.noiseColor = new Rgb($(this).val())
        $(this).siblings(".option-value").text(params.noiseColor.toString())
    })

// rate
$(".rate", form)
    .find(".option-value").text(params.rate).end()
    .find(".option-slider").slider({
        min: 0,
        max: 100,
        value: params.rate * 100,
        slide: function(event, ui){
           ...