tararoutray

<!-- jQuery -->
<script src="jquery/3.6.0/jquery.min.js"></script>

tararoutray

<!-- jsTree CSS -->
<link rel="stylesheet" href="jstree/3.3.12/themes/default/style.min.css" />

<!-- jsTree JS -->
<script src="jstree/3.3.12/jstree.min.js"></script>

tararoutray

/**
 * Check if the page content has been loaded completely.
 */
$(function () {
    /**
     * Initialize the jsTree instance on the HTML content.
     * Display the tree view.
     */
    $("#tree-view-from-html").jstree();
    /**

tararoutray

<div>
    <h1>Represent HTML and JSON Data in Tree Structure Using jsTree</h1>
    <!-- Container to show tree views -->
    <div id="tree-view-container">
        <!-- Container to show tree view from HTML -->
        <div class="tree-view-container-item">
            <h2>Tree View from HTML Content</h2>
            <!-- Tree View Element -->
            <div id="tree-view-from-html">
                <ul>

tararoutray

h1 {
    text-align: center;
}
h2 {
    margin: 0;
}
#multi-step-form-container {
    margin-top: 5rem;
}
.text-center {

tararoutray

/**
 * Define a function to navigate betweens form steps.
 * It accepts one parameter. That is - step number.
 */
const navigateToFormStep = (stepNumber) => {
    /**
     * Hide all form steps.
     */
    document.querySelectorAll(".form-step").forEach((formStepElement) => {
        formStepElement.classList.add("d-none");

tararoutray

<div>
    <h1>Create a Multi-Step Form Using HTML, CSS, and JavaScript</h1>
    <div id="multi-step-form-container">
        <!-- Form Steps / Progress Bar -->
        <ul class="form-stepper form-stepper-horizontal text-center mx-auto pl-0">
            <!-- Step 1 -->
            <li class="form-stepper-active text-center form-stepper-list" step="1">
                <a class="mx-2">
                    <span class="form-stepper-circle">
                        <span>1</span>

tararoutray

h1 {
    text-align: center;
    margin-bottom: 3rem;
}
#character-counter-container {
    border: 1px solid rgba(0, 0, 0, 0.1);
    border-radius: 20px;
    margin: 0 auto;
    padding: 3rem;
    width: 60%;

tararoutray

/**
 * Select the textarea element.
 */
const textAreaElement = document.querySelector("#message");
/**
 * Select the character counter element.
 */
const characterCounterElement = document.querySelector("#character-counter");
/**
 * Select the element that shows the number of characters typed in the textarea.

tararoutray

<div>
    <h1>Character Counter for Text Area Element Using JavaScript</h1>
    <section id="character-counter-container">
        <form>
            <label>Message</label>
            <textarea name="message" id="message" class="textarea" rows="10" placeholder="Write a message.." maxlength="300"></textarea>
            <div id="character-counter">
                <span id="typed-characters">0</span>
                <span>/</span>
                <span id="maximum-characters">300</span>