JSFiddle - React, Tailwind, and code Playground

by danmana

HTML

<button id="rand">Randomize</button>
<button id="find">Find closest</button>
<div id="pin">pin</div>

CSS

#pin{
    position: absolute;
    left: 100px;
    top:250px;
}

JavaScript

(function($) {

    function randomize() {
        var urls = ["http://www.freeiconsweb.com/Icons-show/clean-mini-icons-creative_nerds/blogger.png", "http://www.freeiconsweb.com/Icons-show/clean-mini-icons-creative_nerds/digg.png", "http://www.freeiconsweb.com/Icons-show/clean-mini-icons-creative_nerds/dribbble.png", "http://www.freeiconsweb.com/Icons-show/clean-mini-icons-creative_nerds/evernote.png", "http://www.freeiconsweb.com/Icons-show/clean-mini-icons-creative_nerds/facebook.png", "http://www.freeiconsweb.com/Icons-show/clean-mini-icons-creative_nerds/freiendfeed.png", "http://www.freeiconsweb.com/Icons-show/clean-mini-icons-creative_nerds/plusone.png", "http://www.freeiconsweb.com/Icons-show/clean-mini-icons-creative_nerds/rss.png", "http://www.freeiconsweb.com/Icons-show/clean-mini-icons-creative_nerds/stumbleupon.png", "http://www.freeiconsweb.com/Icons-show/clean-mini-icons-creative_nerds/twitter.png", "http://www.freeiconsweb.com/Icons-show/clean-mini-icons-creative_nerds/viemo.png", "http://www.freeiconsweb.com/Icons-show/clean-mini-icons-creative_nerds/youtube.png"],
            i;
        $('img').remove();
        for (i = 0; i < urls.length; i++) {
            $('<img src="' + urls[i] + '">').css({
                position: 'absolute',
                left: Math.ceil(Math.random() * 400) + 'px',
                top: Math.ceil(Math.random() * 400) + 'px'
            }).appendTo('body');
        }

    }

    randomize();

    $('#rand').click(randomize);


    //this is the interesting part:
    $('#find').click(function() {
        var $min = $(),
            minDist = Number.MAX_VALUE,
            pin = $('#pin').offset();
        $('img').each(function() {
            var img = $(this).offset(),
                dx = img.left - pin.left,
                dy = img.top - pin.top,
                dist = Math.sqrt(dx * dx + dy * dy);
            if (dist < minDist) {
                minDist = dist;
                $min = $(this);
            }
      ...