Reversing a Binary Tree with JavaScript.

Jinson Abraham — Wed, 07 Dec 2022 04:00:51 GMT

To reverse a binary tree in JavaScript, you can use a recursive function that traverses the tree in the opposite order. The basic idea is to traverse the tree in post-order, meaning that you first visit the left and right subtrees, and then the root node.

Here is one possible implementation:

function reverseTree(node) {
  if (node === null) {
    return;
  }

  // Reverse the left and right subtrees
  reverseTree(node.left);
  reverseTree(node.right);

  // Swap the left and right subtrees
  [node.left, node.right] = [node.right, node.left];
}

This function can be called on the root node of the tree to reverse the entire tree. It works by recursively reversing the left and right subtrees of the current node, and then swapping the left and right subtrees of the current node. This effectively reverses the structure of the subtree rooted at the current node.

Create a CSS only Accordion UI

Jinson Abraham — Mon, 14 Mar 2022 16:28:56 GMT

Accordion ui is used on web pages to show or hide content based on user interaction. Normally it is built with the help of any JS library or custom JS with HTML and CSS.

These days we can easily build an accordion UI just using semantic HTML and CSS. That means we don't really need any JavaScript to get this job done. Instead we make use of the

and

HTML tags.

The

tag is used as a wrapper element for content that the user can open and close. The

tag denotes the visible heading for the details. Both these tags support global HTML attributes.

Let us build the markup for our accordion UI.

Our HTML code

<details class="accordion_element">
    <summary class="accordion_title">
        Lorem ipsum dolor sit amet
    </summary>
    <div class="accordion_content">    
        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Corporis quidem non deleniti, laudantium ab ex!. Ullam ipsa doloribus excepturi eligendi sint. Rerum delectus laborum inventore ut quibusdam deserunt fugit tempora.</p>        
    </div>
</details>

Now we will style the elements using the class attributes used in our markup.

Our CSS Code

.accordion_element {
  border: 1px solid #c4c4c7;
  margin: 5px auto;
  transition: all 200ms;
  border-radius: 5px;
  max-width: 70%;
}
.accordion_element[open] {
  background: #3872FF;
  border: 1px solid #5887f4;
  color: #fff;
}
.accordion_element[open] .accordion_title {
  color: #fff;
}
.accordion_title {
  padding: 10px 20px;
  color: #343437;
  font-weight: bold;
  font-size: 1.2em;
}
.accordion_content {
  padding: 10px 20px;
}

Thats it! Job done! Our CSS only accordion element is ready.

Check out the live preview on Codepen

https://codepen.io/web2feel/pen/RwjVGwX?editors=0100