g gene

uc

by ethertank

HTML

<button id="b">add point</button>

<div id="d">
    
    <label>on<input name="msf" type="radio" /></label>
    <label>off<input name="msf" type="radio" /></label>
    
    
    <select>
        <option value="to bottom">to bottom</option>
        <option value="to left">to left</option>
        <option value="to top">to top</option>
        <option value="to right">to right</option>    
    </select>

    <ol id="o">
      <li><input type="text" /></li>
      <li><input type="text" /></li>
    </ol>

    <button id="gen">generate</button>

    <output id="code">
        <textarea></textarea>
    </output>

</div>


<style>
.targetclass { background-image: linear-gradient(to right, #fff, #000) }
</style>

<div style="height:100px">
<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%">
    <defs>
    <linearGradient id="g" x2="100%" y1="0">
    <stop style="stop-color:#fff" offset="0%"/>
    <stop style="stop-color:#000" offset="100%"/>
    </linearGradient>
    </defs>
    <rect width="100%" height="100%" fill="url(#g)"/>
</svg>
</div>

CSS

#code{display:block;}

JavaScript

$("#b").click(function() {
    $("#o").append(
        $('<li>').append(
            $('<input type="text" />')
        ).append(
            $('<button class="del">delete</button>').click(function(){
                $(this).parent().remove();
            })
        )
    );
});