JavaScript Exibir Data e Hora por Extenso

Por vezes nos nossos projetos de desenvolvimento Web queremos exibir a data por extenso, como também a exibição da hora, dos minutos, e dos segundos, mas de forma a esta ser atualizada em tempo real sem utilizarmos uma framework.

Deixo aqui o código da solução que eu encontrei.

(function(){
	// Função que permite selecionar os elementos do documento
	function $(seletor){
		return document.querySelector(seletor);
	}	
	
	function mostraCalendario(){
		var dHoje = new Date();
		var diasDaSemana = ["domingo", "segunda", "terça", "quarta", "quinta", "sexta", "sábado"];		
		var diaSemana = dHoje.getDay();
		// Operador ternário para colocação da palavra feira
		var nomeDiaDaSemana = diaSemana > 0 & diaSemana < 6 ? diasDaSemana[diaSemana] + "-feira" : diasDaSemana[diaSemana];
		var dia = dHoje.getDate()
		var mesesDoAno = ["Janeiro", "Fevereiro", "Março", "Abril", "Maio", "Junho", "Julho", "Agosto", "Setembro", "Outubro", "Novembro", "Dezembro"];
		var mes = dHoje.getMonth();
		var mesDoAno = mesesDoAno[mes];
		var ano = dHoje.getFullYear();
		// Utilização de operador ternário para adiionar o prefixo zero quando o digito for inferior a dez
		var hora = dHoje.getHours() < 10 ? "0" + dHoje.getHours() : dHoje.getHours();
		var min = dHoje.getMinutes() < 10 ? "0" + dHoje.getMinutes() : dHoje.getMinutes();
		var sec = dHoje.getSeconds() < 10 ? "0" + dHoje.getSeconds() : dHoje.getSeconds();
		// Formatação da saída
		var dataPorExtenso = "<span id='data'>" + nomeDiaDaSemana + ", " + dia + " de " + mesDoAno + " de " + ano + "</span>";
		var horas = "<span id='horas'>" + hora + ":" + min + ":" + sec + "</span>";
		// Coloca data na div com o ID = calendario
		$('#calendario').innerHTML = dataPorExtenso + " - " + horas;
	}
	
	// Executa a função mostrarCalendario a cada segundo
	setInterval(function(){		
		mostraCalendario();
	}, 1000);

})();