JS task adding to a html page

I'm trying to add task with date to my task section dynamically. The popUpWindow to add the details is working fine but the addTask() where the task is added to the task-container is not working when the date in entered. It works only when name is input. I don't know where my problem is.

function popUpWindow() {
    var addTaskPopUp = document.getElementsByClassName('addTaskPopUp')[0];
    var addTaskBtn = document.getElementById('addTask-btn');
    var close = document.getElementsByClassName('close')[0];

    addTaskPopUp.style.display = 'block';

    close.addEventListener('click', function () {
        addTaskPopUp.style.display = 'none';
    });

    window.addEventListener('click', function (e) {
        if (e.target == addTaskPopUp) {
            addTaskPopUp.style.display = 'none';
        }
    });
}
function addTask() {
    var taskName = document.getElementById('taskName').value;
    var taskDate = document.getElementById('taskDate').value;
    var taskContainer = document.querySelector('.task-container');
    var task = document.createElement('div');
    task.className = 'task';
    task.innerHTML = '<input type="checkbox" id="task2" name="task2" value="task2"><label for="task2">'+ taskName +'</label><p>'+ taskDate +'</p>';

    taskContainer.appendChild(task);
}

<div class="task-section">
    <h2>Task</h2>
    <div class="task-container">
        <div class="task">
            <input type="checkbox" id="task1" name="task1" value="task1">
            <label for="task1">Task 1</label>
            <p>2 December</p>
        </div>
    </div>
    <div class="task-btn">
        <button id="addTask-btn" onclick="popUpWindow()">Add Task</button>
        <button id="completed-btn">Completed</button>
    </div>
</div>
<div class="addTaskPopUp">
    <div class="addTaskPopUp-content">
        <span class="close">&times;</span>
        <h2>Add Task</h2>
        <form action="">
            <div class="form-row">
                <label for="taskName">Task Name:</label>
                <input type="text" id="taskName" name="taskName" maxlength="20" required>
            </div>
            <div class="form-row">
                <label for="taskDate">Due Date:</label>
                <input type="date" id="taskDate" name="taskDate" min="<?php echo date('Y-m-d'); ?>" required> <!-- the min will set the minimum date to today and disable the past date -->
            </div>
            <button type="submit" id="addTask-btn2" onclick="addTask()">Add Task</button>
        </form>
    </div>
</div>

I expect for the addTask() is capable of adding a task to the task-container.

Solution

Default action of submit button click event within form is to trigger form submission, so you need 2 changes in your code:

Provide click event to the event handler:

<button type="submit" id="addTask-btn2" onclick="addTask(event)">Add Task</button>

Prevent default action of the submit click event:

 function addTask(e) {
     e.stopPropagation()
     e.preventDefault()

Following is a working code snippet:

    
    function popUpWindow() {
        var addTaskPopUp = document.getElementsByClassName('addTaskPopUp')[0];
        var addTaskBtn = document.getElementById('addTask-btn');
        var close = document.getElementsByClassName('close')[0];
    
        addTaskPopUp.style.display = 'block';
    
        close.addEventListener('click', function () {
            addTaskPopUp.style.display = 'none';
        });
    
        window.addEventListener('click', function (e) {
            if (e.target == addTaskPopUp) {
                addTaskPopUp.style.display = 'none';
            }
        });
    }
    function addTask(e) {
        e.stopPropagation()
        e.preventDefault()
        var taskName = document.getElementById('taskName').value;
        var taskDate = document.getElementById('taskDate').value;
        var taskContainer = document.querySelector('.task-container');
        var task = document.createElement('div');
        task.className = 'task';
        task.innerHTML = '<input type="checkbox" id="task2" name="task2" value="task2"><label for="task2">'+ taskName +'</label><p>'+ taskDate +'</p>';
    
        taskContainer.appendChild(task);
    }

    
    <div class="task-section">
        <h2>Task</h2>
        <div class="task-container">
            <div class="task">
                <input type="checkbox" id="task1" name="task1" value="task1">
                <label for="task1">Task 1</label>
                <p>2 December</p>
            </div>
        </div>
        <div class="task-btn">
            <button id="addTask-btn" onclick="popUpWindow()">Add Task</button>
            <button id="completed-btn">Completed</button>
        </div>
    </div>
    <div class="addTaskPopUp">
        <div class="addTaskPopUp-content">
            <span class="close">&times;</span>
            <h2>Add Task</h2>
            <form action="">
                <div class="form-row">
                    <label for="taskName">Task Name:</label>
                    <input type="text" id="taskName" name="taskName" maxlength="20" required>
                </div>
                <div class="form-row">
                    <label for="taskDate">Due Date:</label>
                    <input type="date" id="taskDate" name="taskDate" min="<?php echo date('Y-m-d'); ?>" required> <!-- the min will set the minimum date to today and disable the past date -->
                </div>
                <button type="submit" id="addTask-btn2" onclick="addTask(event)">Add Task</button>
            </form>
        </div>
    </div>