JSFiddle - React, Tailwind, and code Playground

by shtrih

HTML

<form action="">
    <input name="link" type="text" size="60" value="http://video.sibnet.ru/video405181/" />
    <div class="submit">Get links!</div>
</form>

<div class="content">
    <span class="closebtn">close</span>
</div>

CSS

form, input, .submit, .content {
    background: #ccc;
    border-radius: 5px;
    border: 2px #aaa solid;
    padding: 4px;
}

input {
    background: #eee;
    font-size: 1.3em;
    padding: 2px 4px;
}

.submit {
    background: #ccc;
    width: 70px;
    display: inline-block;
}

.submit:hover {
    background: #eee;
    border-color: #ddd;
    cursor: pointer;
}

.content {
    display: none;
    margin: 4px 0 4px 0;
}

.closebtn {
    top: 0;
    float: right;
    cursor: pointer;
    background: #fff;
    border-radius: 10px;
    border: 1px #eee;
    padding: 0px 6px;
}

.closebtn:hover {
    background: #fcc;
}

JavaScript

$('.submit').click(function () {
    if ($("input[name*='link']").val().substr(0, 28) == "http://video.sibnet.ru/video") {
        $('.content').slideUp('fast').slideDown('fast').append(
            "<p>http://video.sibnet.ru/upload/video/" + 
            $("input[name*='link']").val().substr(28).replace('/', '') + ".flv</p>");
    } else if ($("input[name*='link']").val().substr(0, 26) == "http://video.sibnet.ru/alb") {
        $.getJSON("http://api.flickr.com/services/feeds/photos_public.gne?tags=cat&tagmode=any&format=json&jsoncallback=?",
        function(data){
          $.each(data.items, function(i,item){
            $("<img/>").attr("src", item.media.m).appendTo(".content");
            if ( i == 4 ) 
                return false;
          });
        });
    } else {
        $('.content').fadeIn(1000).html('No.');
    }
});


$('.closebtn').live('click', function() {
    $(this).parent().slideUp('fast');
});