JSFiddle - React, Tailwind, and code Playground

by nima101

HTML

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Grid Selection</title>
  <style>
    table {
      border-collapse: collapse;
    }

    td {
      border: 1px solid #ddd;
      width: 40px;
      height: 30px;
      text-align: center;
      user-select: none;
    }

    td.selected {
      background-color: #27ae60; /* Nextdoor green color */
    }
  </style>
</head>
<body>

<table id="grid">
  <thead>
    <tr>
      <th></th>
      <!-- Dynamically generate hours -->
      <script>
        for (let i = 1; i <= 24; i++) {
          document.write(`<th>${i}</th>`);
        }
      </script>
    </tr>
  </thead>
  <tbody>
    <!-- Dynamically generate days and cells -->
    <script>
      const days = ['Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday', 'Sunday'];

      for (let day of days) {
        document.write(`<tr><th>${day}</th>`);
        
        for (let i = 1; i <= 24; i++) {
          document.write('<td></td>');
        }
        
        document.write('</tr>');
      }
    </script>
  </tbody>
</table>

<script>
  let isMouseDown = false;
  let isCellSelected = false;
  let startCell = null;
  let endCell = null;

  const cells = document.querySelectorAll('#grid tbody td');

  cells.forEach(cell => {
    cell.addEventListener('mousedown', () => {
      isMouseDown = true;
      isCellSelected = cell.classList.value == "selected";
      startCell = cell;
      endCell = cell;
      toggleCellSelection(cell);
    });

    cell.addEventListener('mouseover', () => {
      if (isMouseDown) {
        endCell = cell;
        updateSelection();
      }
    });

    cell.addEventListener('mouseup', () => {
      isMouseDown = false;
    });

  });

  function toggleCellSelection(cell) {
    cell.classList.toggle('selected');
  }

  function updateSelection() {
    // Determine the range of cells to select
    const startRowIndex =...