How could I decrease my code?

Asked

Viewed 73 times

-1

Hello I’m a beginner so I don’t know much about it but I was practicing and I realized that I couldn’t put line breaks in Document.write, so I decided to do it this way but I feel like I did it wrong. How could it diminish?

<!DOCTYPE html>
<html lang="pt-br">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Formulário de compra</title>
        <style>
            body{
                background-color:wheat ;
                color:black ;
                font:oblique 22pt roboto;
                }
            h1{
                color:black;
                font:normal calibri;
            }
        </style>

    </head>
<body>
    <h1>Valor da Compra</h1>
    <p>
        <script>
            var n1= Number(prompt('Quantos fardos de refrigerante de 2 litros?'))
            var n2= Number(prompt('Quantos kilos de carne?'))
            var n3= Number(prompt('Quantas sacolas de pão?'))
            var jun1= n1*12
            var jun2= n2*10
            var jun3= n3*3.5
            var tot= jun1+jun2+jun3
            var res1=document.write('Preço do refrigerante:'+ jun1.toLocaleString('pt-br', {style:'currency', currency: 'BRL'}))
        
        </script>
    </p>
    <p>
        <script> 
            var res2=document.write('Preço da carne:'+jun2.toLocaleString('pt-br', {style:'currency', currency: 'BRL'}))
        </script>
    </p>
    <p>
        <script>
            var res3=document.write('Preço do pão:'+jun3.toLocaleString('pt-br', {style:'currency', currency: 'BRL'}))
        </script>
    </p>
    <p>
        <script>
            var res4=document.write('Preço da comida:' + tot.toLocaleString('pt-br', {style:'currency', currency: 'BRL'}))
        </script>
    </p>

</body>
</html>
javascript

3 answers

2

Tip don’t mix code with Markup (HTML) and much less style(css), let each one do their own the way they have to do.

Use Function where you can avoid repeating pieces of code that do the same thing, it will make your code simpler and easier to read

Use the Interpolation where it is necessary to concatenate some text/string with the value of some variable

Follow some programming principles, such as KISS, always try to keep your code clean and reusable anywhere in your program.

// Escreva uma função que atualize o HTML de um elemento passsado
function updateElement(id, value){
  document.getElementById(id).innerHTML = value;
}

// Escreva uma função que se ocupe de perguntar o valor e retornar o mesmo já multiplicado pelo fator passado
function askPrice(question, multiplierFactor){
  const n = Number(prompt(question));
  return n * multiplierFactor;
}

// Pergunte os preços usando a função criada anteriormente
const preccoRefri = askPrice('Quantos fardos de refrigerante de 2 litros?', 12);
const precoCarne = askPrice('Quantos kilos de carne?', 10);
const precoPao = askPrice('Quantas sacolas de pão?', 3.5);

// Calcule o valor total
const total = preccoRefri + precoCarne + precoPao;

// Defina o formato da moeda uma única vez e salve em uma variável para ser reultilizado mais tarde
const format = {style:'currency', currency: 'BRL'};

// Atualize seus elementos
updateElement('precoPao', `Preço pão: ${precoPao.toLocaleString('pt-br', format)}`);
updateElement('precoCarne', `Preço carne: ${precoCarne.toLocaleString('pt-br', format)}`);
updateElement('precoRefrigerante', `Preço refrigerante: ${preccoRefri.toLocaleString('pt-br', format)}`);
updateElement('precoTotal', `Preço comida: ${total.toLocaleString('pt-br', format)}`);
<p id="precoPao"></p>
<p id="precoRefrigerante"></p>
<p id="precoCarne"></p>
<hr />
<p id="precoTotal"></p>

  • Thank you very much, I do not know much about javascript yet but I will try to learn everything what you reported.

0

In this case, from what I understand, you want to display all the values in html by breaking the lines.

As it is in your:

document.write('Preço da comida')

Try to put:

document.write('<br>Preço da comida')

0

Browser other questions tagged javascript

You are not signed in. Login or sign up in order to post.