JAVASCRIPT - How to sort an array

// ancending order
    
var numbers = [ 10, 12, 5, 7.5, 7 ];
numbers.sort( ( a, b ) => a - b );
numbers.forEach( item => {
  document.write( item + "
" );
});

document.write( "
" );

// descending order
    
numbers.sort( ( a, b ) => b - a );
numbers.forEach( item => {
  document.write( item + "
" );
});

Output:

5
7
7.5
10
12

12
10
7.5
7
5

JAVASCRIPT - How to split string into parts

var s = "This;is;a;text";
var vars = s.split( ";" );
vars.forEach( element => {
  document.write( element + "
" );
} );

Output:

This
is
a
text

JAVASCRIPT - How to make an action 5 seconds after page loading

This code in HEAD section:

<script>
setTimeout( LoadingProc, 5000 );
    
function LoadingProc() {
  alert( "5 seconds gone -> loading procedure." );
}
</script>

JAVASCRIPT - How to work with classes and instances

Base class:

class Shape {
   
  desc = "";

  constructor( _desc ) {
    this.desc = _desc;
  }

  get2Desc() {
    return this.desc + this.desc;
  }

}

Instance of class and calling class method:

b.addEventListener( 'click', function () {    
      
  const myShape = new Shape( "this is a desc" );
  console.log( myShape.get2Desc() );
  
}

Output:

this is a descthis is a desc

HTML - How to make a different color for blank textbox

<style>
  .validated:invalid {
    background: #FAC3C9;
  }

  .validated:valid {
    background: #BDF0A8;
   }
</style>

<form action="action.php">
  <input required name="name1" class="validated" type="text" />
</form>

JAVASCRIPT - getElementById() vs querySelector()

Different methods for same task - find the item by its ID.

var progressBar = document.getElementById( "progress" );
var progressBar = document.querySelector( "#progress" );
var progressBar = document.querySelector( "[id=progress]" );

HTML - Some new HTML5 input fields

<div class="form" width="100px">
  <input name="e1" type="date" />
  <input name="e2" type="color" />
  <input name="e3" type="datetime-local" />
  <input name="e4" type="email" />
  <input name="e5" type="month" />
  <input name="e6" type="week" />
  <input name="e7" type="file" />
</div>

Output: