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.

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>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

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

Take a look at this code snippet that effectively checks whether a number is prime: var num = parseInt(prompt("Enter a number:")); var result = "Prime"; for (var i = 2; i < num; i++) { if (num % i === 0) { result = "Not Prime"; break; } } ...

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

I've encountered this problem before while setting up npm scripts, and I haven't been able to find a solution yet. I'm hoping to make the solution compatible with both Mac and Windows environments. I'm working on splitting up the logic ...

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

.rowHeight{ height: 100px; } .padding-0 { padding-right: 0px; paddig-left: 0px; margin-left: 0px; margin-right: 0px; } .cart{ ...

Always ensure that only one div is visible at a time

I am currently working on a project where I cannot use ng-cloak due to the way the css files are loaded. I have been exploring alternative solutions and have tried a few different approaches. My main goal is to ensure that two icons are never shown at the ...

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

I am using Vue.js within a Laravel project and I am encountering an issue with the global event bus. I have created an event-bus.js file and imported it where needed. Although events are being generated upon clicking, there seems to be no reactions from th ...

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

Hey there! I'm currently experimenting with creating a wave effect using CSS, specifically utilizing 'before' and 'after'. However, I've encountered an issue where I can't seem to position my waves correctly at the top a ...

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

In my npm project, I want to replicate the structure used by Meteor: there is a source file called client.js and its corresponding test file named client.tests.js residing in the src/ directory. The tests should be executed with the npm test command. I am ...

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

Having some trouble understanding the logic behind a JavaScript script that is meant to display select options based on another select option. Any tips on how to hide unused options? For example: If TV is selected, only show options for device, tsignal, b ...

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

Is there a more efficient way to achieve this code with fewer lines of code? I'm looking for a solution that avoids repetition and makes it easier to manage, especially since I plan on creating multiple instances of this. Performance is a key consider ...

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

In my React form, I have an input button with an onBlur event that sets the value to a useState property. However, after the onBlur event is triggered, the user has to click the button twice to focus on it properly. It seems like the page needs time to pro ...

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

I am currently utilizing Jason Davies' d3-cloud.js to create my word cloud, you can view it here 1. I'm encountering an issue where the words run out of space when the initial window size is too small. To address this, I have a function that cal ...

Values in Vuex do not get updated by getters

I'm having trouble understanding the functionality of getters in Vuex. The issue arises when I log out the token and find that the state and localStorage are empty, but the getters still contain the old token value. In the created lifecycle hook, I ha ...

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

Whenever I try to use plotbands between two points on the x-axis and draw a line between those two points using pointLines, the line never appears. Strangely, if the same process is done on the yAxis, everything works perfectly fine. Here is my code: $( ...

Implementing conditional statements in Puppeteer web scraping

Attempting to extract data from a table... Each country name is wrapped in an <a> tag, however some are not. Unfortunately, when the structure of the HTML changes, the program crashes Code => Output => I have experimented with the following ...

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

When designing a form, there are certain form elements that may need explanatory text to clarify their function. One approach is to wrap this text in a paragraph element, as demonstrated below: label p { margin-top: -1px; font-size: smaller; } <div ...

Guide to utilizing font awesome 5 after installation through NPM

After successfully installing font-awesome in my project using npm, I am unable to locate the documentation on what steps to take next: $ npm install --save @fortawesome/fontawesome-free-webfonts My question now is: what should I do after this? Could so ...

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

Currently, my manifest file is structured as follows: { "manifest_version": 2, "name": "My Extension", "description": "A starting point for creating a functional Chrome extension", "version": "0.0.1", "browser_action": { "default_popup": " ...

Is your blockui overlay failing to cover the entire page?

I have implemented blockui to display a "Wait ... loading" popup on my webpage. It is mostly working fine, but I am facing a small issue where the overlay does not cover the entire width of the scroll window when I scroll right (although it covers the full ...

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

Within my testFile.html HTML file, the following code is present: <div id="image-type-placeholder">marinaa</div> In my JavaScript file: const CourseImageUpload = BaseComponent.extend({ /** * @property {function} */ templat ...

The art of overriding React class methods

I am attempting to implement a class composition in react: class Entity { constructor(props) { super(props); } renderPartial() { return (<div>Entity</div>) } render() { return (<div>header {this.renderPartial()}< ...