I'm relatively new to JavaScript as well, but I think I've come up with a solution.
Firstly, I changed your HTML.
I created a new class called "priorities" for each of the radio buttons, that way, they're grouped together nicely. I deleted the IDs that you had for them as well. I've also added a new input field for "Actions".
Secondly, I rearranged your Table to have both a thead and tbody section to separate the table headers from the table body. We will be adding rows to the table body in this case. Because of this, I deleted your "todayTasks" ID from the table and instead added a new ID to the table body called "tableBody".
Third, I placed row in the table body just so I could visualize what was going on. I've added some CSS to make it look cleaner as well.
Now onto the JavaScript.
I created one large eventListener on the submit button of the form to accomplish everything. Each line of JavaScript should have a comment in the code below.
I'm PRETTY sure I could've simplified the JavaScript code below, but I'm still fairly new to JavaScript as well. If anyone can optimize is, please let me know!
// Creates an event listener when the form is submitted.
document.querySelector("form").addEventListener("submit", function (e) {
// Here we are just getting the values given by the user.
const task = document.getElementById("task").value;
const action = document.getElementById("action").value;
const deadline = document.getElementById("deadline").value;
const duration = document.getElementById("duration").value;
const priorities = document.getElementsByClassName("priorities");
// priorities is different from the other input fields because
// they are radio elements.
// For each element with the class of "priorities",
for (const priority of priorities) {
// check if that element is "checked".
if (priority.checked) {
// If "checked", set its value to the var "selectedPriority".
var selectedPriority = priority.value;
}
}
// Here we are creating a new row with the above values.
// Create 5 unique table items, 1 for each heading
// I'm not sure what you wanted under Status and Actions, so I made my own content up.
// By default, the status value will be set to "Incomplete".
const tableItem1 = document.createElement("td");
const status = document.createTextNode("Incomplete");
tableItem1.appendChild(status);
const tableItem2 = document.createElement("td");
const taskItem = document.createTextNode(task);
tableItem2.appendChild(taskItem);
const tableItem3 = document.createElement("td");
const hoursItem = document.createTextNode(duration);
tableItem3.appendChild(hoursItem);
const tableItem4 = document.createElement("td");
const priorityItem = document.createTextNode(selectedPriority);
tableItem4.appendChild(priorityItem);
const tableItem5 = document.createElement("td");
const actionItem = document.createTextNode(action);
tableItem5.appendChild(actionItem);
// Create an array for these new table items.
const newTableItems = [
tableItem1,
tableItem2,
tableItem3,
tableItem4,
tableItem5,
];
// Create 1 row
const row = document.createElement("tr");
// Add the 5 table items to the 1 row
for (tableItem of newTableItems) {
row.appendChild(tableItem);
}
// Add the row to the end of the table body
const table = document.getElementById("tableBody");
table.appendChild(row);
// This is so the default "submit" action doesn't occur.
e.preventDefault();
});
th {
font-size: 1.5rem;
padding: 0 25px;
}
td {
padding: 0 25px;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Stack Overflow</title>
</head>
<body>
<form>
<label for="task">New Task</label>
<input type="text" id="task" placeholder="Enter here" />
<br />
<br />
<label for="task">New Action</label>
<input type="text" id="action" placeholder="Enter here" />
<br />
<br />
<label for="deadline">Deadline</label>
<input type="date" id="deadline" name="deadline" />
<br />
<br />
<label for="duration">Duration</label>
<input type="text" id="duration" name="duration" placeholder="__ hours" />
<br />
<br />
<label for="priority">Priority</label>
<input type="radio" class="priorities" name="priority" value="A" />
<label for="A">A</label>
<input type="radio" class="priorities" name="priority" value="B" />
<label for="B">B</label>
<input type="radio" class="priorities" name="priority" value="C" />
<label for="C">C</label>
<br />
<br />
<input type="submit" id="submit" value="Submit" />
</form>
<table id="todayTasks">
<thead>
<tr>
<th>Status</th>
<th>Task</th>
<th>Duration</th>
<th>Priority</th>
<th>Actions</th>
</tr>
</thead>
<tbody id="tableBody">
<tr>
<td>Incomplete</td>
<td>Walk the dog</td>
<td>1</td>
<td>B</td>
<td>Get leash</td>
</tr>
</tbody>
</table>
</body>
</html>
