Javascript : Date & Time Program

Here’s a new program for you. In this program, we will learn how to build a Date & Time Program in JavaScrip.

Note: By default, JavaScript will use the browser’s time zone and display a date as a full text string

.bg-color{
				display:none;
				font-size: 24px;
				padding: 30px;				
			}
			#showDNT {
				font-size: 24px;
				padding: 6px;
				background-color: #0c2e8a;
				color: white;
			}
			#container{
				width:80%;
				margin:auto;
				text-align:center;
			}

<div id="container">
		<h2 id="heading"></h2>	
		
		<button id="showDNT" type="button" onclick="showDate();">Click me to display Date and Time.</button>
		<p id="date"></p>
		
		<button class="bg-color"></button>
		<button class="bg-color"></button>
		<button class="bg-color"></button>
		<button class="bg-color"></button>
		<button class="bg-color"></button>
	</div>

document.getElementById("heading").innerHTML = "Javascript Show Date Time Program on button Onclick";		
		
		function showDate(){
			
			var bg_color = document.getElementsByClassName("bg-color");
		
			var colors = ["red" , "green" , "indigo" , "blue" , "black"];	
			
			var days = ["Sunday","Monday","Tuesday","Wednesday","Thursday","Friday","Saturday"];
			var months = ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"];

			var d = new Date();
			var day = d.getDate();
			var month = months[d.getMonth()];
			var year = d.getFullYear();
			var time = formatAMPM(new Date);
			var weekday = days[d.getDay()];
			
			var date_and_time = [day , month, year , time , weekday];
			
			for(var i=0; i < bg_color.length; i++){
				bg_color.item(i).style.display = "inline-block";	
				bg_color.item(i).style.color = "white";			
				bg_color.item(i).style.backgroundColor = colors[i];	
				bg_color.item(i).classList.add("bg-color");
				bg_color.item(i).innerHTML = date_and_time[i];			
			}
		}
		
		function formatAMPM(date) {
		  var hours = date.getHours();
		  var minutes = date.getMinutes();
		  var ampm = hours >= 12 ? 'PM' : 'AM';
		  hours = hours % 12;
		  hours = hours ? hours : 12; // the hour '0' should be '12'
		  minutes = minutes < 10 ? '0'+minutes : minutes;
		  var strTime = hours + ':' + minutes + ' ' + ampm;
		  return strTime;
		}