EncodeTheCode/date_planner6.htm

## date_planner6.htm
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
  <title>Date Difference Calculator & Calendar</title>
  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
  <style>
    table { width: 100%; border-collapse: collapse; margin-bottom: 20px; }
    th, td { border: 1px solid #ddd; padding: 8px; text-align: center; }
    th { background-color: #f2f2f2; }
    .highlight-text {
      font-weight: bold;
      animation: textGlow 2s infinite alternate, glowEffect 2s infinite alternate;
    }
    @keyframes textGlow {
      0% { color: white; }
      50% { color: black; }
      100% { color: white; }
    }
    @keyframes glowEffect {
      0% { text-shadow: 0 0 10px rgba(0,0,0,.7); }
      50% { text-shadow: 0 0 10px rgba(255,255,255,.7); }
      100% { text-shadow: 0 0 10px rgba(0,0,0,.7); }
    }
    #days-left input, #days-left button {
      padding: 8px;
      font-size: 16px;
    }
    #days-left button {
      background-color: #4CAF50;
      color: white;
      border: none;
    }
    #days-left p {
      font-size: 18px;
      font-weight: bold;
    }
  </style>
</head>
<body>

<h1>Current Month Date Table</h1>

<div id="days-left">
  <h2>Calculate Time Between Two Dates</h2>
  <label for="d1">Start Date:</label>
  <input type="date" id="d1" />
  <label for="d2">End Date:</label>
  <input type="date" id="d2" />
  <button onclick="calculateDifference()">Calculate</button>
  <p id="r2"></p>
</div>

<div class="month-table">
  <h2 id="m"></h2>
  <table>
    <thead>
      <tr><th>Sun</th><th>Mon</th><th>Tue</th><th>Wed</th><th>Thu</th><th>Fri</th><th>Sat</th></tr>
    </thead>
    <tbody id="b"></tbody>
  </table>
</div>

<script>
const mN = ["January","February","March","April","May","June","July","August","September","October","November","December"];

function generateCalendar(year, month, highlightDay = null) {
  $('#m').text(`${mN[month]} ${year}`);
  const firstDay = new Date(year, month, 1).getDay();
  const daysInMonth = new Date(year, month + 1, 0).getDate();

  let html = '', day = 1;
  html += '<tr>';
  for (let i = 0; i < firstDay; i++) html += '<td></td>';
  for (let i = firstDay; i < 7 && day <= daysInMonth; i++) {
    html += `<td><span class="day-text${day === highlightDay ? ' highlight-text' : ''}">${day}</span></td>`;
    day++;
  }
  html += '</tr>';
  while (day <= daysInMonth) {
    html += '<tr>';
    for (let i = 0; i < 7 && day <= daysInMonth; i++) {
      html += `<td><span class="day-text${day === highlightDay ? ' highlight-text' : ''}">${day}</span></td>`;
      day++;
    }
    html += '</tr>';
  }
  $('#b').html(html);
}

$(function() {
  const today = new Date();
  const todayStr = today.toISOString().split("T")[0];

  $('#d1').val(todayStr);
  $('#d2').val(todayStr);
  generateCalendar(today.getFullYear(), today.getMonth(), today.getDate());

  // Update calendar when end date changes
  $('#d2').on('change', function() {
    const date = new Date($(this).val());
    if (!isNaN(date)) {
      generateCalendar(date.getFullYear(), date.getMonth(), date.getDate());
    }
  });

  // Clicking a day in the calendar updates both date pickers
  $(document).on('click', '.day-text', function() {
    const day = $(this).text();
    const [monthName, year] = $('#m').text().split(' ');
    const monthIndex = mN.indexOf(monthName);
    const formattedDate = `${year}-${String(monthIndex + 1).padStart(2, '0')}-${String(day).padStart(2, '0')}`;

    // Set and force visual update
    $('#d1').val(formattedDate).trigger('change');
    $('#d2').val(formattedDate).trigger('change');
    generateCalendar(parseInt(year), monthIndex, parseInt(day));
  });
});

function calculateDifference() {
  const d1 = $('#d1').val();
  const d2 = $('#d2').val();
  if (d1 && d2) {
    const date1 = new Date(d1);
    const date2 = new Date(d2);
    const diffTime = Math.abs(date2 - date1);
    const days = Math.ceil(diffTime / (1000 * 60 * 60 * 24));
    const weeks = (days / 7).toFixed(2);
    const months = (days / 30.4375).toFixed(2); // average month
    $('#r2').html(`🗓️ Difference between dates:<br>
      📅 Days: <strong>${days}</strong><br>
      📆 Weeks: <strong>${weeks}</strong><br>
      📊 Months: <strong>${months}</strong>`);
  } else {
    $('#r2').text('Please select both start and end dates.');
  }
}
</script>

</body>
</html>
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8" />
	<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
	<title>Date Difference Calculator & Calendar</title>
	<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
	<style>
	table { width: 100%; border-collapse: collapse; margin-bottom: 20px; }
	th, td { border: 1px solid #ddd; padding: 8px; text-align: center; }
	th { background-color: #f2f2f2; }
	.highlight-text {
	font-weight: bold;
	animation: textGlow 2s infinite alternate, glowEffect 2s infinite alternate;
	}
	@keyframes textGlow {
	0% { color: white; }
	50% { color: black; }
	100% { color: white; }
	}
	@keyframes glowEffect {
	0% { text-shadow: 0 0 10px rgba(0,0,0,.7); }
	50% { text-shadow: 0 0 10px rgba(255,255,255,.7); }
	100% { text-shadow: 0 0 10px rgba(0,0,0,.7); }
	}
	#days-left input, #days-left button {
	padding: 8px;
	font-size: 16px;
	}
	#days-left button {
	background-color: #4CAF50;
	color: white;
	border: none;
	}
	#days-left p {
	font-size: 18px;
	font-weight: bold;
	}
	</style>
	</head>
	<body>

	<h1>Current Month Date Table</h1>

	<div id="days-left">
	<h2>Calculate Time Between Two Dates</h2>
	<label for="d1">Start Date:</label>
	<input type="date" id="d1" />
	<label for="d2">End Date:</label>
	<input type="date" id="d2" />
	<button onclick="calculateDifference()">Calculate</button>
	<p id="r2"></p>
	</div>

	<div class="month-table">
	<h2 id="m"></h2>
	<table>
	<thead>
	<tr><th>Sun</th><th>Mon</th><th>Tue</th><th>Wed</th><th>Thu</th><th>Fri</th><th>Sat</th></tr>
	</thead>
	<tbody id="b"></tbody>
	</table>
	</div>

	<script>
	const mN = ["January","February","March","April","May","June","July","August","September","October","November","December"];

	function generateCalendar(year, month, highlightDay = null) {
	$('#m').text(`${mN[month]} ${year}`);
	const firstDay = new Date(year, month, 1).getDay();
	const daysInMonth = new Date(year, month + 1, 0).getDate();

	let html = '', day = 1;
	html += '<tr>';
	for (let i = 0; i < firstDay; i++) html += '<td></td>';
	for (let i = firstDay; i < 7 && day <= daysInMonth; i++) {
	html += `<td><span class="day-text${day === highlightDay ? ' highlight-text' : ''}">${day}</span></td>`;
	day++;
	}
	html += '</tr>';
	while (day <= daysInMonth) {
	html += '<tr>';
	for (let i = 0; i < 7 && day <= daysInMonth; i++) {
	html += `<td><span class="day-text${day === highlightDay ? ' highlight-text' : ''}">${day}</span></td>`;
	day++;
	}
	html += '</tr>';
	}
	$('#b').html(html);
	}

	$(function() {
	const today = new Date();
	const todayStr = today.toISOString().split("T")[0];

	$('#d1').val(todayStr);
	$('#d2').val(todayStr);
	generateCalendar(today.getFullYear(), today.getMonth(), today.getDate());

	// Update calendar when end date changes
	$('#d2').on('change', function() {
	const date = new Date($(this).val());
	if (!isNaN(date)) {
	generateCalendar(date.getFullYear(), date.getMonth(), date.getDate());
	}
	});

	// Clicking a day in the calendar updates both date pickers
	$(document).on('click', '.day-text', function() {
	const day = $(this).text();
	const [monthName, year] = $('#m').text().split(' ');
	const monthIndex = mN.indexOf(monthName);
	const formattedDate = `${year}-${String(monthIndex + 1).padStart(2, '0')}-${String(day).padStart(2, '0')}`;

	// Set and force visual update
	$('#d1').val(formattedDate).trigger('change');
	$('#d2').val(formattedDate).trigger('change');
	generateCalendar(parseInt(year), monthIndex, parseInt(day));
	});
	});

	function calculateDifference() {
	const d1 = $('#d1').val();
	const d2 = $('#d2').val();
	if (d1 && d2) {
	const date1 = new Date(d1);
	const date2 = new Date(d2);
	const diffTime = Math.abs(date2 - date1);
	const days = Math.ceil(diffTime / (1000 * 60 * 60 * 24));
	const weeks = (days / 7).toFixed(2);
	const months = (days / 30.4375).toFixed(2); // average month
	$('#r2').html(`🗓️ Difference between dates:<br>
	📅 Days: <strong>${days}</strong><br>
	📆 Weeks: <strong>${weeks}</strong><br>
	📊 Months: <strong>${months}</strong>`);
	} else {
	$('#r2').text('Please select both start and end dates.');
	}
	}
	</script>

	</body>
	</html>