Creating a Dynamic User Interface with JavaScript- jQuery and react js

Using Jquery
Generate dynamic contact form HTML
Generate dynamic input field
Using Javascript
Using React Js

Using jquery

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Your Page Title</title>
</head>
<body>

    <!-- Header Container -->
    <div id="header-container"></div>

    <!-- Product Container -->
    <div id="product-container"></div>

    <!-- Contact Form Container -->
    <div id="contact-section"></div>

    <!-- Slider Container -->
    <div id="slider-container"></div>

    <!-- Footer Container -->
    <div id="footer-container"></div>

    <!-- Include jQuery -->
    <script src="https://code.jquery.com/jquery-3.6.4.min.js"></script>

    <!-- Your JavaScript Code -->
    <script>
        // Combine and append header HTML
  var headerHtml = (function () {
            var html = '<header>' +
                '<h1>Welcome to My Website</h1>' +
                '<nav>' +
                '<ul>' +
                '<li><a href="/">Home</a></li>' +
                '<li><a href="/about">About</a></li>' +
                '<li><a href="/contact">Contact</a></li>' +
                '</ul>' +
                '</nav>' +
                '</header>';
            return html;
        })();

        // Product Gallery HTML
        var productGalleryHtml = (function () {
            var html = '<div class="product-gallery">' +
                // ... generate dynamic product gallery HTML here
                '</div>';
            return html;
        })();

        // Contact Form HTML
        var contactFormHtml = (function () {
            var html = '<form>' +
                // ... generate dynamic contact form HTML here
                '</form>';
            return html;
        })();

        // Slider HTML
        var sliderHtml = (function () {
            var html = '<div class="slider">' +
                // ... generate dynamic slider HTML here
                '</div>';
            return html;
        })();

        // Footer HTML
        var footerHtml = (function () {
            var html = '<footer>' +
                '<p>&copy; 2024 My Website</p>' +
                '</footer>';
            return html;
        })();
        // Append each HTML to its respective container
        $('#header-container').append(headerHtml);
        $('#product-container').append(productGalleryHtml);
        $('#contact-section').append(contactFormHtml);
        $('#slider-container').append(sliderHtml);
        $('#footer-container').append(footerHtml);
    </script>
</body>
</html>

Explanation

If you want to combine these variables using jQuery and append the resulting HTML to specific containers, you can modify the code as follows:

// Combine and append header HTML
var headerHtml = (function () {
    var html = '<header>';
    html += '<h1>Welcome to My Website</h1>';
    html += '<nav>';
    html += '<ul>';
    html += '<li><a href="/">Home</a></li>';
    html += '<li><a href="/about">About</a></li>';
    html += '<li><a href="/contact">Contact</a></li>';
    html += '</ul>';
    html += '</nav>';
    html += '</header>';
    return html;
})();

// Combine and append product gallery HTML
 var productGalleryHtml = (function () {
            var html = '<div class="product-gallery">';

            // Generate dynamic product gallery items
            for (var i = 1; i <= 3; i++) {
                html += '<div class="product-item">Product ' + i + '</div>';
            }

            html += '</div>';
            return html;
        })();

        // Generate dynamic contact form HTML
          var contactFormHtml = (function () {
            var html = '<form>';

            // Generate dynamic form fields
            for (var i = 1; i <= 3; i++) {
                var fieldId = 'field' + i;

                html += '<label for="' + fieldId + '">Field ' + i + ':</label>';
                html += '<input type="text" id="' + fieldId + '" name="' + fieldId + '"><br>';
            }

            html += '<button type="submit">Submit</button>';
            html += '</form>';
            return html;
        })();

        // Generate dynamic slider HTML
        var sliderHtml = (function () {
            var html = '<div class="slider">';

            // Generate dynamic slider items
            for (var i = 1; i <= 5; i++) {
                html += '<div class="slider-item">Slide ' + i + '</div>';
            }

            html += '</div>';
            return html;
        })();

// Combine and append footer HTML
var footerHtml = (function () {
    var html = '<footer>';
    html += '<p>&copy; 2024 My Website</p>';
    html += '</footer>';
    return html;
})();

// Append each HTML to its respective container
$('#header-container').append(headerHtml);
$('#product-container').append(productGalleryHtml);
$('#contact-section').append(contactFormHtml);
$('#slider-container').append(sliderHtml);
$('body').append(footerHtml);

In this example, each HTML variable is appended to its corresponding container using jQuery. Ensure that you have containers in your HTML with the specified IDs (header-container, product-container, contact-section, slider-container). Adjust the container IDs according to your HTML structure.

Using Javascript

Here are five examples where a variable is used to store HTML code generated within an immediately invoked function expression (IIFE):

Example 1:

var headerHtml = (function () {
    var html = '<header>';
    html += '<h1>Welcome to My Website</h1>';
    html += '<nav>';
    html += '<ul>';
    html += '<li><a href="/">Home</a></li>';
    html += '<li><a href="/about">About</a></li>';
    html += '<li><a href="/contact">Contact</a></li>';
    html += '</ul>';
    html += '</nav>';
    html += '</header>';
    return html;
})();

// Later in the code, you can use 'headerHtml' to include the generated header HTML.
document.body.innerHTML += headerHtml;

Example 2:

var productGalleryHtml = (function () {
    var html = '<div class="product-gallery">';
    // ... generate dynamic product gallery HTML here
    html += '</div>';
    return html;
})();

// Include 'productGalleryHtml' within a larger HTML structure for displaying products.
document.getElementById('product-container').innerHTML += productGalleryHtml;

Example 3:

var contactFormHtml = (function () {
    var html = '<form>';
    // ... generate dynamic contact form HTML here
    html += '</form>';
    return html;
})();

// Later, you can insert 'contactFormHtml' into a specific section of your page.
document.getElementById('contact-section').innerHTML += contactFormHtml;

Example 4:

var sliderHtml = (function () {
    var html = '<div class="slider">';
    // ... generate dynamic slider HTML here
    html += '</div>';
    return html;
})();

// Append 'sliderHtml' to a container to display the dynamically generated slider.
document.getElementById('slider-container').innerHTML += sliderHtml;

Example 5:

var footerHtml = (function () {
    var html = '<footer>';
    html += '<p>&copy; 2024 My Website</p>';
    html += '</footer>';
    return html;
})();

// Include 'footerHtml' to display the dynamically generated footer in your web page.
document.body.innerHTML += footerHtml;

In each example, the IIFE is used to encapsulate the HTML generation logic, and the result is stored in a variable for later use within the code.

Using React js

import React from 'react';

// Header Component
const Header = () => {
  const headerHtml = (
    '<header>' +
    '<h1>Welcome to My Website</h1>' +
    '<nav>' +
    '<ul>' +
    '<li><a href="/">Home</a></li>' +
    '<li><a href="/about">About</a></li>' +
    '<li><a href="/contact">Contact</a></li>' +
    '</ul>' +
    '</nav>' +
    '</header>'
  );

  return (
    <div id="header-container" dangerouslySetInnerHTML={{ __html: headerHtml }}></div>
  );
};

// Product Gallery Component
const ProductGallery = () => {
  const productGalleryHtml = (
    '<div class="product-gallery">' +
    // ... generate dynamic product gallery HTML here
    '</div>'
  );

  return (
    <div id="product-container" dangerouslySetInnerHTML={{ __html: productGalleryHtml }}></div>
  );
};

// Contact Form Component
const ContactForm = () => {
  const contactFormHtml = (
    '<form>' +
    // ... generate dynamic contact form HTML here
    '</form>'
  );

  return (
    <div id="contact-section" dangerouslySetInnerHTML={{ __html: contactFormHtml }}></div>
  );
};

// Slider Component
const Slider = () => {
  const sliderHtml = (
    '<div class="slider">' +
    // ... generate dynamic slider HTML here
    '</div>'
  );

  return (
    <div id="slider-container" dangerouslySetInnerHTML={{ __html: sliderHtml }}></div>
  );
};

// Footer Component
const Footer = () => {
  const footerHtml = (
    '<footer>' +
    '<p>&copy; 2024 My Website</p>' +
    '</footer>'
  );

  return (
    <div id="footer-container" dangerouslySetInnerHTML={{ __html: footerHtml }}></div>
  );
};

// App Component
const App = () => (
  <div>
    {/* Header Container */}
    <Header />

    {/* Product Container */}
    <ProductGallery />

    {/* Contact Form Container */}
    <ContactForm />

    {/* Slider Container */}
    <Slider />

    {/* Footer Container */}
    <Footer />
  </div>
);

export default App;

Another Example

import React from 'react';

// Header Component
const Header = () => (
  <header>
    <h1>Welcome to My Website</h1>
    <nav>
      <ul>
        <li><a href="/">Home</a></li>
        <li><a href="/about">About</a></li>
        <li><a href="/contact">Contact</a></li>
      </ul>
    </nav>
  </header>
);

// Product Gallery Component
const ProductGallery = () => (
  <div className="product-gallery">
    {/* ... generate dynamic product gallery HTML here */}
  </div>
);

// Contact Form Component
const ContactForm = () => (
  <form>
    {/* ... generate dynamic contact form HTML here */}
  </form>
);

// Slider Component
const Slider = () => (
  <div className="slider">
    {/* ... generate dynamic slider HTML here */}
  </div>
);

// Footer Component
const Footer = () => (
  <footer>
    <p>&copy; 2024 My Website</p>
  </footer>
);

// App Component
const App = () => (
  <div>
    {/* Header Container */}
    <div id="header-container">
      <Header />
    </div>

    {/* Product Container */}
    <div id="product-container">
      <ProductGallery />
    </div>

    {/* Contact Form Container */}
    <div id="contact-section">
      <ContactForm />
    </div>

    {/* Slider Container */}
    <div id="slider-container">
      <Slider />
    </div>

    {/* Footer Container */}
    <div id="footer-container">
      <Footer />
    </div>
  </div>
);

export default App;

Using Usestate

In React, you generally don't use direct manipulation of the DOM as you would with jQuery. Instead, you would update the React component's state and let React handle the rendering. Below is an example of how you could structure a React component to achieve similar behavior:

import React, { useState } from 'react';

const App = () => {
  const [headerHtml, setHeaderHtml] = useState('<h1>Welcome to My Website</h1>'); // Replace with your actual HTML
  const [productGalleryHtml, setProductGalleryHtml] = useState('<div class="product-gallery"></div>'); // Replace with your actual HTML
  const [contactFormHtml, setContactFormHtml] = useState('<form></form>'); // Replace with your actual HTML
  const [sliderHtml, setSliderHtml] = useState('<div class="slider"></div>'); // Replace with your actual HTML
  const [footerHtml, setFooterHtml] = useState('<footer>&copy; 2024 My Website</footer>'); // Replace with your actual HTML

  return (
    <div>
      {/* Header Container */}
      <div id="header-container" dangerouslySetInnerHTML={{ __html: headerHtml }}></div>

      {/* Product Container */}
      <div id="product-container" dangerouslySetInnerHTML={{ __html: productGalleryHtml }}></div>

      {/* Contact Form Container */}
      <div id="contact-section" dangerouslySetInnerHTML={{ __html: contactFormHtml }}></div>

      {/* Slider Container */}
      <div id="slider-container" dangerouslySetInnerHTML={{ __html: sliderHtml }}></div>

      {/* Footer Container */}
      <div id="footer-container" dangerouslySetInnerHTML={{ __html: footerHtml }}></div>
    </div>
  );
};

export default App;