0

Olá sou iniciante em programação e preciso montar uma página que tenha valores de uma promoção telefônica. Ate x minutos é gratuito, depois disso começa a cobrar por minuto adicional de chamada + porcentagem do preço do ddd.

exemplo:

plano 1 = 10 minutos de ligação gratuita (existem 3 planos diferentes, com tempos diferentes)

ddd de origem e destino 1 : 021-022 = $2.00 por minuto (cada ddd diferente possui um preço diferente)

Tempo: A pessoa escolhe quanto tempo ela quer falar, se for menor que o tempo do plano, o valor é zero. Mas se passar do tempo do plano escolhido, ele cobra o preço do ddd escolhido por minuto adicional de ligação + 10% do valor do ddd.

Então a premissa é que a pessoa possa escolher o plano + ddd + tempo de chamada e isso vai gerar um valor de quanto a pessoa vai pagar pelos minutos adicionais. Já fiz os arquivos html e js, porém não parece que está correto a maneira que fiz.

meu código index.html abaixo:

function calcValor() {
  // zerando total

  document.getElementById("tempo").value = '0';

  // valor dos planos

  var fale1 = parseFloat(document.getElementById("30").value);
  var fale2 = parseFloat(document.getElementById("60").value);
  var fale3 = parseFloat(document.getElementById("120").value);

  //valor do ddd

  var ddd = parseFloat(document.getElementById("ddd1", "ddd2", "ddd3", "ddd4", "ddd5", "ddd6").value);
  var ddd1 = parseFloat(document.getElementById("1.90").value);
  var ddd2 = parseFloat(document.getElementById("2.90").value);
  var ddd3 = parseFloat(document.getElementById("1.70").value);
  var ddd4 = parseFloat(document.getElementById("2.70").value);
  var ddd5 = parseFloat(document.getElementById("0.90").value);
  var ddd6 = parseFloat(document.getElementById("1.90").value);


  //Calculos com o plano


  var total = parseFloat(fale1) + parseFloat(ddd) + parseFloat(tempo) * 100;
  document.getElementById("total").value = "R$ " + total.toFixed(2);
  if (fale1 => 10) {
    print = "0";
  } else {
    print = "total"
  }

  var total = parseFloat(fale2) + parseFloat(ddd) + parseFloat(tempo) * 100;
  document.getElementById("total").value = "R$ " + total.toFixed(2);
  if (fale1 => 20) {
    print = "0";
  } else {
    print = "total"
  }

  var total = parseFloat(fale3) + parseFloat(ddd) + parseFloat(tempo) * 100;
  document.getElementById("total").value = "R$ " + total.toFixed(2);
  if (fale1 => 30) {
    print = "0";
  } else {
    print = "total"
  }


  //Calculo sem o plano

  var noplan = parseFloat(ddd) + parseFloat(tempo) * 100;
  document.getElementById("noplan").value = "R$ " + total.toFixed(2);
  if (fale1 => 0) {
    print = "0";
  } else {
    print = "noplan"
  }

  var noplan = parseFloat(ddd) + parseFloat(tempo) * 100;
  document.getElementById("noplan").value = "R$ " + total.toFixed(2);
  if (fale1 => 0) {
    print = "0";
  } else {
    print = "noplan"
  }

  var noplan = parseFloat(ddd) + parseFloat(tempo) * 100;
  document.getElementById("noplan").value = "R$ " + total.toFixed(2);
  if (fale1 => 0) {
    print = "0";
  } else {
    print = "noplan"
  }
<html>

<head>
  <title>Javascript: Tarifa</title>

  <style type="text/css">
    table tr td {
      padding: 5px;
    }
    
    table tr td.dir {
      padding-right: 15px;
      text-align: right;
      width: 120px;
    }
  </style>
</head>

<body>

  <p>Calcular valor do desconto:</p>
  <table cellpadding="0" cellspacing="0" border="0">


    <div class="container-fluid" style="width: 18rem;">
      <div class="card-body">
        <select class="form-select form-select-sm" aria-label=".form-select-sm example">
          <option selected>Selecione o DDD</option>
          <option value="ddd1">011-016</option>
          <option value="ddd2">016-011</option>
          <option value="ddd3">011-017</option>
          <option value="ddd4">017-011</option>
          <option value="ddd5">011-018</option>
          <option value="ddd6">018-011</option>
        </select>

        </br>
        </br>

        <div class="container-fluid" style="width: 18rem;">
          <div class="card-body">
            <select class="form-select form-select-sm" aria-label=".form-select-sm example">
              <option selected>Selecione o Plano:</option>
              <option value="fale1">Liga 10</option>
              <option value="fale2">Liga 20</option>
              <option value="fale3">Liga 30</option>
            </select>

            </br>
            </br>

            <tr>
              <td class="dir">Informe o tempo de chamada:</td>
              <td><input type="text" name="tempo" id="tempo" value="0.00" /></td>
            </tr>


            <tr>
              <td class="dir">Com o Plano você vai pagar R$: </td>
              <td><input type="text" name="total" id="total" onblur="total" /></td>
            </tr>

            <tr>
              <td class="dir">Sem o Plano você vai pagar R$: </td>
              <td><input type="text" name="noplan" id="noplan" onblur="noplan" /></td>
            </tr>

            <tr>
              <td class="dir"></td>
              <td><input type="submit" name "total" id="total" value="Calcular" </td>
            </tr>

  </table>

  <script src="./scripts.js"></script>

</body>

</html>

Desde já agradeço qualquer ajuda.

1
  • 2
    E qual seria a sua dúvida?
    – tvdias
    29/01/2021 às 23:29

1 Resposta 1

0

Talvez seja melhor ter um html mais enxuto e deixar as informações no script.

Tentei ajudar.

const PLANOS = [{
    descricao: "Liga 10",
    minutos: 10
  },
  {
    descricao: "Liga 20",
    minutos: 20
  },
  {
    descricao: "Liga 30",
    minutos: 30
  }
]

const DDDS = [{
    area: "011-016",
    tarifa: 1.90
  },
  {
    area: "016-011",
    tarifa: 2.90
  },
  {
    area: "011-017",
    tarifa: 1.70
  },
  {
    area: "017-011",
    tarifa: 2.70
  },
  {
    area: "011-018",
    tarifa: 0.90
  },
  {
    area: "018-011",
    tarifa: 1.90
  }
]

function setaDDDs() {
  let input = document.getElementById("dddInput");
  for (ddd of DDDS) {
    let option = document.createElement("option");
    option.innerHTML = ddd.area;
    option.value = DDDS.indexOf(ddd);
    input.appendChild(option);
  }
}


function setaPlanos() {
  let input = document.getElementById("planosInput");
  for (plano of PLANOS) {
    let option = document.createElement("option");
    option.innerHTML = plano.descricao;
    option.value = PLANOS.indexOf(plano);
    input.appendChild(option);
  }
}


function calcValor() {
  const tempo = Number(document.getElementById("tempo").value);
  //console.log("tempo:", tempo);

  const plano = PLANOS[document.getElementById("planosInput").value];
  //console.log("plano:", plano);

  const ddd = DDDS[document.getElementById("dddInput").value];
  //console.log("ddd:", ddd)

  if (!tempo || !ddd || !plano) {
    return
  }

  let semPlano = Number(tempo * ddd.tarifa);
  document.getElementById("semPlano").value = "R$ " + semPlano.toFixed(2).toString().replace(".", ",")
  //console.log("valor sem plano", semPlano);

  let comPlano = Number((Math.max(tempo - plano.minutos, 0)) * ddd.tarifa);
  document.getElementById("comPlano").value = "R$ " + comPlano.toFixed(2).toString().replace(".", ",")
  //console.log("valor com plano", comPlano);

}

window.addEventListener("load", () => {
  setaDDDs()
  setaPlanos();
})
table tr td {
  padding: 5px;
}

table tr td.dir {
  padding-right: 15px;
  text-align: right;
  width: 120px;
}
<p>Calcular valor do desconto:</p>
<table cellpadding="0" cellspacing="0" border="0">


  <tr>
    <td>
      <select id="dddInput" class="form-select form-select-sm" aria-label=".form-select-sm example">
        <option selected>Selecione o DDD</option>
      </select>
    </td>
  </tr>

  <tr>
    <td>
      <select id="planosInput" class="form-select form-select-sm" aria-label=".form-select-sm example">
        <option selected>Selecione o Plano:</option>

      </select>
    </td>
  </tr>

  <tr>
    <td>
      <input type="number" id="tempo" placeholder="Tempo de chamada (min):" />
    </td>
  </tr>

  <tr>
    <td>
      <button onclick="calcValor()">Calcular</button>
    </td>
  </tr>

  <tr>
    <td class="dir">Com o Plano você vai pagar: </td>
    <td><input type="text" id="comPlano" disabled/></td>
  </tr>

  <tr>
    <td class="dir">Sem o Plano você vai pagar: </td>
    <td><input type="text" id="semPlano" disabled/></td>
  </tr>


</table>

1
  • Felipe Carriel, deu certo, muito obrigado, me ajudou muito!! 30/01/2021 às 17:42

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .