Creating a binary tree in vanilla JavaScript and styling it with HTML and CSS

Question

Creating a binary tree in vanilla JavaScript and styling it with HTML and CSS

I'm facing a challenge with my homework. I am required to convert my JavaScript binary tree into HTML and CSS, strictly using vanilla JavaScript without any HTML code.

I have the tree structure and a recursive function that adds all the tree elements to the page, but I need it to be displayed like an unordered list (ul) with list items (li).

const Node = {
    data: 10,
    left: {
        data: 1,
        left: null,
        right: null
    },
    right: {
        data: 7,
        left: {
            data: 6,
            left: {
                data: 4,
                left: null,
                right: null
            }, 
            right: null
        },
        right: null
    }
};

const breadthFirst = function (node) {
    function bf(queue) {
        let newQueue = [];
        queue.forEach(function (node) {
            console.log(node.data);
            const newEl = document.createElement('div');
            newEl.innerText = node.data;
            document.getElementById("app").appendChild(newEl)
            node.left && newQueue.push(node.left);
            node.right && newQueue.push(node.right);
        });
        newQueue.length && bf(newQueue);
    }

    bf([node]);
};

breadthFirst(Node);

Currently, I have all elements displayed in a column format, but I want them to be structured as an ordered list:

first
- second
  - fourth
  - fifth
- third

and so on.

javascript html css

Answer 1

Answer №1

To construct the multi-level hierarchy of your tree, you will need to attach the sub elements to their respective parent nodes. I have divided this process into 2 functions.

const data = {
    data: 10,
    left: {
        data: 1,
        left: null,
        right: null
    },
    right: {
        data: 7,
        left: {
            data: 6,
            left: {
                data: 4,
                left: null,
                right: null
            }, 
            right: null
        },
        rigth: null
    }
};

const createListItem = (treeNode) => {
    if (!treeNode) {
        return;
    }
    
    let item, subTree;
    
    item = document.createElement('li');
    item.textContent = treeNode.data;
    
    subTree = createSubTreeForNode(treeNode);
    if (subTree) {
        item.appendChild(subTree);
    }
    
    return item;
};

const createSubTreeForNode = (treeNode) => {
    if (!treeNode.left && !treeNode.right) {
        return;
    }
    
    let list, item;
    
    list = document.createElement('ul');
    
    item = createListItem(treeNode.left);
    if (item) {
        list.appendChild(item);
    }
    
    item = createListItem(treeNode.right);
    if (item) {
        list.appendChild(item);
    }
  
    return list;
};

const renderTree = (treeNode, parentElement) => {
    parentElement = parentElement || document.getElementById("app");
    
    let rootList, item;
    
    rootList = document.createElement('ul');
    item     = createListItem(treeNode);
    if (item) {
        rootList.appendChild(item);
    }
    
    parentElement.appendChild(rootList);
};

renderTree(data);

<div id="app"></div>

Answer 2

To construct the multi-level hierarchy of your tree, you will need to attach the sub elements to their respective parent nodes. I have divided this process into 2 functions.

const data = {
    data: 10,
    left: {
        data: 1,
        left: null,
        right: null
    },
    right: {
        data: 7,
        left: {
            data: 6,
            left: {
                data: 4,
                left: null,
                right: null
            }, 
            right: null
        },
        rigth: null
    }
};

const createListItem = (treeNode) => {
    if (!treeNode) {
        return;
    }
    
    let item, subTree;
    
    item = document.createElement('li');
    item.textContent = treeNode.data;
    
    subTree = createSubTreeForNode(treeNode);
    if (subTree) {
        item.appendChild(subTree);
    }
    
    return item;
};

const createSubTreeForNode = (treeNode) => {
    if (!treeNode.left && !treeNode.right) {
        return;
    }
    
    let list, item;
    
    list = document.createElement('ul');
    
    item = createListItem(treeNode.left);
    if (item) {
        list.appendChild(item);
    }
    
    item = createListItem(treeNode.right);
    if (item) {
        list.appendChild(item);
    }
  
    return list;
};

const renderTree = (treeNode, parentElement) => {
    parentElement = parentElement || document.getElementById("app");
    
    let rootList, item;
    
    rootList = document.createElement('ul');
    item     = createListItem(treeNode);
    if (item) {
        rootList.appendChild(item);
    }
    
    parentElement.appendChild(rootList);
};

renderTree(data);

<div id="app"></div>

Creating a binary tree in vanilla JavaScript and styling it with HTML and CSS

Answer №1

Similar questions

What is the reason behind the effectiveness of this prime number verifier?

Creating a conditional npm script that depends on the output of another: a step-by-step guide

Tips for eliminating the gap between a heading and column in Bootstrap 4

Always ensure that only one div is visible at a time

Troubleshooting: Resolving issues with Vue's global EventBus in my project

Create a stunning wave CSS effect using the :after and :before pseudo-elements

Is there a way for mocha to conduct a recursive search within my `src` directory in order to find a specific

Only two options available: validate and hide; no additional options necessary

Is there a better method to accomplish this task in a more effective manner?

When using JavaScript with React, setting a value after the onBlur event can result in users having to click

Creating a dynamic word cloud in D3: Learn how to automatically adjust font sizes to prevent overflow and scale words to fit any screen size

Values in Vuex do not get updated by getters

The addition of plot bands in highcharts can cause the plot lines to vanish

Implementing conditional statements in Puppeteer web scraping

What is the correct way to markup the semantic form label assistance text?

Guide to utilizing font awesome 5 after installation through NPM

Encountering the "ERR_FILE_NOT_FOUND" message within the popup of my Chrome extension

Is your blockui overlay failing to cover the entire page?

Update the value of a JavaScript variable in an HTML template by targeting the element with a specific

The art of overriding React class methods