utilizando DOM | Front-end | Alura - Cursos online de tecnologia

Oi gente, estou fazendo um desafio de um calendário em que quando o usuário clicar em uma data, aquele dia mudará de cor, porém, meu código seleciona o calendário inteiro ao invés de apenas um dia especifico. Segue o código:

<!DOCTYPE html>
<html lang="pt-br">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>ex03-intermediario</title>
    <style>
        .calendar th, td{
          border: 1px solid black;
          width: 40px;
          height: 30px;
        }

        .calendar{
          text-align: center;
        }
    </style>
</head>
<body>    
    <table class="calendar">
        <thead class="semana">
          <tr>
            <th>Dom</th>
            <th>Seg</th>
            <th>Ter</th>
            <th>Qua</th>
            <th>Qui</th>
            <th>Sex</th>
            <th>Sab</th>
            
          </tr>
        </thead>
        <tbody id="dia">
          <tr>
            <td></td>
            <td></td>
            <td></td>
            <td>1</td>
            <td>2</td>
            <td>3</td>
            <td>4</td>
            
          </tr>
          <tr>
            <td>5</td>
            <td>6</td>
            <td>7</td>
            <td>8</td>
            <td>9</td>
            <td>10</td>
            <td>11</td>
            
          </tr>
          <tr>
            <td>12</td>
            <td>13</td>
            <td>14</td>
            <td>15</td>
            <td>16</td>
            <td>17</td>
            <td>18</td>
           
          </tr>
          <tr>
            <td>19</td>
            <td>20</td>
            <td>21</td>
            <td>22</td>
            <td>23</td>
            <td>24</td>
            <td>25</td>
            
          </tr>
          <tr>
            <td>26</td>
            <td>27</td>
            <td>28</td>
            <td>29</td>
            <td>30</td>
            <td>31</td>
            <td></td>
            
          </tr>
        </tbody>
        </table>
    <script>
        const data = document.getElementById("dia");
        document.addEventListener("click", trocaCor)
          function trocaCor() {
            data.style.backgroundColor = "blue";
          };
    </script>
</body>
</html>

Tudo bem Nathalia? O problema está ocorrendo porque você está selecionando o elemento tbody inteiro, em vez de apenas a célula do dia que foi clicada. Você precisa ajustar o seu código para selecionar apenas a célula que foi clicada. Você pode fazer isso adicionando um evento de clique em cada célula de data individualmente. Aqui está como você pode fazer isso:

<!DOCTYPE html>
<html lang="pt-br">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>ex03-intermediario</title>
    <style>
        .calendar th, td{
          border: 1px solid black;
          width: 40px;
          height: 30px;
        }

        .calendar{
          text-align: center;
        }
    </style>
</head>
<body>    
    <table class="calendar">
        <thead class="semana">
          <tr>
            <th>Dom</th>
            <th>Seg</th>
            <th>Ter</th>
            <th>Qua</th>
            <th>Qui</th>
            <th>Sex</th>
            <th>Sab</th>
            
          </tr>
        </thead>
        <tbody id="dia">
          <tr>
            <td></td>
            <td></td>
            <td></td>
            <td class="data">1</td>
            <td class="data">2</td>
            <td class="data">3</td>
            <td class="data">4</td>
            
          </tr>
          <tr>
            <td class="data">5</td>
            <td class="data">6</td>
            <td class="data">7</td>
            <td class="data">8</td>
            <td class="data">9</td>
            <td class="data">10</td>
            <td class="data">11</td>
            
          </tr>
          <tr>
            <td class="data">12</td>
            <td class="data">13</td>
            <td class="data">14</td>
            <td class="data">15</td>
            <td class="data">16</td>
            <td class="data">17</td>
            <td class="data">18</td>
           
          </tr>
          <tr>
            <td class="data">19</td>
            <td class="data">20</td>
            <td class="data">21</td>
            <td class="data">22</td>
            <td class="data">23</td>
            <td class="data">24</td>
            <td class="data">25</td>
            
          </tr>
          <tr>
            <td class="data">26</td>
            <td class="data">27</td>
            <td class="data">28</td>
            <td class="data">29</td>
            <td class="data">30</td>
            <td class="data">31</td>
            <td></td>
            
          </tr>
        </tbody>
    </table>
    <script>
        const cells = document.querySelectorAll('.data');
        cells.forEach(cell => {
            cell.addEventListener('click', function() {
                this.style.backgroundColor = 'blue';
            });
        });
    </script>
</body>
</html>

Apenas uma sugestão... acredito que resolva seu problema.

Torcendo para dar certo !!