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);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 class="date">${fullDate}</span>`;
})
</script>
</head>
<body>
</body>
</html>**For centering add ** your style tag following before "color:red"
<style>
.date {
display: flex;
justify-content: center;
align-items: center;
}
</style>
<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 class="date">${fullDate}</span>`;
})
</script>
</head>
<body>
</body>
</html>