What is the optimal way to write this small Todo List app Hello I don't have any specific problem but I'm just interested how someone who is experienced in JavaScript would write this small toy program. it's a simple Todo List app, there are many approaches to writing something like this but I'm not sure if the way I wrote it is the most optimal.
I want to see how others would write this, and maybe learn something new.
I'm not very experienced programmer so any criticism  is welcome :)


const TodoList = document.getElementById("TodoList");
const AddTodo = document.getElementById("AddTodo");
let ToggleBtns = []; let RemoveBtns = [];

let MyTodos = [
    {todoText: "hello world", Completed: true},
    {todoText: "hello world", Completed: false},
    {todoText: "hello world", Completed: false}
];

function CreateItems(text, index){
    const TodoItem = document.createElement("li");
    const ToggleButton = document.createElement("button");
    const TodoText = document.createElement("p");
    const RemoveButton = document.createElement("button");

    TodoItem.className = "TodoItem";
    ToggleButton.className = "ToggleButton";
    TodoText.ClassName = "TodoText";
    RemoveButton.className = "RemoveButton";
    TodoText.innerText = text;
    TodoText.style.textDecoration = (MyTodos[index].Completed === true ? "line-through" : "none");
    TodoItem.appendChild(ToggleButton);
    TodoItem.appendChild(TodoText);
    TodoItem.appendChild(RemoveButton);
    TodoList.appendChild(TodoItem);

    ToggleBtns.push(ToggleButton);
    RemoveBtns.push(RemoveButton);
};
for (i in MyTodos) { CreateItems(MyTodos[i].todoText, i); }

AddTodo.addEventListener("keypress", function(e){
    if(e.keyCode === 13){
            MyTodos.push({todoText: AddTodo.value, Completed: false});
            CreateItems(MyTodos[MyTodos.length -1].todoText, (MyTodos.length -1))
     }
});
document.addEventListener("click", function(e){
        if(e.target.className === "ToggleButton"){
            ToggleIndex = ToggleBtns.indexOf(e.target);
            MyTodos[ToggleIndex].Completed =
            (MyTodos[ToggleIndex].Completed === true ? false : true);
            e.target.parentElement.children[1].style.textDecoration = (MyTodos[ToggleIndex].Completed === true ?  "line-through" : "none"); 
        }
        else if (e.target.className === "RemoveButton"){
            RemoveIndex = RemoveBtns.indexOf(e.target);
            if(RemoveIndex !== 0){
                MyTodos.splice(RemoveIndex, RemoveIndex);
                ToggleBtns.splice(RemoveIndex, RemoveIndex);
                RemoveBtns.splice(RemoveIndex, RemoveIndex);
            } else {
                MyTodos.splice(0, 1);
                ToggleBtns.splice(0, 1);
                RemoveBtns.splice(0, 1);
            }
            e.target.parentElement.remove();
        }
    });
 #TodoList {
            display: flex;
            flex-direction: column;
            padding: 0  ;
        }
        .TodoItem {
            display: flex;
            flex-direction: row;
        }
        .TodoItem button {
            width: 50px;
        }
        .TodoItem p {
            width: 300px;
            text-align: center;
        }
        #Todos {
            display: table;
            margin: 0 auto;
        }
        #AddTodo {
            display: table;
            height:35px;
            width: 70%;
            padding: 0 20px;
            margin: 0 auto;
        }
&lt;div id="Todos"&gt;
    &lt;input type="text" name="" id="AddTodo"&gt;
    &lt;ul id="TodoList"&gt;&lt;/ul&gt;
&lt;/div&gt;
If you had not written this code but were trying to use it, how would you know that the square on either side was a button or what the function of that button was? Buttons need labels and they are generally oval shaped.
When you design or write code for the web you need to consider the user and how they will be using the tool. Even a toy application should follow some basic standards.