I've been experimenting with creating a To-Do list using HTML, CSS, and Javascript. I've managed to capture the input field value in a fieldset so far. However, my goal is to find a way to transform the input field value from the textfield into a checkbox field.
Below are the codes for my trial project:
// Accessing the Add Task button:
var add_task = document.getElementById('TaskAdd');
// Listen for the click event on the add task button:
add_task.addEventListener('click', addtask);
//// Functions creation:
// Adding a task to the list:
function addtask()
{
// Converting the input into a task list:
var task = document.getElementById("Taskname").value;
// document.getElementById("Do1").innerHTML = task;
var taskcheck = document.createElement("INPUT");
taskcheck.setAttribute("TaskCheck", "checkbox");
// document.getElementById("Do1").innerHTML = taskcheck;
document.getElementById("TaskCheck").innerHTML = task;
document.getElementById("Do1").innerHTML = taskcheck;
};body
{
/* The image used */
background-image: linear-gradient(blue, red);
object-fit: cover;
/* Full height */
height: auto;
width: 100%;
/* Center and scale the image nicely */
background-position: center;
background-size: cover;
/*background-repeat: no-repeat;*/
}
.center
{
text-align: center;
background-color: aquamarine;
}
.background-cover
{
background-color: aquamarine;
background-image: url("images/Custom Background(7).jpg");
background-size: cover;
background-repeat: no-repeat;
height: 400px;
width: 1520px;
}
.background-cover-2
{
background-color: aquamarine;
background-size: cover;
background-repeat: no-repeat;
font-weight: bold;
}
.background-cover-3
{
background-color: aquamarine;
background-size: cover;
background-repeat: no-repeat;
}
.container
{
text-align: center;
}
.fieldset2 {
margin:2px;
padding:0px;
}<html>
<head>
<title>To-Do List Project</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css">
</head>
<body>
<!-- Title of the project -->
<h1 class="center"> To-Do List Program </h1>
<!-- Creating the background of the cover -->
<div class="background-cover"></div>
<!-- Creating container to present the Inputfield to add task for the To-Do list -->
<div class="container">
<h1 class="center"> Enter text into the input field to add items into your list </h1>
<h1 class="center"> Click on the item to mark that the task are complete </h1>
<h1 class="center"> Click on X to remove the task from To-Do List </h1>
<input type="text" id="Taskname" name="Tname" placeholder="Input task" size="14">
<button type="button" id="TaskAdd" onclick="addtask();"> Add </button>
<!-- Creating fieldset to locate the tasks into two sections, first section is the To-Do list -->
<fieldset class="background-cover-3">
<legend class="background-cover-2"> To-Do: </legend>
<ul id="Do1" style="list-style: none;">
<li>
</li>
</ul>
</fieldset>
<!-- Creating fieldset to locate the tasks into two sections, Second section is the Completed list -->
<fieldset class="background-cover-3 fieldset2">
<legend class="background-cover-2 fieldset2"> Completed: </legend>
<ul id="Com1" style="list-style: none;">
<li>
</li>
</ul>
</fieldset>
</div>
<script src="main.js"></script>
</body>
</html>Could you please advise me on how to extract the input value from the textfield and change it into a checkbox?