Replace innerHTML with secure DOM APIs to prevent XSS

[Copilot]

Using innerHTML can lead to XSS vulnerabilities when rendering dynamic content. This PR replaces all three occurrences with secure DOM APIs while maintaining vanilla JS.

Changes

• renderUpcomingDates(): Use createElement(), appendChild(), and textContent instead of HTML string interpolation
• populateSelectors(): Use Option constructor with select.add() for both month and year dropdowns

Before

container.innerHTML = dates.map((date, index) => `
  <div class="date-item ${isFirst ? 'highlight' : ''}">
    <span class="date">${formatDate(date)}</span>
  </div>
`).join('');

After

const dateItem = document.createElement('div');
dateItem.className = isFirst ? 'date-item highlight' : 'date-item';

const dateSpan = document.createElement('span');
dateSpan.className = 'date';
dateSpan.textContent = formatDate(date);

dateItem.appendChild(dateSpan);
container.appendChild(dateItem);

Original prompt

Using innerHtml is bad practice since it can lead to XSS. Please update the code to use more secure DOM APIs (e.g. .selected = true, .text = 'foo'. Still, keep the app simple and only use vanilla JS/HTML/CSS.

---

💡 You can make Copilot smarter by setting up custom instructions, customizing its development environment and configuring Model Context Protocol (MCP) servers. Learn more Copilot coding agent tips in the docs.

[rwoll]

@copilot - Your current code change looks good. Do NOT make any additional changes, but please use the playwright MCP you have available to post a screenshot of the changes in the issue description.