Help to fix the datetime, please!

Hello everyone

I watch this interesting website and it´s very useful, with some advices and tips that support the beginners like me:

I was looking for a datetime widget in the internet and i found this for luck .

However i found difficulties associated with the order or the library about the javascript, so i would like your help .
I send you my code, below.


<!DOCTYPE html>
<html lang="pt-PT">
   <meta charset="UTF-8">
   <meta http-equiv="X-UA-Compatible" content="IE=edge">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <link rel="stylesheet" href="">
   <link rel="stylesheet" href="">
   <link rel="stylesheet" href=" Sans">
   <link rel="stylesheet" href="">
   <link rel="stylesheet" href="style.css">

   <link rel="stylesheet" href="scss.scss">
   <link rel="stylesheet" href="">
   <link rel="stylesheet" href="">
   <script src="babel.js"></script>

     h1,h2,h3,h4,h5,h6 {font-family: "Oswald"}
     body {font-family: "Open Sans"}

 <body class="w3-light-grey">

   <!-- Navigation bar with social media icons -->
   <div class="w3-bar w3-black w3-hide-small w3-mobile">
     <a href="" class="w3-bar-item w3-button w3-mobile"><i class="fa fa-behance"></i></a>
     <a href="" class="w3-bar-item w3-button w3-mobile"><i class="fa fa-linkedin"></i></a>
     <a href="#" class="w3-bar-item w3-button w3-right"><i class="fa fa-search w3-mobile"></i></a>
     <a href="#" class="w3-btn w3-hover-red w3-mobile">Acerca de mim</a>
     <a href="#" class="w3-btn w3-hover-red w3-mobile">Acerca de mim</a>
     <a href="#" class="w3-btn w3-hover-red w3-mobile">Acerca de mim</a>
     <a href="#" class="w3-btn w3-hover-red w3-mobile">Acerca de mim</a>

<p id="demo"></p>

       const d = new Date();
       document.getElementById("demo").innerHTML = d;

<div class="alarm-clock">
   <div class="date">
   	<span class="month"></span>
   	<span class="day"></span>,
   	<span class="year"></span>

   <div class="time">
   	<span class="hours"></span>
   	<span class="colon">:</span>
   	<span class="minutes"></span>
   	<span class="colon">:</span>
   	<span class="seconds"></span>

<a class="weatherwidget-io" href="" data-label_1="VIANA DO CASTELO" data-label_2="WEATHER" data-icons="Climacons Animated" data-days="5" data-theme="sky" >VIANA DO CASTELO WEATHER</a>
!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);;js.src='';fjs.parentNode.insertBefore(js,fjs);}}(document,'script','weatherwidget-io-js');

       <!-- w3-content defines a container for fixed size centered content, 
and is wrapped around the whole page content, except for the footer in this example -->
<div class="w3-content" style="max-width:1600px">

 <!-- Header -->
 <header class="w3-container w3-center w3-padding-48 w3-white">
   <h1 class="w3-xxxlarge"><b>JANE BLOGLIFE</b></h1>
   <h6>Welcome to the blog of <span class="w3-tag">Jane's world</span></h6>
    background-color: rgb(12,12,12);
    color: #fff;
    border:7px solid rgba(255,252,252);
    box-shadow 0 2px 10px rgba (0,0,0,0,16);
               0 2px 10px 0 rgba (0,0,0,0,12);
    padding: 8px;
    width: 500px;


const month = document.querySelector('.month');
const day = document.querySelector('.day');
const year = document.querySelector('.year');

function setDate() {
	const now = new Date();
	const mm = now.getMonth();
	const dd = now.getDate();
	const yyyy = now.getFullYear();
	const secs = now.getSeconds();
	const mins = now.getMinutes();
	const hrs = now.getHours();
	const monthName = [
	if (hrs > 12) {
		hours.innerHTML = hrs - 12;
	} else {
		hours.innerHTML = hrs;
	if (secs < 10) {
		seconds.innerHTML = '0' + secs;
	} else {
		seconds.innerHTML = secs;
	if (mins < 10) {
		minutes.innerHTML = '0' + mins;
	} else {
		minutes.innerHTML = mins;
	month.innerHTML = monthName[mm];
	day.innerHTML = dd;
	year.innerHTML = yyyy;


My doubts are below:

My propose is do a digital clock with date and time like below and put it on my website.

here is a simple clock snippet that may help?
codepen clock

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.