Exercício de Programação #01 - JS - Soma, média e ordem

11/10/2020

No exercício de hoje trabalharemos com Javascript trazendo a soma, média e ordem de cinco numerais digitados pelo usuário.

Soma, média e ordenamento de números com JS

index.html

No nosso html vamos criar o formulário e linkar a cdn do Bootstrap e o Javascript que fará as operações:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
</head>
<body>

    <div class="result col-4 m-auto d-none">
        <div class="sum alert alert-success"></div>
        <div class="average alert alert-danger"></div>
        <div class="order alert alert-warning"></div>
    </div>

    <div class="form col-4 m-auto">
        <input type="text" name="name1" id="name1" class="form-control mb-2" placeholder="Nome 1:">
        <input type="text" name="name2" id="name2" class="form-control mb-2" placeholder="Nome 2:">
        <input type="text" name="name3" id="name3" class="form-control mb-2" placeholder="Nome 3:">
        <input type="text" name="name4" id="name4" class="form-control mb-2" placeholder="Nome 4:">
        <input type="text" name="name5" id="name5" class="form-control mb-2" placeholder="Nome 5:">
        <input type="submit" id="submit" value="Enviar" class="btn btn-primary">
    </div>

    <script src="javascript.js"></script>
</body>
</html>

javascript.js

O Javascript será responsável por selecionar os elementos e fazer as operações e exibição para o usuário de forma dinâmica:

(function(win,doc){
    'use strict';

    doc.querySelector('#submit').addEventListener('click',function(event){
        event.preventDefault();
        let allInputs=doc.querySelectorAll('input[type=text]');
        let sum=0;
        let arr=[];

        for(let i=0; i < allInputs.length; i++){
            let value=allInputs[i].value;
            sum+=parseInt(value);
            arr.push(value);
        }
        let average=sum/parseInt(allInputs.length);
        arr.sort((a,b)=>a-b);

        doc.querySelector('.result').classList.remove('d-none');
        doc.querySelector('.sum').innerHTML=`Soma: ${sum}`;
        doc.querySelector('.average').innerHTML=`Média: ${average}`;
        doc.querySelector('.order').innerHTML=`Ordem: ${arr.map(elem=>elem)}`;
    },false);
})(window,document);

Por hoje é só! Sucesso nos códigos e na vida!

Precisa de um professor? webdesignemfoco@gmail.com

Receba as aulas da Webdesign em Foco em Seu Email

Posts Relacionados

Exercício de Programação #02 - Google Planilhas - Soma, contagem e formatação condicional

No tutorial de hoje faremos um exercício de Google Planilhas exibindo um soma condicional, uma contagem condicional e uma formatação condicional.

Exercícios

Nessa playlist aprenderemos na prática a programar, utilizando para isso exercícios de programação nas mais variadas linguagens e tecnologias.