JSFiddle - React, Tailwind, and code Playground

by puuga

HTML

<h1>Breadth first search</h1>
<button onclick="doClick()">do click</button>
<div id="output"></div>
<div>Breadth <span id="output2"></span></div>
<div>Depth <span id="output3"></span></div>

CSS

body {
    font-family: Helvetica, sans-serif;
}
table {
    border:solid 1px;
}
td {
    text-align:center;
    vertical-align:top;
}

JavaScript

// Breadth first search
// Depth First Search
var rootTree;
var num = {};


function doClick() {
    rootTree = {
        value: 1,
        left: {
            value: 2
        },
        right: {
            value: 3
        }
    };
    rootTree.left.left = {
        value: 4
    };
    rootTree.left.right = {
        value: 5
    };
    rootTree.right.left = {
        value: 6
    };


    //print tree after add key
    //alert("rootTree.value = " + rootTree.value);
    $("#output").html(printTree(rootTree));
    $("#output2").html(breadthFirstSearch(rootTree).toString());
    $("#output3").html(depthFirstSearch(rootTree));


}

function breadthFirstSearch(tree) {
    var queue= [];
    var output = [];

    queue.push(tree);
    while (queue.length !== 0) {
        var temp = queue.shift();
        //determine node value
        output.push(temp.value);
        // push child node to queue
        if (temp.left !== undefined) queue.push(temp.left);
        if (temp.right !== undefined) queue.push(temp.right);
    }
    return output;
}

function depthFirstSearch(tree) {
    // base case
    if (tree === undefined) {
        return "";
    }
    // recursive
    return tree.value +","+ depthFirstSearch(tree.left) + depthFirstSearch(tree.right);
}

function printTree(tree) {
    if (tree === undefined) {
        return "&nbsp;";
    }
    return "<table><tr><td colspan='2'>" + tree.value + "</td></tr><td>" + (tree.left === undefined ? '' : '/<br/>') + printTree(tree.left) + "</td><td>" + (tree.right === undefined ? '' : '\\<br/>') + printTree(tree.right) + "</td></tr></table>";
}