Ainda não estou satisfeita mas aqui está | JavaScript e HTML: desenvolva um jogo e pratique lógica de programação

Vou compartilhar um exemplo de lista de compras mas sinto que ficou um pouco bagunçado rs

<meta charset=“UTF-8”> 

<script>

    document.write ("<h1> Compras de Setembro </h1>")

/////lista_de_doces
var list1 = "Doces"
var candyList = "4 Chocolates Amargos - R$" + (4.50 * 4) + "<br>" + "1 Kinder Bueno Branco - R$" + (8 * 1) + "<br>" + "4 Bombons de Ferrero Roche - R$" + (30 * 4) + "<br>" + "20 Caixas de Paçoca Light - R$" + (20 * 22) + "<br> <br>";
var    totalCandy = (18 + 8 + 120 + 440);

    document.write ("<strong> Seção de " + list1 + "</strong>" + "<br>" + candyList);
    document.write ("<strong> O total da seção " + list1 + "</strong>" + " <br> " + "R$" + totalCandy + "<br> <br>");


/////lista_de_frutas
var list2 = "Frutas"
var fruitList = "12 Bananas Nanina Verdes - R$" + (1 * 12) + "<br>" + "8 Mamōes Papaya - R$" + (3 * 8) + "<br>" + "3 Abacaxis - R$" + (4 * 3) + "<br>" + "15 Limōes - R$" + (2 * 15) + " <br> ";
var    totalFruit = (12 + 24 + 12 + 30);

    document.write ("<strong> Seção de " + list2 + "</strong>" + "<br>" + fruitList + "<br>"); 
    document.write ("<strong> O total da seção " + list2 + "</strong>" + " <br> " + "R$" + totalFruit + "<br> <br>");

    var totalCompra = (totalCandy + totalFruit) /2;
    document.write ("<h2> A compra do mês de Setembro</h2>" + " <br> " + "Eu e minha mãe pagamos " + "<strong>" + "R$"+ totalCompra + "</strong>");

</script>

Acham que se eu separar cada item de compra, por exemplo, seria melhor?

Olá Gabriela. Acho que como exercício está começando bem.

A bagunça a que se refere talvez possa sim ser melhorada. E sim, poderia criar mais variáveis, para deixar mais organizado. Experimente criar variáveis como 'item1' com o nome do item, 'precoItem1' com o preço unitário, e 'quantItem1' para a quantidade comprada, e veja como pode ficar o resultado.

Outra bagunça que pode evitar é acostumar-se a utilizar ponto e vírgula ao final de cada linha de comando, não utilizar mais que um espaço pra separar as palavras, e identar bem o código (usar o "tab" pra dar espaço no início de cada linha, e alinhar cada linha). No seu caso, tudo que vem entre um você alinha com um tab a mais (veja abaixo).

Ah, e em sua última linha, disse que "Eu e minha mãe pagamos " mas apresentou o valor da variável 'totalCompra', que é o valor total dividido por dois (o que seria a média para 2 pessoas). Então pra não ficar dúbio, deveria dizer "Eu e minha mãe pagamos cada uma ".

Bons estudos.

<meta charset=“UTF-8”> 

<script>

    document.write ("<h1> Compras de Setembro </h1>")

    /////lista_de_doces
    var list1 = "Doces";
    var candyList = "4 Chocolates Amargos - R$" + (4.50 * 4) + "<br>" + "1 Kinder Bueno Branco - R$" + (8 * 1) + "<br>" + "4 Bombons de Ferrero Roche - R$" + (30 * 4) + "<br>" + "20 Caixas de Paçoca Light - R$" + (20 * 22) + "<br> <br>";
    var totalCandy = (18 + 8 + 120 + 440);

    document.write ("<strong> Seção de " + list1 + "</strong>" + "<br>" + candyList);
    document.write ("<strong> O total da seção " + list1 + "</strong>" + " <br> " + "R$" + totalCandy + "<br> <br>");


    /////lista_de_frutas
    var list2 = "Frutas";
    var fruitList = "12 Bananas Nanina Verdes - R$" + (1 * 12) + "<br>" + "8 Mamōes Papaya - R$" + (3 * 8) + "<br>" + "3 Abacaxis - R$" + (4 * 3) + "<br>" + "15 Limōes - R$" + (2 * 15) + " <br> ";
    var totalFruit = (12 + 24 + 12 + 30);

    document.write ("<strong> Seção de " + list2 + "</strong>" + "<br>" + fruitList + "<br>"); 
    document.write ("<strong> O total da seção " + list2 + "</strong>" + " <br> " + "R$" + totalFruit + "<br> <br>");

    var totalCompra = (totalCandy + totalFruit) /2;
    document.write ("<h2> A compra do mês de Setembro</h2>" + " <br> " + "Eu e minha mãe pagamos " + "<strong>" + "R$"+ totalCompra + "</strong>" + " cada uma.");

</script>