Programa para verificar mala de viagem | Alguém pode me ajudar?

Olá Gabriel.

Fiz alguns ajustes no seu código, tentando abordar apenas oque você tem de conhecimento atualmente (com base no curso).

Segue o novo código, e qualquer dúvida fico à disposição.

<meta charset = "UTF-8">

<br>
<input />
<button> ADICIONAR NA MALA  </button>
<br> <br>
<label></label>
<hr>

<script>
    function adicionar() {
        malaDeViagem.push(" " + campoDeTexto.value + " ");
        campoDeTexto.value = "";
        campoDeTexto.focus();
        console.log(malaDeViagem);

        var mensagem = "";
        for(var i = 0; i < malaDeViagem.length; i++)
        {
            if(i > 0)
                mensagem += ("," + malaDeViagem[i]);
            else
                mensagem += malaDeViagem[i];
        }

        document.querySelector("label").innerText = "Sua mala até o momento possui: " + mensagem;
    }

    var campoDeTexto = document.querySelector("input");
    var botao = document.querySelector("button");
    var malaDeViagem = [];

    botao.onclick = adicionar;
</script>

Olá, tomei a liberdade de editar o programa e incrementa-lo a partir da alteração feita por Sergio Lucas Da Silva. Só lembrando que fui um pouco além do curso.

Explico, ao invés de utilizar o método: document.querySelector() utilizei document.getElementById() pois incluí outro <button> e neste caso precisei identificar <button id=""> para definir a execução de cada um.

Também utilizei um método do array além do push() que adiciona, neste caso filter() que através de uma condição similar ao if() nos traz a mesma array de forma diferente. Poderia ser feito utilizado for(). Neste caso, pedi que não trouxesse o item que foi digitado. Não tem tratamento de maiúscula e minúscula.

Tudo isso é encontrado na documentação do JavaScript: MDN

Espero ter ajudado e motivado a aprender mais e mais.

<meta charset = "UTF-8">

<br>
<input />
<button id="adicionar">ADICIONAR NA MALA</button>
<button id="remover">REMOVER DA MALA</button>
<br><br>
<label></label>
<hr>

<script>
    function mostrar() {
        var mensagem = "";
        for(var i = 0; i < malaDeViagem.length; i++)
        {
            if(i > 0)
                mensagem += (", " + malaDeViagem[i]);
            else
                mensagem += malaDeViagem[i];
        }
        document.querySelector("label").innerText = "Sua mala até o momento possui: " + mensagem + ".";
    }

    function reiniciarCampodeTexto() {
        campoDeTexto.value = "";
        campoDeTexto.focus();
    }

    function adicionar() {
        malaDeViagem.push(campoDeTexto.value);
        reiniciarCampodeTexto();
        console.log(malaDeViagem);
        mostrar();
    }

    function remover() {
        var itemParaRemover = campoDeTexto.value;
        reiniciarCampodeTexto();
        // filter = condição = retorna todos os itens da mala que forem difente do item que foi digitado
        malaDeViagem = malaDeViagem.filter((itemNaMala) => itemNaMala != itemParaRemover);
        console.log(malaDeViagem);
        mostrar();
    }

    var malaDeViagem = [];
    var campoDeTexto = document.querySelector("input");
    var botaoAdicionar = document.getElementById("adicionar");
    var botaoRemover = document.getElementById("remover")
    botaoAdicionar.onclick = adicionar;
    botaoRemover.onclick = remover
</script>

Caso queira utilizar o for() ao invés do filter() para enter melhor a lógica por traz. Só foi mantido o getElementById() por possuir dois <button> e conseguirmos destingir qual é qual.

<meta charset = "UTF-8">

<br>
<input />
<button id="adicionar">ADICIONAR NA MALA</button>
<button id="remover">REMOVER DA MALA</button>
<br><br>
<label></label>
<hr>

<script>
    function mostrar() {
        var mensagem = "";
        for(var i = 0; i < malaDeViagem.length; i++)
        {
            if(i > 0) {
                mensagem += (", " + malaDeViagem[i]);
            } else {
                mensagem += malaDeViagem[i];
            }
        }
        document.querySelector("label").innerText = "Sua mala até o momento possui: " + mensagem + ".";
    }

    function reiniciarCampodeTexto() {
        campoDeTexto.value = "";
        campoDeTexto.focus();
    }

    function removerItemDoArray(malaDeViagem) {
        var itemParaRemover = campoDeTexto.value;
        var novaMalaDeViagem = [];
        for(var posicao=0;posicao<malaDeViagem.length;posicao++) {
            if(malaDeViagem[posicao] != itemParaRemover) {
                novaMalaDeViagem.push(malaDeViagem[posicao]);
            }
        }
        return novaMalaDeViagem;
    }

    function adicionar() {
        malaDeViagem.push(campoDeTexto.value);
        reiniciarCampodeTexto();
        console.log(malaDeViagem);
        mostrar();
    }

    function remover() {
        // cria um novo array a partir do antigo, removendo o item descrito no campo de texto
        malaDeViagem = removerItemDoArray(malaDeViagem);
        reiniciarCampodeTexto();
        console.log(malaDeViagem);
        mostrar();
    }

    var malaDeViagem = [];
    var campoDeTexto = document.querySelector("input");
    var botaoAdicionar = document.getElementById("adicionar");
    var botaoRemover = document.getElementById("remover")
    botaoAdicionar.onclick = adicionar;
    botaoRemover.onclick = remover
</script>