gistfile1.html

<style>
    html{
        background-color: #000;
        opacity: 0.9;
    }
    li{
        color: white;
        user-select: none;
    }
    .completed {
        text-decoration: line-through;
        color: red
    }
    h1 {
        color: grey;
        font-size: 4.5em
    }
</style>

<h1>MY Todo List App</h1>
<button id="add_btn">Add Todo:</button>
<input id="input_field">
<ul id="todo_list">
</ul>
<script>
    const btn = document.getElementById('add_btn')
    const todoList = document.getElementById('todo_list')
    const inputField = document.getElementById('input_field')

    btn.addEventListener('click', addToDo)
    
    function addToDo(e){
        const value = inputField.value
        if(value === ''){
            return
        }
        const newTodo = document.createElement('li')
        
        newTodo.innerText = value
        newTodo.addEventListener('click', completeTodo)

        todoList.append(newTodo)
        inputField.value = ''
    }
    function completeTodo(e){
        const todo = e.target
        console.log(todo.innerText)
        if(todo.classList.contains('completed')){
            todo.classList.remove('completed')
        } else {
            todo.classList.add('completed')
        }
    }
</script>