Create an Interactive Web Page with Jquery and JS DOM.

0 Shares

Table of Contents

What is DOM ?

DOM stands for Document Object Model. DOM is basically an API which is also a component of browser API. A browser has several components.

JS stack

Bowser API

HTML parser

CSS parser

Etc.

Bowser API is written in the same language in which the bowser is written. So e.g. if you consider Google chrome which is written in C++, so the Browser API is also written in C++.

Then you must be wondering “How can we access DOM inside javascript” ?

This feature in the field of computer science where two different technologies can talk to each other is called “Software Interoperability“.

DOM API provides an Object called “document”

Using this document object we can call the methods and properties of the DOM API from inside a Javascript code.

e.g.

document.getElementById(“#elementId”);

We can access dom object using window.document as well as document is a part of global window object.

But you can still ask what is the use of this “DOM API”. What purpose does it serve basically ?

When we write some HTML and try to open with a browser then before it gets rendered on the browser, the DOM API converts the whole HTML into a tree like structure, so every html element ( which are also called “node” ) will be accessible easily by with the help of DOM API.

The tree structure which is rendered on the browser is called BrowserDOM.

The DOM who reside on the server side is called “RealDOM/ ServerDOM”

BrowserDOM is nothing but a copy of the “RealDOM”

What is JQUERY ?

JQUERY is a Javascript library which has many inbuilt features that help to design an interactive webpage. There are a huge number of predefined methods which are accessible while designing your webpage that reduces your coding efforts.

e.g if you want to build an “expand and collapse” functionality to your page, then no need to build that from scratch. You can embed jQuery and CDN to your web page and you can directly call the expand() and collapse() methods on the html element.

To access the Jquery CDN , go to the link Here.

Click on the link below “minified”.

You will get a popup screen link below.

Click on the copy icon.

And then paste it in your HTML page inside <head></head> tag.

JQUERY basically uses DOM as an underlying technology and helps to build interactive web pages by creating some methods on top of that. Those methods help developers to write less code.

Lets create a simple app. Here is how it looks like below

So i am sharing the HTML , CSS and JAVA SCRIPT CODE for this. I will also share the github link as well.

index.html

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>CRUD APP</title>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.0.0/dist/css/bootstrap.min.css"
    integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
  <link rel="stylesheet" href="style.css">
  <script src="https://code.jquery.com/jquery-3.6.1.min.js"
    integrity="sha256-o88AwQnZB+VDvE9tvIXrMQaPlFFSUTR+nldQm1LuPXQ=" crossorigin="anonymous"></script>
</head>

<body>
  <div class="container-fluid">
    <div class="col-md-10">
      <h1 class="display-4 bg-dark p-5 text-white text-center">SAMPLE APP</h1><br>
      <div class="row justify-content-center">
        <div class="col-sm-4 border p-3">

          <form action="" id="formData">
            <div class="form-group">
              <label for="firstName">First Name:</label>
              <input type="firstName" class="form-control" id="firstName" required>
            </div><br>
            <div class="form-group">
              <label for="lastName">First Name:</label>
              <input type="lastName" class="form-control" id="lastName" required>
            </div>
            <input type="submit" class="btn btn-primary" value="Submit">
            <button class="btn btn-danger" id="deleteBtn">deleteAll</button>
          </form>
          
        </div>

        <div class="col-sm-4 text-center displayBox" id="displayBox">
          <div class="outputStyle p-2" id="outputBlock">
          </div>
        </div>

      </div>
    </div>
  </div>
  <script src="script.js"></script>
</body>

</html>

script.js

const form_data = [];
const form_data_obj = {}
var i = 0;
var parent = document.getElementById("outputBlock")

$("#formData").submit(function (e) {
  e.preventDefault();

  var f_name = $("#firstName").val();
  var l_name = $("#lastName").val();

  $("#firstName").val('');
  $("#lastName").val('');

  while ((parent.firstChild) && (parent.firstChild.tagName == 'SPAN')) {
    parent.removeChild(parent.firstChild);
  }

  form_data_obj.f__name = f_name;
  form_data_obj.l__name = l_name;
  form_data.push(form_data_obj);

  console.log(form_data[form_data.length - 1].f__name);

  var para = document.createElement("p");
  document.querySelector("#outputBlock").append(para);
  para.innerHTML = form_data[form_data.length - 1].f__name + " " + form_data[form_data.length - 1].l__name;
  para.setAttribute('class', 'paraStyle');

});

$("#deleteBtn").on('click', () => {
  var span = document.createElement("span");

  while (parent.firstChild) {
    parent.removeChild(parent.firstChild);
  }

  $("#outputBlock").append(span);
  span.innerHTML = "All records Deleted, Add more Records";
})

style.css

.outputStyle span {
  margin: 10px;
}

.outputStyle {
  float: right;
  margin: 5px;
  

}

.outputStyle > .paraStyle {
  background: rgba(0, 255, 255, 0.5);
  padding: 10px;
  border: 1px red solid;
  font-size: 20px;

}

.displayBox {
  margin: 20px;
  font-size: 20px;
  color: grey;
}

GITHUB LINK : CLICK HERE

Understanding GraphQL: Efficient Data Fetching for Modern APIs

Mastering Optional Chaining in JavaScript: Simplify Nested Property Access for Error-Free Code

What is responsive web design

Why should you learn DSA ? Important Searching Algorithms [2024]