DEV Community: Chandra

JavaScript Sorting Multidimensional Array

Chandra — Tue, 16 Aug 2022 11:03:00 +0000

Sorting is a technique to arrange item to Increasing or Decreasing order

Sorting of item done by comparison of another item or element

Sort Single Dimensional Array

Single Dimensional Array have sorted by javascript sort method

Single dimension array sorting output

Sorting Multidimension Array

Multidimensional array sorted using array sort() method

Multidimensional array sorted on the basis of column index number

In below image we sort array on the basis of third column or element ( 2 index ) of inner array

Output of multidimension array sorting

TOP 4 Easiest Way To Align Div Center

Chandra — Fri, 05 Aug 2022 17:39:36 +0000

There are four way to align div horizontally and vertically center
1 - margin

2 - position

3 - flex

4 - grid

Align div by margin property

Horizontally align div with css margin property and it not align div in vertically center

<html>
  <head>
    <style>
      #parent-div{
        margin:20px;
        width:400px;
        height:150px;
        border:1px solid black;
      }
      #child-div{
        width:80px;
        height:80px;
        border:1px solid blue;
        margin:0 auto;
      }
    </style>
  </head>
  <body>
    <div id='parent-div'>
      <div id='child-div'></div>
    </div>
  </body>
</html>

Align div by position property

Div align center with horizontally and vertically by css position property

<html>
  <head>
    <style>
      #parent-div{
        margin:20px;
        width:400px;
        height:150px;
        border:1px solid black;
        position:relative;
      }
      #child-div{
        width:80px;
        height:80px;
        border:1px solid blue;
        top:50%;
        left:50%;
        transform:translate(-50% ,-50%);
        position:absolute;
      }
    </style>
  </head>
  <body>
    <div id='parent-div'>
      <div id='child-div'></div>
    </div>
  </body>
</html>

Align div center by flex property

flex property use to align div horizontally and vertically center . flex is easy method above two align method

Note : when align div by css flex property , you need to apply flex property to its parent div

<html>
  <head>
    <style>
      #parent-div{
        margin:20px;
        width:400px;
        height:150px;
        border:1px solid black;
        /* flex property apply */
        display:flex;
        justify-content:center; /* use for horizontally center */
        align-items:center; /* use for vertically center */
      }
      #child-div{
        width:80px;
        height:80px;
        border:1px solid blue;
      }
    </style>
  </head>
  <body>
    <div id='parent-div'>
      <div id='child-div'></div>
    </div>
  </body>
</html>

Align div center by grid property

Css grid also use to align div center from vertically and horizontally

Note : when align div by css grid property , you need to apply grid property to its parent div like css flex property

<html>
  <head>
    <style>
      #parent-div{
        margin:20px;
        width:400px;
        height:150px;
        border:1px solid black;
        /* grid property apply */
        display:grid;
        justify-items:center; /* use for horizontally center */
        align-items:center; /* use for vertically center */
      }
      #child-div{
        width:80px;
        height:80px;
        border:1px solid blue;
      }
    </style>
  </head>
  <body>
    <div id='parent-div'>
      <div id='child-div'></div>
    </div>
  </body>
</html>

Learn more artical related to Web Dev also visit

javascript live and static selector

Chandra — Mon, 09 Aug 2021 05:56:00 +0000

Live selector

live selector track element in html document in active form if new element found in document then select that new element by active selector
list of live selector
1.document.getElementsByClassName()
2.document.getElementsByName()
3.document.getElementsByTagName()

<h1> live selector</h1>
<p class='first'>fisrt</p>
<p class='first'>second</p>
<p class='first'>third</p>

var element = document.getElementsByClassName('first');

  for(let i=0;i<element.length;i++){
    console.log(i);
    }

setInterval(function(){
   for(let i=0;i<element.length;i++){
    console.log(i);
    }
},1000);

var newElmnt = document.createElement('p');
newElmnt.className='first';
var textNode = document.createTextNode('welcome to dev community ');
newElmnt.appendChild(textNode);

document.body.append(newElmnt);

output
0
1
2
output after 1 second
0
1
2
3

Static selector

Only one static selector in javascript
1.document.querySelectorAll()
Static selector select element from document in first time code execute after code execute any new element insert in document then static selector does not select new element

var element = document.querySelectorAll('.first');

  for(let i=0;i<element.length;i++){
    console.log(i);
    }


setInterval(function(){
   for(let i=0;i<element.length;i++){
    console.log(i);
    }
},1000);

var newElmnt = document.createElement('p');
newElmnt.className='first';
var textNode = document.createTextNode('welcome to dev community ');
newElmnt.appendChild(textNode);

document.body.append(newElmnt);

output
0
1
2
output after 1 second are same 
0
1
2

these are major difference between live and static selector
learn more about javascript tips please visit my website fast2learning