PHP with java script and css

Asked

Viewed 578 times

-4

Develop an application for Conversion of Measures. The application may convert the following measures:

a) Length: kilometre, metre and centimetre.

b) Mass: kilogram and gram.

c) Temperature: Celsius and Fahrenheit.

Initially, the user must inform the desired conversion type: Length, Mass or Temperature. Then specify the unit of current measure, the value that will be converted and the unit of measure desired. For example:

a) Type of conversion: length

b) Current unit: kilometer

c) Value: 10

d) Desired unit: metre

The application should display on the screen the result of 10,000 m.

What I’ve done so far:

var listaTpConvVal = new Array();
var listaTpConvText = new Array();

listaTpConvVal["N"] = ["Selecione uma Unidade"];
listaTpConvVal["C"] = ["Cm", "M", "Km"];
listaTpConvVal["M"] = ["G", "Kg"];
listaTpConvVal["T"] = ["C", "F"];

listaTpConvText["N"] = ["Selecione uma Unidade"];
listaTpConvText["C"] = ["Centímetros", "Metros", "Quilômetros"];
listaTpConvText["M"] = ["Gramas", "Quilogramas"];
listaTpConvText["T"] = ["Celcius", "Fahrenheite"];

function mudaTipoConversao(selectObj) {
  document.getElementById('valorAtual').value = '';
  document.getElementById('valorConvertido').value = '';

  var lIndice = selectObj.selectedIndex; // Índice da opção selecionada
  var lValor = selectObj.options[lIndice].value; // Valor da opção selecionada
  var tcUnidadeAtual = document.getElementById("unidadeAtual"); // pega a unidade da opção selecionada
  var tcUnidadeDesejada = document.getElementById("unidadeDesejada"); // pega a unidade da opção selecionada

  while (tcUnidadeAtual.options.length > 0) {
    tcUnidadeAtual.remove(0); // Limpa as opções da combobox
    tcUnidadeDesejada.remove(0); // Limpa as opções da combobox
  }

  var newOptAtual; // Cria novas opções
  var newOptDesejada; // Cria novas opções

  for (var i = 0; i < listaTpConvVal[lValor].length; i++) {

    newOptAtual = document.createElement("option");
    newOptAtual.value = listaTpConvVal[lValor][i]; // Seta o valor
    newOptAtual.text = listaTpConvText[lValor][i]; // Seta o valor e o Texto

    newOptDesejada = document.createElement("option");
    newOptDesejada.value = listaTpConvVal[lValor][i]; // Seta o valor
    newOptDesejada.text = listaTpConvText[lValor][i]; // Seta o valor e o Texto

    try {
      tcUnidadeAtual.add(newOptAtual); // Insere uma nova opção
      tcUnidadeDesejada.add(newOptDesejada); // Insere uma nova opção
    } catch (e) {
      tcUnidadeAtual.appendChild(newOptAtual);
      tcUnidadeDesejada.appendChild(newOptDesejada);
    }
  }

  function novaConversao() {
    document.getElementById('tipoConversao').value = 'N';
    document.getElementById('valorAtual').value = '';
    document.getElementById('valorConvertido').value = '';
    mudaTipoConversao(document.getElementById('tipoConversao'));
  }

  function novoCalcImc() {
    document.getElementById('peso').value = '';
    document.getElementById('altura').value = '';
    document.getElementById('resultado').value = '';
  }
<!--Content-->
<div id="content">
  <!--Logo-->
  <div id="logo">
  </div>
  <!--Fim Logo-->

  <!--Unidade de Medidas-->
  <div id="unidade_medidas">
    <form name="calc" method="get" enctype="multipart/form-data" action="resultado.php" class="form">
      <h1>Conversão de Unidades</h1>
      <label for="unidade">Tipo de Unidade</label>

      <select id="continent" onchange="mudaTipoConversao(this):">
               <option value="N">Selecione uma Unidade</option>
               <option value="C">Comprimento</option>
               <option value="M">Massa</option>
               <option value="T">Temperatura</option>
               </select>

      <br><br><br>

      <label>Unidade Atual</label>
      <select id="unidadeAtual">
        <option value="0">Unidade Atual</option>
      </select>

      <label>Unidade Desejada</label>
      <select id="unidadeDesejada">
        <option value="0">Unidade Desejada</option>
      </select>


      <html>

      <head>


        <br><br>
        <br />
        <label>
                <span class="span">Insira o Valor</span>
                <br/>
                <input type="text" name="valor" class="in"/>
                </label>

        <input type="submit" name="envia" value="OK!" class="btn">

        </fieldset>

    </form>
    <!--Fim Formulario-->
  </div>
  <!--Fim Unidade de Medidas-->
</div>
<!--Fim Content-->

I’m lost at calling this javascript function.

php javascript html css

  • ready as I do the code php or html to call this function?

  • It seems that you are missing things there, have keys closing too

  • It is because it has these two functions but the IMC I have now managed to lack that of converting the units

  • After the catch has 3 lock keys, but only were opened 2, all right?

  • Post your HTML if you have any, and a tip, why use the server for this? You could do everything in js even

  • yes a for key and the other 2 of catch, as it would be if it were all in js?

  • Your code doesn’t need anything from PHP at any point. The html and css structure will depend on what you want to present visually, we cannot define this.

  • 2

    You are asking for an entire solution. Please define the questions as precisely as possible, according to the rules.

  • @Rainerpedrozo Asking others to do your exercise is not right. Instead, specify your doubt. I mean, tell me which part you’re not doing.

  • sent my HTML

Show 5 more comments

1 answer

0


I’d do it somehow:

var conversao = {
  "Temperatura": ["Celsius", "Fahrenheit"],
  "Peso": ["Quilograma", "Grama"],
  "Comprimento": ["Quilômetro", "Metro", "Centímetro"]
};
var de = "";
var para = "";
var init = function() {
  var sisteminha = "Escolha o tipo: <select onchange='mudarTipo(this.value)'><option>------------------</option>"
  for (var prop in conversao) {
    sisteminha += "<option value='" + prop + "'>" + prop + "</option>";
  }
  sisteminha += "</select>";
  document.getElementById("sisteminha").innerHTML = sisteminha;
}();

var mudarTipo = function(valor) {
  var sisteminha = "Converter de: <select onchange='mudarTipo2(\"" + valor + "\", this.value)'><option>------------------</option>";
  for (var prop in conversao[valor]) {
    sisteminha += "<option value='" + conversao[valor][prop] + "'>" + conversao[valor][prop] + "</option>";
  }
  sisteminha += "</select>";
  document.getElementById("sisteminha").innerHTML = sisteminha;
}
var mudarTipo2 = function(valor, valor2) {
  de = valor2;
  conversao[valor] = conversao[valor].filter(item => item !== valor2)
  var sisteminha = "Converter para: <select onchange='especificarValor(this.value)'><option>------------------</option>"
  for (var prop in conversao[valor]) {
    sisteminha += "<option value='" + conversao[valor][prop] + "'>" + conversao[valor][prop] + "</option>";
  }
  sisteminha += "</select>";
  document.getElementById("sisteminha").innerHTML = sisteminha;
}
var especificarValor = function(valor) {
  para = valor;
  console.log(de, "->", para);
  var sisteminha = "Converter de "+de+" para "+para+"<br/><input type='text' onblur='valorDigitado(this.value)'>";
  document.getElementById("sisteminha").innerHTML = sisteminha;
}
var valorDigitado = function(valor) {
  if(de == "Quilômetro"){
    if(para == "Metro"){
      func1(valor);
    }else if(para == "Centímetro"){
      func2(valor);
    }else{
      alert("erro");
    }
  }
  if(de == "Metro"){
    if(para == "Quilômetro"){
      func3(valor);
    }else if(para == "Centímetro"){
      func4(valor);
    }else{
      alert("erro");
    }
  }
  if(de == "Centímetro"){
    if(para == "Quilômetro"){
      func5(valor);
    }else if(para == "Metro"){
      func6(valor);
    }
  }
  if(de == "Quilograma"){
    if(para == "Grama"){
      func7(valor);
    }else{
      alert("erro");
    }
  }
  if(de == "Grama"){
    if(para == "Quilograma"){
      func8(valor);
    }else{
      alert("erro");
    }
  }
  if(de == "Celsius"){
    if(para == "Fahrenheit"){
      func9(valor);
    }else{
      alert("erro");
    }
  }
  if(de == "Fahrenheit"){
    if(para == "Celsius"){
      func10(valor);
    }else{
      alert("erro");
    }
  }
}
var func1 = function(valor){
  // Calculo de conversão
  valor*=1000;
  document.getElementById("sisteminha").innerHTML = "O valor convertido de " + de + " para "+ para +" é de " + valor + "<br/><button onclick='location.reload()'>Reiniciar</button>";
}
var func2 = function(valor){
  // Calculo de conversão
  valor*=1000000;
  document.getElementById("sisteminha").innerHTML = "O valor convertido de " + de + " para "+ para +" é de " + valor + "<br/><button onclick='location.reload()'>Reiniciar</button>";
}
var func3 = function(valor){
  valor/=1000;
  // Calculo de conversão
  document.getElementById("sisteminha").innerHTML = "O valor convertido de " + de + " para "+ para +" é de " + valor + "<br/><button onclick='location.reload()'>Reiniciar</button>";
}
var func4 = function(valor){
  valor*=1000;
  // Calculo de conversão
  document.getElementById("sisteminha").innerHTML = "O valor convertido de " + de + " para "+ para +" é de " + valor + "<br/><button onclick='location.reload()'>Reiniciar</button>";
}
var func5 = function(valor){
  // Calculo de conversão
  document.getElementById("sisteminha").innerHTML = "O valor convertido de " + de + " para "+ para +" é de " + valor + "<br/><button onclick='location.reload()'>Reiniciar</button>";
}
var func6 = function(valor){
  // Calculo de conversão
  document.getElementById("sisteminha").innerHTML = "O valor convertido de " + de + " para "+ para +" é de " + valor + "<br/><button onclick='location.reload()'>Reiniciar</button>";
}
var func7 = function(valor){
  // Calculo de conversão
  document.getElementById("sisteminha").innerHTML = "O valor convertido de " + de + " para "+ para +" é de " + valor + "<br/><button onclick='location.reload()'>Reiniciar</button>";
}
var func8 = function(valor){
  // Calculo de conversão
  document.getElementById("sisteminha").innerHTML = "O valor convertido de " + de + " para "+ para +" é de " + valor + "<br/><button onclick='location.reload()'>Reiniciar</button>";
}
var func9 = function(valor){
  // Calculo de conversão
  document.getElementById("sisteminha").innerHTML = "O valor convertido de " + de + " para "+ para +" é de " + valor + "<br/><button onclick='location.reload()'>Reiniciar</button>";
  
}
var func10 = function(valor){
  // Calculo de conversão
  document.getElementById("sisteminha").innerHTML = "O valor convertido de " + de + " para "+ para +" é de " + valor + "<br/><button onclick='location.reload()'>Reiniciar</button>";
}
<div id="sisteminha"></div>

I believe that this code can be greatly improved, but it is a possible path, there are several, and several micro-improvements that can be made in my code.

Then when I have more time I’ll explain the code.

  • How do I call this java function in my Html note I’m beginner?

  • No need to create a function like var x = function() {/* código aqui */}() she calls herself.

  • could , give me an example to call the calculation I am not able to calculate?

  • What do you mean? Call what?

  • for example where I calculate from func 1 would be value=value*1000; only that the account does not return the same value typed

  • I updated the answer with examples in the... hint valor=valor*1000; is the same thing as valor*=1000;, I believe your problem lies in the flow, checks on the function valorDigitado which condition calls which function

  • ook thank you so much!

  • I will bother you again only rs if I go to do in the part of Celsius for example that would be (value * = 32) / 1.8; as would be ?

  • Got a lot Thanks Even you’re the guy.

Show 4 more comments

Browser other questions tagged php javascript html css

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