EncodeTheCode/date_planner2.htm

## date_planner2.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 & 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:black}50%{color:white}100%{color:black}}
    @keyframes glowEffect{0%{text-shadow:0 0 10px rgba(255,255,255,.7)}50%{text-shadow:0 0 10px rgba(0,0,0,.7)}100%{text-shadow:0 0 10px rgba(255,255,255,.7)}}
    #days-left input,#days-left button{padding:8px;font-size:16px}
    #days-left button{background-color:#4CAF50;color:white;border:none;cursor:pointer}
    #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>

  <!-- ✅ These inputs will show Day/Month/Year format -->
  <label for="d1">Start Date:</label>
  <input type="date" id="d1" />
  <br><br>
  <label for="d2">End Date:</label>
  <input type="date" id="d2" />
  <br><br>
  <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>
$(function(){
  const d = new Date(),
        cD = d.getDate(),
        cM = d.getMonth(),
        cY = d.getFullYear(),
        mN = ["January","February","March","April","May","June","July","August","September","October","November","December"],
        fd = new Date(cY, cM, 1).getDay(),
        daysInMonth = new Date(cY, cM + 1, 0).getDate();

  // Fill current month calendar
  $('#m').text(mN[cM]);
  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}</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}</span></td>`; n++; }
    r += '</tr>';
  }
  $('#b').html(r);
  $(`.day-text`).each(function(){
    if($(this).text() == cD) $(this).addClass('highlight-text');
  });

  // Pre-fill today's date to make day/month/year visible in input field
  const todayStr = d.toISOString().split("T")[0];
  $('#d1').val(todayStr);
  $('#d2').val(todayStr);
});

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 length

    $('#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 & 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:black}50%{color:white}100%{color:black}}
	@keyframes glowEffect{0%{text-shadow:0 0 10px rgba(255,255,255,.7)}50%{text-shadow:0 0 10px rgba(0,0,0,.7)}100%{text-shadow:0 0 10px rgba(255,255,255,.7)}}
	#days-left input,#days-left button{padding:8px;font-size:16px}
	#days-left button{background-color:#4CAF50;color:white;border:none;cursor:pointer}
	#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>

	<!-- ✅ These inputs will show Day/Month/Year format -->
	<label for="d1">Start Date:</label>
	<input type="date" id="d1" />
	<br><br>
	<label for="d2">End Date:</label>
	<input type="date" id="d2" />
	<br><br>
	<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>
	$(function(){
	const d = new Date(),
	cD = d.getDate(),
	cM = d.getMonth(),
	cY = d.getFullYear(),
	mN = ["January","February","March","April","May","June","July","August","September","October","November","December"],
	fd = new Date(cY, cM, 1).getDay(),
	daysInMonth = new Date(cY, cM + 1, 0).getDate();

	// Fill current month calendar
	$('#m').text(mN[cM]);
	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}</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}</span></td>`; n++; }
	r += '</tr>';
	}
	$('#b').html(r);
	$(`.day-text`).each(function(){
	if($(this).text() == cD) $(this).addClass('highlight-text');
	});

	// Pre-fill today's date to make day/month/year visible in input field
	const todayStr = d.toISOString().split("T")[0];
	$('#d1').val(todayStr);
	$('#d2').val(todayStr);
	});

	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 length

	$('#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>