EncodeTheCode/date_planner2_basic.htm

## date_planner2_basic.htm
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <title>Day, Month, Year Picker</title>
  <style>
    label, select { margin-right: 10px; }
    #result { font-size: 18px; margin-top: 20px; font-weight: bold; }
  </style>
</head>
<body>

<h2>Select Two Dates (Day, Month, Year)</h2>

<div>
  <h3>Start Date:</h3>
  <label>Day: <select id="start-day"></select></label>
  <label>Month: <select id="start-month"></select></label>
  <label>Year: <select id="start-year"></select></label>
</div>

<div>
  <h3>End Date:</h3>
  <label>Day: <select id="end-day"></select></label>
  <label>Month: <select id="end-month"></select></label>
  <label>Year: <select id="end-year"></select></label>
</div>

<br>
<button onclick="calculate()">Calculate Difference</button>
<div id="result"></div>

<script>
function populateDateSelectors(prefix) {
  const daySel = document.getElementById(`${prefix}-day`);
  const monthSel = document.getElementById(`${prefix}-month`);
  const yearSel = document.getElementById(`${prefix}-year`);

  // Days
  for (let i = 1; i <= 31; i++) {
    let opt = document.createElement("option");
    opt.value = i;
    opt.text = i;
    daySel.appendChild(opt);
  }

  // Months
  const months = [
    "January", "February", "March", "April", "May", "June",
    "July", "August", "September", "October", "November", "December"
  ];
  months.forEach((month, i) => {
    let opt = document.createElement("option");
    opt.value = i;
    opt.text = month;
    monthSel.appendChild(opt);
  });

  // Years (range: 1900–2100)
  for (let y = 1900; y <= 2100; y++) {
    let opt = document.createElement("option");
    opt.value = y;
    opt.text = y;
    yearSel.appendChild(opt);
  }

  // Default to today
  const today = new Date();
  daySel.value = today.getDate();
  monthSel.value = today.getMonth();
  yearSel.value = today.getFullYear();
}

populateDateSelectors("start");
populateDateSelectors("end");

function calculate() {
  const sd = parseInt(document.getElementById("start-day").value);
  const sm = parseInt(document.getElementById("start-month").value);
  const sy = parseInt(document.getElementById("start-year").value);
  const ed = parseInt(document.getElementById("end-day").value);
  const em = parseInt(document.getElementById("end-month").value);
  const ey = parseInt(document.getElementById("end-year").value);

  const date1 = new Date(sy, sm, sd);
  const date2 = new Date(ey, em, ed);

  const diffTime = Math.abs(date2 - date1);
  const diffDays = Math.ceil(diffTime / (1000 * 60 * 60 * 24));
  const diffWeeks = (diffDays / 7).toFixed(2);
  const diffMonths = (diffDays / 30.4375).toFixed(2); // avg month

  document.getElementById("result").innerHTML = `
    📅 Days: <strong>${diffDays}</strong><br>
    📆 Weeks: <strong>${diffWeeks}</strong><br>
    📊 Months: <strong>${diffMonths}</strong>
  `;
}
</script>

</body>
</html>
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8" />
	<title>Day, Month, Year Picker</title>
	<style>
	label, select { margin-right: 10px; }
	#result { font-size: 18px; margin-top: 20px; font-weight: bold; }
	</style>
	</head>
	<body>

	<h2>Select Two Dates (Day, Month, Year)</h2>

	<div>
	<h3>Start Date:</h3>
	<label>Day: <select id="start-day"></select></label>
	<label>Month: <select id="start-month"></select></label>
	<label>Year: <select id="start-year"></select></label>
	</div>

	<div>
	<h3>End Date:</h3>
	<label>Day: <select id="end-day"></select></label>
	<label>Month: <select id="end-month"></select></label>
	<label>Year: <select id="end-year"></select></label>
	</div>

	<br>
	<button onclick="calculate()">Calculate Difference</button>
	<div id="result"></div>

	<script>
	function populateDateSelectors(prefix) {
	const daySel = document.getElementById(`${prefix}-day`);
	const monthSel = document.getElementById(`${prefix}-month`);
	const yearSel = document.getElementById(`${prefix}-year`);

	// Days
	for (let i = 1; i <= 31; i++) {
	let opt = document.createElement("option");
	opt.value = i;
	opt.text = i;
	daySel.appendChild(opt);
	}

	// Months
	const months = [
	"January", "February", "March", "April", "May", "June",
	"July", "August", "September", "October", "November", "December"
	];
	months.forEach((month, i) => {
	let opt = document.createElement("option");
	opt.value = i;
	opt.text = month;
	monthSel.appendChild(opt);
	});

	// Years (range: 1900–2100)
	for (let y = 1900; y <= 2100; y++) {
	let opt = document.createElement("option");
	opt.value = y;
	opt.text = y;
	yearSel.appendChild(opt);
	}

	// Default to today
	const today = new Date();
	daySel.value = today.getDate();
	monthSel.value = today.getMonth();
	yearSel.value = today.getFullYear();
	}

	populateDateSelectors("start");
	populateDateSelectors("end");

	function calculate() {
	const sd = parseInt(document.getElementById("start-day").value);
	const sm = parseInt(document.getElementById("start-month").value);
	const sy = parseInt(document.getElementById("start-year").value);
	const ed = parseInt(document.getElementById("end-day").value);
	const em = parseInt(document.getElementById("end-month").value);
	const ey = parseInt(document.getElementById("end-year").value);

	const date1 = new Date(sy, sm, sd);
	const date2 = new Date(ey, em, ed);

	const diffTime = Math.abs(date2 - date1);
	const diffDays = Math.ceil(diffTime / (1000 * 60 * 60 * 24));
	const diffWeeks = (diffDays / 7).toFixed(2);
	const diffMonths = (diffDays / 30.4375).toFixed(2); // avg month

	document.getElementById("result").innerHTML = `
	📅 Days: <strong>${diffDays}</strong><br>
	📆 Weeks: <strong>${diffWeeks}</strong><br>
	📊 Months: <strong>${diffMonths}</strong>
	`;
	}
	</script>

	</body>
	</html>