Today I used the snippets view in Chrome developer tools to write functions that interact with the todo list.

Here are all the functions saved under vanilla todo helpers in snippets.

function clickItem(item){
    item.click()
}

function toggleAll(){
    document.querySelector("#toggle-all").click()
}

function selectItemX(x){
    document.querySelector(`ul.todo-list > li:nth-child(${x}) input.toggle`).click()
}

function deleteItemX(x){
    document.querySelector(`ul.todo-list > li:nth-child(${x}) button.destroy`).click()
}

function clearCompleted(){
    document.querySelector('button.clear-completed').click()
}

function filterCompleted(){
    location.hash="/completed"
}

function filterAll(){
    location.hash="/"
}

function filterActive(){
    location.hash="/active"
}

function createTodo(name){
    document.querySelector("input.new-todo").value=name
    document.querySelector("input.new-todo").dispatchEvent(new Event('change',{'bubbles':true}))
}

function amendTodo(x, amendedValue){
    document.querySelector(`ul.todo-list > li:nth-child(${x}) > div > label`).dispatchEvent(new Event('dblclick', {'bubbles':true}))
    document.querySelector(`ul.todo-list > li:nth-child(${x}) .edit`).value=amendedValue
    document.querySelector(`ul.todo-list > li:nth-child(${x}) .edit`).dispatchEvent(new Event('blur'))
}

function clearCompleted(){
    document.querySelector("button.clear-completed").click()
}