[Sugestão] [Resolução] Criando buttons e alterando display da <ul>

Oi, pessoal!

Confesso que não consegui resolver utilizando o data-attribute.

Contudo, compartilho com vocês a maneira que encontrei para solucionar o desafio. Espero que contribua de alguma forma!

//Cria a constante lista, pegando a classe da <ul>
const lista = document.querySelector(".lista");

//Cria o botão "Mostrar lista", colocando um texto nele e colocando ele no body
let botaoMostrar = document.createElement("button");
let textoMostrar = document.createTextNode("Mostrar lista");
botaoMostrar.appendChild(textoMostrar);
document.body.appendChild(botaoMostrar);

//Cria o botão "Esconder lista", colocando um texto nele e colocando ele no body
let botaoEsconder = document.createElement("button");
let textoEsconder = document.createTextNode("Esconder lista");
botaoEsconder.appendChild(textoEsconder);
document.body.appendChild(botaoEsconder);

//A função mostrarLista é criada. No evento de clique no botão, a <ul> vira display block
function mostrarLista () {
    botaoMostrar.onclick = function () {
        lista.style.display = "block";
    }
}

//A função esconderLista é criada. No evento de clique no botão, a <ul> vira display none
function esconderLista () {
    botaoEsconder.onclick = function () {
        lista.style.display = "none";
    }
}

//Funções são executadas
esconderLista();
mostrarLista();