Version 3

Code

<!DOCTYPE html>

<head>

<title>Meeting Planner</title>

</head>

<body>

<h1>Meeting Planner</h1>

<label for="meetingDate">Select Date:</label>

<label for="finishTime">Finish By:</label>

<label for="task">Task to Complete:</label>

<button type="submit">Schedule Meeting</button>

</form>

<h2>Scheduled Meetings:</h2>

document.getElementById('meetingForm').addEventListener('submit', function(e) {

e.preventDefault();

const meetingDate = document.getElementById('meetingDate').value;

const finishTime = document.getElementById('finishTime').value;

const task = document.getElementById('task').value;

const errorMessage = document.getElementById('errorMessage');

const now = new Date();

const selectedDate = new Date(meetingDate);

selectedDate.setHours(finishTime.split(':')[0], finishTime.split(':')[1]);

// Check if the selected date is before the current date and time

if (selectedDate < now) {

errorMessage.textContent = "The meeting date and time cannot be in the past!";

} else {

errorMessage.textContent = "";

addToSchedule(meetingDate, finishTime, task);

}

});

// Set the minimum allowed date and time for the input fields

window.onload = function() {

const now = new Date();

const formattedDate = now.toISOString().slice(0, 16); // Get current date and time formatted as 'YYYY-MM-DDTHH:mm'

document.getElementById('meetingDate').setAttribute('min', formattedDate);

};

function addToSchedule(meetingDate, finishTime, task) {

const scheduleList = document.getElementById('scheduleList');

const listItem = document.createElement('li');

const formattedDate = new Date(meetingDate).toLocaleString();

listItem.textContent = `Task: "${task}" | Finish By:${finishTime}` + `${formattedDate}`

scheduleList.appendChild(listItem);

// Clear the input fields after adding the schedule

document.getElementById('meetingForm').reset();

}

</script>

</body>

</html>