How do I center, change the color and font of this string?-CodePudding

I don't know the first thing about coding or development, so if somebody could just re-paste my code with the corrections included that would be incredibly helpful. I am adding a current date widget to my website, but have no ability to center it, change the font color to white or change the font at all. Could somebody help me?

Here is the code I'm using in full:

let date = new Date();
let day = String(date.getDate());
let weekday = date.getDay();
let month = date.getMonth();
let year = String(date.getFullYear());
const monthNames = ["January", "Febuary", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"]
const weekdays = ["Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"]
month = monthNames[month];
weekday = weekdays[weekday]
let fullDate = (weekday   " "   day   ", "   month   ", "   year);
document.write(fullDate);

CodePudding user response：

Like this

Note I wrapped the script in a page load event

Change document.body.innerHTML = to for example

document.getElementById("myDateContainer").innerHTML =

if you have somewhere else to put it

myDateContainer could be <div id="myDateContainer"></div> somewhere on your page

<!doctype html>
<html>

<head>
  <title>Some title</title>
  <style>
    .date {
      display: table;
      margin: 0 auto;
      color: red;
      font-family: Arial, Helvetica, sans-serif;
    }
  </style>
  <script>
    window.addEventListener("load", function() {
      let date = new Date();
      let day = String(date.getDate());
      let weekday = date.getDay();
      let month = date.getMonth();
      let year = String(date.getFullYear());
      const monthNames = ["January", "Febuary", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"]
      const weekdays = ["Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"]
      month = monthNames[month];
      weekday = weekdays[weekday]
      let fullDate = (weekday   " "   day   ", "   month   ", "   year);
      document.body.innerHTML  = `<span >${fullDate}</span>`;
    })
  </script>
</head>

<body>
</body>

</html>

CodePudding user response：

**For centering add ** your style tag following before "color:red"

  <style>
    .date {
      display: flex;
      justify-content: center;
      align-items: center;
    }
  </style>

Your code eventually should look like this: thanks to @mplungjan

<html>
<head>
  <title>Some title</title>
  <style>
    .date {
      display: flex;
      justify-content: center;
        align-items: center;
      color: red;
      font-family: Arial, Helvetica, sans-serif;
    }
  </style>
  </head>
  <script>
    window.addEventListener("load", function() {
      let date = new Date();
      let day = String(date.getDate());
      let weekday = date.getDay();
      let month = date.getMonth();
      let year = String(date.getFullYear());
      const monthNames = ["January", "Febuary", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"]
      const weekdays = ["Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"]
      month = monthNames[month];
      weekday = weekdays[weekday]
      let fullDate = (weekday   " "   day   ", "   month   ", "   year);
      document.body.innerHTML  = `<span >${fullDate}</span>`;
    })
  </script>
</head>

<body>
</body>
</html>