Automatic Date, Month & Year

In this tutorial, we will delve into a simple approach for generating an automated digital representation of the date, month, and year using JavaScript and CSS. By integrating the given code, you can seamlessly showcase the current date in a format that is easily understandable for users on your webpage.

Video Tutoral at https://youtu.be/VaqLibBUiq8

The below are the code that can create date, month and year which be expressed in digits by using simple JavaScript and CSS.

Index

<!DOCTYPE html>
<html>

<head>
     <title>Date</title>
<link rel="stylesheet" href="style.css">
</head>
<body>

<div class="date">
     <script src="script.js"></script>
</div>

</body>
</html>

Script

var d = new Date();
var date = d.getUTCDate();
var month = d.getUTCMonth() + 1;
var year = d.getUTCFullYear();

if (date < 10) {
    date = "0" + date;
}

if (month < 10) {
    month = "0" + month;
}

document.write("Date: ");
var dateStr = date + "/" + month + "/" + year;
document.write(dateStr);

Stylesheet

body {
      background: #e483fc;
}

html {
   position:absolute;
   left: 50%;
   top: 50%;
   transform: translate(-50%, -50%);   
}

.date {
      padding: 15px;
      font-family: Arial;
      font-size: 2em;
      font-weight: bold;
      color: white;
      text-align: center;
      letter-spacing: 3px;
}

NEW POSTS

Main Menu

Automatic Date, Month & Year

No comments

Post a Comment

Pages

NEW POSTS

Main Menu

Automatic Date, Month & Year

You Might Also Like

No comments

Post a Comment

Pages