Today's date on a calendar

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">

<title>My code example</title>
<style>
:root{font-family:system-ui,sans-serif;color:#18223b}*{box-sizing:border-box}body{margin:0;min-height:100vh;padding:24px;background:#edf1ff;display:grid;place-items:center}main{width:min(100%,480px);background:white;border-radius:20px;padding:24px}h1{font-size:24px;margin:0 0 16px}button,input{font:inherit}button{min-height:44px;border:1px solid #afbddd;border-radius:10px;padding:10px 14px;background:#eff3ff;color:#18223b;cursor:pointer}button:focus-visible,input:focus-visible{outline:3px solid #3658bf;outline-offset:3px}p{line-height:1.65}button:disabled{opacity:.5;cursor:default}table{width:100%;border-collapse:separate;border-spacing:4px;text-align:center}caption{font-weight:700;margin-bottom:16px}th,td{height:38px}th{font-size:12px;color:#58647b}td{border-radius:8px;background:#f5f7fe}td:empty{background:transparent}[aria-current="date"]{background:#3658bf;color:white;font-weight:700}time{display:block;padding:6px}
</style>
</head>
<body>
<main><h1>Your month at a glance</h1><table><caption id="month">Current month</caption><thead><tr><th scope="col">Sun</th><th scope="col">Mon</th><th scope="col">Tue</th><th scope="col">Wed</th><th scope="col">Thu</th><th scope="col">Fri</th><th scope="col">Sat</th></tr></thead><tbody id="calendar"></tbody></table><p id="today"></p></main>
<script>
const now=new Date(),year=now.getFullYear(),month=now.getMonth(),first=new Date(year,month,1).getDay(),days=new Date(year,month+1,0).getDate(),body=document.querySelector("#calendar");
document.querySelector("#month").textContent=now.toLocaleDateString([], {month:"long",year:"numeric"});
for(let slot=0;slot<Math.ceil((first+days)/7)*7;slot++){if(slot%7===0)body.append(document.createElement("tr"));const td=document.createElement("td"),day=slot-first+1;if(day>0&&day<=days){const time=document.createElement("time");time.textContent=String(day);time.dateTime=year+"-"+String(month+1).padStart(2,"0")+"-"+String(day).padStart(2,"0");if(day===now.getDate()){time.setAttribute("aria-current","date");time.setAttribute("aria-label",day+", today");}td.append(time);}body.lastChild.append(td);}
document.querySelector("#today").textContent="Today is "+now.toLocaleDateString([], {weekday:"long",month:"long",day:"numeric",year:"numeric"})+".";
</script>
</body>
</html>