text: //globals
  let hour;
  let minute;
  let second;
  let type;
  let millisecond = 1000
  //extract html elements
  hour = document.getElementById('hour');
  minute = document.getElementById('minute');
  second = document.getElementById('second');
  type = document.getElementById('type');
  //handle time event
  function loadCurrentTime(){
  var event = new Date();   
  let currentHour = event.getHours();
  let currentMinute = event.getMinutes();  
  let currentSecond = event.getSeconds(); 
  hour.innerHTML = currentHour 
  minute.innerHTML = currentMinute 
  second.innerHTML = currentSecond
  let total_hours = 12
  //check its 'AM' or 'PM'
  if(currentHour>total_hours){
  	type.innerHTML = "PM"
  }else{
  	type.innerHTML = 'AM'
  }
  //check if hour is greater than 12 
  var extra_numbers = [13,14,15,16,17,18,19,20,21,22,23,24]
  if(currentHour==extra_numbers[0]){
  	hour.innerHTML = 1
  }
  if(currentHour==extra_numbers[1]){
  	hour.innerHTML = 2
  }
  if(currentHour==extra_numbers[2]){
  	hour.innerHTML = 3
  }
  if(currentHour==extra_numbers[3]){
  	hour.innerHTML = 4
  }
  if(currentHour==extra_numbers[4]){
  	hour.innerHTML = 5
  }
  if(currentHour==extra_numbers[5]){
  	hour.innerHTML = 6
  }
  if(currentHour==extra_numbers[6]){
  	hour.innerHTML = 7
  }
  if(currentHour==extra_numbers[7]){
  	hour.innerHTML = 8
  }
  if(currentHour==extra_numbers[8]){
  	hour.innerHTML = 9
  }
  if(currentHour==extra_numbers[9]){
  	hour.innerHTML = 10
  }
  if(currentHour==extra_numbers[10]){
  	hour.innerHTML = 11
  }
  if(currentHour==extra_numbers[11]){
  	hour.innerHTML = 12
  }
  }
  //update time every second
  setInterval(loadCurrentTime,millisecond)