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: https://codepen.io/joshuaward/pen/pWXrGM

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.

index.html

<!DOCTYPE html>
<html lang="pt-PT">
<head>
   <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="https://www.w3schools.com/w3css/4/w3.css">
   <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Oswald">
   <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Open Sans">
   <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
   <link rel="stylesheet" href="style.css">



   <link rel="stylesheet" href="scss.scss">
   <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js">
   <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">
   <script src="babel.js"></script>
   
   <title>Document</title>
   </head>

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

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

   <!-- Navigation bar with social media icons -->
   <div class="w3-bar w3-black w3-hide-small w3-mobile">
     <a href="https://www.behance.net/Josemmorei292f" class="w3-bar-item w3-button w3-mobile"><i class="fa fa-behance"></i></a>
     <a href="https://www.linkedin.com/in/jammoreira/" 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>
   </div>

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

       <script>
       const d = new Date();
       document.getElementById("demo").innerHTML = d;
       </script>





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

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




<a class="weatherwidget-io" href="https://forecast7.com/pt/41d69n8d83/viana-do-castelo/" 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>
<script>
!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src='https://weatherwidget.io/js/widget.min.js';fjs.parentNode.insertBefore(js,fjs);}}(document,'script','weatherwidget-io-js');
</script>
     
   

       <!-- 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>
 </header>
     </div>
</body>
</html>
style.css
.time{
    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;
    text-align:center;
    width: 500px;
}

js.js

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 = [
		'January','February','March','April',
		'May','June','July','August','September',
		'October','November','December'
	];
	
	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;
}

setInterval(setDate,1000);

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.