Form



let tipo ;
let socio;

let btnAdd = document.querySelector('#adicionar-venda')
btnAdd.addEventListener("click", function(event) {
    event.preventDefault()



    var form = document.querySelector('#form-adiciona')

    let cliente = form.cliente.value;
    let quantidade = form.quantidade.value;
    let tipoProd = tipo
    let total =  form.total.value;
    let socioRecebe = socio


    console.log(cliente);
    console.log(quantidade);
    console.log(tipoProd);
    console.log(total);
    console.log(socioRecebe);

    var vendaTr = document.createElement("tr")

    var clienteTd = document.createElement("td")
    var quantidadeTd = document.createElement("td")
    var tipoTd =  document.createElement("td")
    var totalTd = document.createElement("td")
    var socioTd = document.createElement("td")

    clienteTd.textContent = cliente
    quantidadeTd.textContent = quantidade
    tipoTd.textContent = tipo
    totalTd.textContent = total
    socioTd.textContent = socio

    vendaTr.appendChild(clienteTd)
    vendaTr.appendChild(quantidadeTd)
    vendaTr.appendChild(tipoTd)
    vendaTr.appendChild(totalTd)
    vendaTr.appendChild(socioTd)


    var tabela = document.querySelector('#tabela-vendas')
    tabela.appendChild(vendaTr);
})

function getSocio(){
    let inputSelectSocio = document.getElementById('socio');
    let op = inputSelectSocio.options[inputSelectSocio.selectedIndex].text

    let opValor = document.getElementsByClassName('info-tipo')
    opValor.value = op

    socio = op
    return socio;
}



function getTipo(){
    let inputSelect = document.getElementById('tipo');
    let op = inputSelect.options[inputSelect.selectedIndex].text

    let opValor = document.getElementsByClassName('info-tipo')
    opValor.value = op


    tipo = op

    return tipo;


}

Calculo

var vendas = document.querySelectorAll('.venda');
let somaTot6f = 0;
let somaTot9f = 0;
let somaTot8f = 0;
let somaTavela = 0;
let somaTot = 0;






for (let i = 0; i<vendas.length; i++) {

    let venda = vendas[i]

    //tag de celula da tabela
    let tdNome = venda.querySelector(".info-cliente");
    let tdQt = venda.querySelector('.info-qtd');
    let tdTipo = venda.querySelector('.info-tipo')
    let tdSocio = venda.querySelector('.info-socio')
    let tdTotal = venda.querySelector('.info-total')



    //tag valor da celula
    let nome = tdNome.textContent
    let quantidade = Number(tdQt.textContent)
    let tipo = tdTipo.textContent
    let total = tdTotal.textContent
    let socio = tdSocio.textContent

    console.log(tipo);

    let campoEhValido = true 

    if (quantidade <= 0 ) {
        campoEhValido = false
        tdQt.textContent = "Insira um valor correto"
        venda.classList.add("campo-invalido")
    }

    if (nome == "") {
        venda.classList.add("campo-invalido")
        tdNome.textContent = "Insira um nome"

    }

    if (tipo == "") {
        venda.classList.add("campo-invalido")
        tdTipo.textContent = "Insira um tipo"

    }

    if (total == "") {
        venda.classList.add("campo-invalido")
        tdTotal.innerHTML = "Insira o total"
    }

    if (socio == "") {
        venda.classList.add("campo-invalido")
        tdSocio.textContent = "Insira um nome"
    }


    if(tipo == '6 furos') {
            somaTot6f += quantidade

        } else if (tipo == "9 furos") {

            somaTot9f += quantidade

        }else if (tipo =="8 furos"){

            somaTot8f =+ quantidade

        }else if (tipo == "tavela") {

            somaTavela =+ quantidade
        }

        console.log(somaTot6f);
}

CSS

*{
    padding: 0px;
    margin: 0px;
    box-sizing: border-box;
}

body{
    font-family: Arial, Helvetica, sans-serif;
    font-size: 14px;
    background-color: grey;
}

header{
    height: 3em;
    background-color: #333;
    margin-bottom: 1em;
    color: white;
}

header .titulo{
    font-size: 2em;
    display: inline-block;
    vertical-align: middle;


}

header h2{

}

header .container:before{
    content: "";
    display: inline-block;
    height: 100%;
    vertical-align: middle;
}
.main_container{

    width: 100vw;
    height: 100vh;
    position: relative;
}

.container{
    width: 60%;
    height: 100%;
    margin: 0 auto;
}

section{
    margin: 2em 0;
    overflow: hidden;
}

section h2{
    font-size: 2em;
    display: block;
    padding-bottom: 10px;
    border-bottom: 1px solid #fff;
    margin-bottom: 20px; 
}

table{

    box-shadow: 0 5px 30px darkgrey;
    width: 100%;
    table-layout: fixed;

}

table, th, td{
    border: 1px solid black;
    border-collapse: collapse ;
}

th, td{
    text-align: center;
    width: 21%;
   padding: 15px; 
}

tr, td{
    cursor: pointer;
}

th{
    font-weight: bold;
    text-align: center;
}

label{
    color: #555;
    display: block;
    margin-bottom: .2em;
}

.campo{
    margin: 0;
    padding-bottom: 1em;
    width: 100%;
    border: 1px solid #ccc;
    padding: .7em;
    width: 100%;
}

.campo-medio{
    display: inline-block;
    padding-right: .5em;
}

.grupo{
    width: 32%;
    display: inline-block;
    padding: 10px 0px;
}

button{
    padding: .5em 2em;
    border: 0;
    border-bottom: 3px solid;
    font-size: 1.2em;
    cursor: pointer;
    margin: 0;
    margin-top: -3px;
    color: #fff;
    background-color:#0c8cd3;
    border-color: #04324c;
    width: 20%;
    display: block;
    clear: both;
    margin: 10px 0px;

}

button:active{
    margin-top:0px;
    border: 0;
}

button[disabled=disabled], button:disabled {
    background-color: gray;
    border-color: darkgray;

}

.adicionar-venda{
    margin-top: 30px;
}

.campo-invalido{
    border: 1px solid red;
}

.paciente-invalido{
    background-color:lightcoral;
}

.campo-invalido{
    background-color: lightcoral;
}