Entrar Ainda não tem acesso?
4
respostas

Alterações no código

por João Elias Maccari
| 46.4k xp | 26 posts

Boa noite! Paralelo ao programa desenvolvido neste curso, estou criando um outro, na qual tem uma diferença no formulário, no caso 2 dos seus imputs são do tipo select. Eu até consigo fazer os dados aparecerem na tabela, o problema é na hora de fazer os cálculos... Antes fiz o teste usando um input de texto e deu certo, mas agora com o select não da mais. O problema é que na validação dos dados não consigo passar o que está nos options do select pro programa validar e fazer o processamento. Não está dando nenhum erro, só que o fluxo passa direto pelas condicionais sem processar a conta

Outro problema é que a validação dos campos parou de funcionar, não fica mais vermelho caso o campo fique em branco

Vou deixar o código pra ver se alguém me da uma luz, obrigado!!

4 respostas
por João Elias Maccari
| 46.4k xp | 26 posts

Cerâmica Construir

        <main>
            <section class="container">
                <h2>lista vendas</h2>
                <table>
                    <thead>
                        <tr>
                            <th>Cliente</th>
                            <th>Quantidade</th>
                            <th>Tipo</th>
                            <th>Total R$</th>
                            <th>Quem recebeu</th>
                        </tr>
                    </thead>
                    <tbody id="tabela-vendas">
                        <tr class="venda" id="primeira-venda">  
                            <td class="info-cliente">jose</td>
                            <td class="info-qtd">5</td>
                            <td class="info-tipo">6 Furos</td>
                            <td class="info-total">7.000</td>
                            <td class="info-socio">João</td>
                        </tr>
                        <tr class="venda" id="segunda-venda">  
                            <td class="info-cliente">Nara</td>
                            <td class="info-qtd">5</td>
                            <td class="info-tipo">6 Furos</td>
                            <td class="info-total">4.000</td>
                            <td class="info-socio">joao</td>
                        </tr>
                        <tr class="venda" id="terceira-venda">  
                            <td class="info-cliente">Felipe</td>
                            <td class="info-qtd">20</td>
                            <td class="info-tipo">9 Furos</td>
                            <td class="info-total">12.000</td>
                            <td class="info-socio">socio01</td>
                        </tr>
                    </tbody>
                </table>
            </section>
        </main>

       <!-- ... -->
            <section class="container">
                <h2 id="titulo-form">Adicionar nova venda</h2>
                <form id="form-adiciona">
                    <div class="grupo">
                        <label for="cliente">Cliente:</label>
                        <input id="cliente" name="cliente" type="text" placeholder="digite o nome do cliente" class="campo">
                    </div>
                    <div class="grupo">
                        <label for="quantidade">Quantidade:</label>
                        <input id="quantidade" name="quantidade" type="text" placeholder="digite a quantidade de tijolos" class="campo campo-medio">
                    </div>
                    <div class="grupo">
                        <label for="tipo">Tipo:</label>
                        <select id="tipo" name="tipo" type="text" placeholder="digite o tipo do priduto" class="campo campo-medio" onchange="getTipo()">
                            <option  >Selecione o tipo</option>
                            <option name="6f" value="6f">Tijolos 6 furos</option>
                            <option name="9f"  value="9f">Tijolos 9 furos</option>
                            <option name="8f" value="8f">Tijolos 8 furos</option>
                            <option name="tavela" value="tavela">Tavela</option>
                        </select>
                    </div>
                    <div class="grupo">
                        <label for="total">Total R$:</label>
                        <input id="total" type="text" placeholder="digite o total em R$" class="campo campo-medio">
                    </div>
                    <div class="grupo">
                        <label for="socio">Quem recebeu:</label>
                        <select id="socio" name="socio" type="text" placeholder="digite quem recebeu" class="campo campo-medio" onchange="getSocio()">
                            <option value="entrada">sócio</option>
                            <option  value="socio01">Sócio 01</option>
                            <option  value="socio02">sócio 02</option>


                        </select>
                    </div>


                    <button id="adicionar-venda" class="botao bto-principal">Adicionar nova venda</button>
                </form>
        </section>

    </div>
por João Elias Maccari
| 46.4k xp | 26 posts
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;


}
por João Elias Maccari
| 46.4k xp | 26 posts

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);
}
por João Elias Maccari
| 46.4k xp | 26 posts

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;
}