Calculate Telefonic rate per minute with Javascript

Asked

Viewed 95 times

0

Hello I’m a beginner in programming and I need to set up a page that has values of a phone promotion. Up to x minutes is free, after that starts charging per additional call minute + ddd price percentage.

example:

plan 1 = 10 minutes free connection (there are 3 different plans with different times)

ddd of origin and destination 1 : 021-022 = $2.00 per minute (each different ddd has a different price)

Time: One chooses how much time he wants to speak, if it is less than the time of the plan, the value is zero. But if you pass the time of the chosen plan, it charges the price of the ddd chosen per additional call minute + 10% of the ddd value.

So the premise is that the person can choose the plan + ddd + call time and this will generate a value of how much the person will pay for the additional minutes. I’ve done the html and js files, but it doesn’t seem right the way I did.

my index.html code below:

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>

From now on I appreciate any help.

javascript html5
  • 2

    And what would be your doubt?

1 answer

0


Maybe it’s better to have a leaner html and leave the information in the script.

I tried to help.

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>

  • Felipe Carriel, it worked, thank you very much, helped me a lot!!

Browser other questions tagged javascript html5

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