Home How do I display dates of the current month within a table with <td> elements using javascript?

Questions

How do I display dates of the current month within a table with <td> elements using javascript?

March 1, 2022

What is the best way to display the date of the month through the format of a table (<table>, <td> elements) on a website?

I have currently set up a for loop that displays the current dates of March inside console, but I have no clue on how I can display that on the website (As of now, it is March, so I want to display all 31 days).

Code:

let date = new Date();
const daysEl = document.getElementById('dates');
const monthsEl = document.getElementById('months');



function display_days_of_the_month() {
  var month = date.getMonth() + 1; 
  var year = date.getFullYear();

    for (day = 0; day <= days_in_month; day++) {
        console.log(day);
        return day;
    }

    daysEl.innerHTML = day; // how can I display the dates? 
}

function get_days_in_month(month, year) {
  days_in_month = new Date(year, month, 0).getDate(); 
  return days_in_month;
}

console.log(get_days_in_month(3, 2022));

console.log(get_days_in_month(2, 2022)); 

display_days_of_the_month();

table, th, td {
    border: 1px solid;
    padding: 10px;
}

th {
    background-color:rgb(245, 143, 143);
}

td:hover {
    background-color: rgb(178, 172, 187);
    color: rgb(255, 255, 255);
   }

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="style.css" />
    <script src="script.js" defer></script>

    <title>Habit Tracker</title>
  </head>
  <body>
    <h1>HABIT TRACKER</h1>
    <h2 id="month">Month</h2>
    <table>
      <thead id="days_of_week">
        <th>Monday</th>
        <!-- table head ROW -->
        <th>Tuesday</th>
        <!-- table head ROW -->
        <th>Wednesday</th>
        <!-- table head ROW -->
        <th>Thursday</th>
        <!-- table head ROW -->
        <th>Friday</th>
        <!-- table head ROW -->
        <th>Saturday</th>
        <!-- table head ROW -->
        <th>Sunday</th>
      </thead>
      <tbody id="dates">
        <tr>
          <td>Date</td>
          <td>Date</td>
          <td>Date</td>
          <td>Date</td>
          <td>Date</td>
          <td>Date</td>
          <td>Date</td>
        </tr>
        <tr>
          <td>Date</td>
          <td>Date</td>
          <td>Date</td>
          <td>Date</td>
          <td>Date</td>
          <td>Date</td>
          <td>Date</td>
        </tr>
        <tr>
          <td>Date</td>
          <td>Date</td>
          <td>Date</td>
          <td>Date</td>
          <td>Date</td>
          <td>Date</td>
          <td>Date</td>
        </tr>
        <tr>
          <td>Date</td>
          <td>Date</td>
          <td>Date</td>
          <td>Date</td>
          <td>Date</td>
          <td>Date</td>
          <td>Date</td>
        </tr>
        <tr>
          <td>Date</td>
          <td>Date</td>
          <td>Date</td>
          <td>Date</td>
          <td>Date</td>
          <td>Date</td>
          <td>Date</td>
        </tr>

        <!-- rowspan column span  -->
      </tbody>
    </table>
  </body>
</html>

>Solution :

Instead of logging to the console, you can use createElement and appendChild to create <Td> tags with the date in them, for example:

<table>
  <tr id="somerow"></tr>
</table>

let my_date = "12 march" // just an example

let new_td = document.createElement("td")
let table_row = document.querySelector("#somerow")
table_row.appendChild(new_td)
new_td.innerText = my_date