DEV Community

Zoya Khan
Zoya Khan

Posted on

HTML Code for Date and Time Tool

#html #beginners #tooling #codereview 
<!DOCTYPE html>
<html>
  <head>
    <title>Current Date and Time</title>
  </head>
  <body>
    <h1>Current Date and Time</h1>
    <p>
      The current date and time is: <span id="datetime"></span>
    </p>
    <script>
      var datetimeElement = document.getElementById("datetime");
      var now = new Date();
      datetimeElement.textContent = now.toString();
    </script>
  </body>
</html>
Enter fullscreen mode Exit fullscreen mode

Top comments (2)

Collapse
 
nlxdodge profile image
NLxDoDge •

Maybe try to write some text before the code snippet as well, this way the reader who doesn't have experience knows what the code does 👍

Now with added color styling 😊
You can add litterally only html after the tree backticks on the same line like this:

Image description

Result:

<!DOCTYPE html>
<html>
  <head>
    <title>Current Date and Time</title>
  </head>
  <body>
    <h1>Current Date and Time</h1>
    <p>
      The current date and time is: <span id="datetime"></span>
    </p>
    <script>
      var datetimeElement = document.getElementById("datetime");
      var now = new Date();
      datetimeElement.textContent = now.toString();
    </script>
  </body>
</html>
Enter fullscreen mode Exit fullscreen mode

Happy Coding!

Collapse
 
zoyakhanblogger profile image
Zoya Khan •

thank you so much :)

Read next

the_codesmith profile image

Hitting your goals on time: Lessons from my first year in web development.

Abdulrahim -

wimadev profile image

5 costly mistakes when deploying Docker containers (and how to dodge them like a pro 😎)

Lukas Mauser -

mikeyoung44 profile image

Universal Text Segmentation Model Outperforms Specialized Systems Across Diverse Domains

Mike Young -

manishsundriyal profile image

The Ultimate Guide to Responsive Web Development

Manish Kumar Sundriyal -