CREATE: Add a Task

The Create operation allows the user to add a new task. Create a tag to enter the javascript within the HTML file

code html

<script>
</script>

Within the <script> tag add the getTaskText() function to retrieve the user input text from the <input> tag

code javascript

function getTaskText(){
    const input = document.getElementById('taskInput');
    const text = input.value.trim();

    console.log("The input value is: " + input.value);
    return text;
}

Also add the event listener function addTask() to parse the taskText as a task item

code javascript

function addTask(){
    const taskText = getTaskText();
    addTaskItem(taskText);
}

Lastly add the addTaskItem(taskTexT) to render the task item on the taskList

code javascript

function addTaskItem(taskText){
    const li = document.createElement('li');
    const taskSpan = document.createElement('span');
    taskSpan.textContent = taskText;
    li.appendChild(taskSpan);
    
    document.getElementById('taskList').appendChild(li);
}

The resulting code should look like this

code html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Todolist Applicaiton</title>
</head>
<body>

    <h1>Todo List</h1>
    <input type="text"
            id="taskInput"
            placeholder="Add a task"
    /> 
    <button onclick="addTask()">Add Task</button>
    <ul id="taskList">Your tasks go here ...</ul>

<script>
function getTaskText(){
    const input = document.getElementById('taskInput');
    const text = input.value.trim();

    console.log("The input value is: " + input.value);
    return text;
}

function addTask(){
    const taskText = getTaskText();
    addTaskItem(taskText);
}

function addTaskItem(taskText){
    const li = document.createElement('li');
    const taskSpan = document.createElement('span');
    taskSpan.textContent = taskText;
    li.appendChild(taskSpan);

}

</script>

</body>
</html>

Testing the initial functionalities

Testing Checklist

code text

[ ] Add a task
[ ] Add multiple tasks

format_list_numbered Step 3 of 7

chevron_left Previous Next chevron_right