EncodeTheCode/date_planner4.htm

## date_planner4.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:reverseTextGlow 2s infinite alternate,glowEffect 2s infinite alternate}
    @keyframes reverseTextGlow{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) {
  const fd = new Date(year, month, 1).getDay();
  const daysInMonth = new Date(year, month + 1, 0).getDate();
  $('#m').text(mN[month] + ' ' + year);

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

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

  // Pre-fill both date pickers with today's date
  $('#d1').val(todayStr);
  $('#d2').val(todayStr);

  // Initial calendar
  generateCalendar(today.getFullYear(), today.getMonth(), today.getDate());

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

function calculateDifference(){
  const d1 = $('#d1').val();
  const d2 = $('#d2').val();

  if(d1 && d2){
    const date1 = new Date(d1);
    const date2 = new Date(d2);
    const timeDiff = Math.abs(date2 - date1);
    const days = Math.ceil(timeDiff / (1000 * 3600 * 24));
    const weeks = (days / 7).toFixed(2);
    const months = (days / 30.4375).toFixed(2); // avg 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:reverseTextGlow 2s infinite alternate,glowEffect 2s infinite alternate}
	@keyframes reverseTextGlow{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) {
	const fd = new Date(year, month, 1).getDay();
	const daysInMonth = new Date(year, month + 1, 0).getDate();
	$('#m').text(mN[month] + ' ' + year);

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

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

	// Pre-fill both date pickers with today's date
	$('#d1').val(todayStr);
	$('#d2').val(todayStr);

	// Initial calendar
	generateCalendar(today.getFullYear(), today.getMonth(), today.getDate());

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

	function calculateDifference(){
	const d1 = $('#d1').val();
	const d2 = $('#d2').val();

	if(d1 && d2){
	const date1 = new Date(d1);
	const date2 = new Date(d2);
	const timeDiff = Math.abs(date2 - date1);
	const days = Math.ceil(timeDiff / (1000 * 3600 * 24));
	const weeks = (days / 7).toFixed(2);
	const months = (days / 30.4375).toFixed(2); // avg 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>