JSFiddle - React, Tailwind, and code Playground

by Talha Awan

HTML

<div id="input-container">
    <p>
        Select source and destination (radio + image blocks) and click Find
    </p>
    <input type="radio" name="location" value="source"> From: <span id="selected-source"></span>
    <br>
    <input type="radio" name="location" value="destination"> To: <span id="selected-destination"></span>
    <br>
    <br>
    <button id="btn">
        Find
    </button>
</div>

<br>
<br>
<div id="result">

</div>

<br>
<br>
<br>
<br>
<div>
    Floor 1
</div>
<img id="floor-plan" src="https://s11.postimg.org/vtq8pcf9f/floor_plan.png" width="300" height="200" alt="Floor1" usemap="#floor1">

<br>
<br>
<br>
<br>
<div>
    Floor 2
</div>
<img id="floor-plan2" src="https://s11.postimg.org/vtq8pcf9f/floor_plan.png" width="300" height="200" alt="Floor2" usemap="#floor2">

<br>
<br>
<br>
<br>
<div>
    Floor 3
</div>
<img id="floor-plan3" src="https://s11.postimg.org/vtq8pcf9f/floor_plan.png" width="300" height="200" alt="Floor3" usemap="#floor3">

<map name="floor1">
    <area class="ar" shape="rect" coords="0,0,130,80" href="" value="Floor1 Office1">
    <area class="ar" shape="rect" coords="0,80,130,120" href="" value="Floor1 p2">
    <area class="ar" shape="rect" coords="0,120,130,200" href="" value="Floor1 Office2">
    <area class="ar" shape="rect" coords="130,120,170,200" href="" value="Floor1 p3">

    <area class="ar" shape="rect" coords="170,120,300,200" href="" value="Floor1 Office3">
    <area class="ar" shape="rect" coords="170,80,290,120" href="" value="Floor1 p4">
    <area class="ar" shape="rect" coords="130,80,170,120" href="" value="Floor1 c1">
    <area class="ar" shape="rect" coords="290,80,300,120" href="" value="Floor1 d">
    <area class="ar" shape="rect" coords="130,0,170,80" href="" value="Floor1 p1">
    <area class="ar" shape="rect" coords="170,0,300,80" href="" value="Floor1 Office4">
</map>


<map name="floor2">
    <area class="ar" shape="rect" coords="0,0,130,80" href="" value="Floor2 Office1">
    <area class="ar"...

JavaScript

$(document).ready(function() {
        //  $("#floor-plan").click(function(e) {
        //    clickX = e.pageX - $("#floor-plan").offset().left;
        //    clickY = e.pageY - $("#floor-plan").offset().top;
        //    alert("hello " + clickX + " " + clickY);
        //  });


        $(".ar").click(function(e) {
            e.preventDefault();

            if (!$("input[name=location]:checked").val()) {
                alert("First select to/from")
            } else {
                document.getElementById("selected-" + $("input[name=location]:checked").val()).innerHTML = $(this).attr("value");
            }
            $('html, body').animate({
                scrollTop: $("#input-container").offset().top
            }, 700);
            
        });

        $("#btn").click(function(e) {
            if (!$("#selected-source").text() || !$("#selected-destination").text()) {
                alert("select to/from");
                $('html, body').animate({
                    scrollTop: $("#input-container").offset().top
                }, 700);
            } else {
                var src = $("#selected-source").text().split(" ")
                var dest = $("#selected-destination").text().split(" ")

                if (src[0] == dest[0]) {
                    document.getElementById("result").innerHTML = "<b>Suggested path</b> <br><br> "+src[0]+" =  " + findPath(building[src[0]], src[1], dest[1])
                } else {
                    document.getElementById("result").innerHTML = "<b>Suggested path</b> <br><br> "+src[0]+" =  " + findPath(building[src[0]], src[1], 'd') + "<br> "+dest[0]+" = " + findPath(building[dest[0]], 'd', dest[1]);
                }
            }
        })
    })




    var building = {
        Floor1: {
            'Office1': ['p1', 'p2'],
            'Office2': ['p2', 'p3'],
            'Office3': ['p3', 'p4'],
            'Office4': ['p1', 'p4'],
            'p1': ['Office1', 'Office4', 'c1'],
            'p2':...