Build a Country Timezone Converter and Time Difference Calculator in Browser Using Javascript Full Project For Beginners

Build a Country Timezone Converter and Time Difference Calculator in Browser Using Javascript Full Project For Beginners

 

Welcome folks today in this blog post we will be building a country timezone converter and time difference calculator in browser using vanilla javascript.All the full source code of the application is given below.

 

 

 

Get Started

 

 

 

In order to get started you need to make an index.html file and copy paste the following code

 

 

index.html

 

 

<body onload="updateTimeZone()">

<div id="ConversionResultsDIV"></div> 

<form name="form1"> 
  <select size="5" name="lstCity" onchange="updateTimeZone();"> 
  <option value="60" selected>Berlin 
  <option value="330">Bombay 
  <option value="0">London 
  <option value="180">Moscow 
  <option value="-300">New York (EST) 
  <option value="60">Paris 
  <option value="-480">San Francisco (PST) 
  <option value="600">Sydney 
  </select> 
  
  <p> It’s summertime in the selected city and its country adjusts for summertime daylight saving 
    <input type="checkbox" name="chkDaylightSaving"    onclick="return chkDaylightSaving_onclick()"> 
  </p> 
</form>

</body>

 

 

And now make a script.js file and copy paste the following code

See also  jQuery Tutorial to Download Multiple ZIP Files at Once on Button Click in Browser Using HTML5 & Javascript Full Project For Beginners

 

 

script.js

 

 

var timeDiff;
var selectedCity;
var daylightSavingsAdjust = 0;

function updateTimeZone(){
  var lstCity = document.form1.lstCity;
  timeDiff = lstCity.options[lstCity.selectedIndex].value;
  selectedCity = lstCity.options[lstCity.selectedIndex].text;
  updateTime();
}

function getTimeString(dateObject){
  var timeString;
  var hours = dateObject.getHours();
  if(hours < 10){
    hours = "0" + hours;
  }
  
  var minutes = dateObject.getMinutes();
  if(minutes<10){
    minutes = "0" + minutes;
  }
  
  var seconds = dateObject.getSeconds();
  if(seconds<10){
    seconds ="0" + seconds;
  }
  
  timeString = hours + ":" + minutes + ":" + seconds;
  return timeString;
}
  
function updateTime(){
  var nowTime = new Date();
  var resultsText = "<p>Local Time is " + getTimeString(nowTime) + "</p>";
  
  nowTime.setMinutes(nowTime.getMinutes() + nowTime.getTimezoneOffset() + parseInt(timeDiff) + daylightSavingsAdjust);
  
  resultsText += "<p>" + selectedCity + " time is "+ getTimeString(nowTime) 
  + "</p>";
  
  document.getElementById("ConversionResultsDIV").innerHTML = resultsText;
}

function chkDaylightSaving_onclick(){
  if(document.form1.chkDaylightSaving.checked){
    daylightSavingsAdjust = 60;
  }
  
  else{
    daylightSavingsAdjust = 0;
  }
  
  updateTime(); 
}

 

 

And now when you open index.html file inside the browser you will see the below screenshot

 

 

Leave a Reply