CODEWITHSUNDEEP
javascriptjqueryhtmlconverters
yolotheone
yolotheone

Reputation: 267

Celsius and Fahrenheit Converter- JavaScript

I want to make a webpage that has two text boxes, a Celsius and Fahrenheit box. In between them, there is a convert button which converts Celsius to Fahrenheit and Fahrenheit to Celsius. If there is letters in either box, I want to cancel the converting and an alert pop up saying "Only numbers please!" So far, I haven't figured out how to get the alert and when I type numbers in the Celsius box, it always says the number -18 in the same box. Fahrenheit is fine.

HTML:

<html>
<head>
  <title>Temparature Converter</title>
  <script type="text/javascript" src="tempconversion.js"></script>
</head>
<body>
  Celsius: <input id="c" onkeyup="convert('C')">
  <button type="button" id="convert" onclick="convertTemp()">Convert</button>
  Fahrenheit: <input id="f" onkeyup="convert('F')">
</body>
</html>

JavaScript:

function convertTemp(degree) {
  if (degree == "C") {
    F = document.getElementById("c").value * 9 / 5 + 32;
    document.getElementById("f").value = Math.round(F);
  } else {
    C = (document.getElementById("f").value -32) * 5 / 9;
    document.getElementById("c").value = Math.round(C);
  }
}

Note: I got some code from W3Schools so I think the onkeyup convert is a little funny. If possible, please notify me how it has to change as well as the JavaScript.

Upvotes: 3

Views: 19734

Answers (4)

victor alfonso manco gonzalez
victor alfonso manco gonzalez

Reputation: 1

class Temperature_conversation {

    constructor(celsius) {

        this.celsius= celsius;
        this.fahrenheit= 0;
        this.table_begin= -50.0;
        this.table_end= 50.0;
        this.table_step= 10.0;
        console.log('---------------------Conversion--------------------------');
        console.log('Celsius fahrenheit');
        for(this.celsius = this.table_begin; this.celsius <= this.table_end; this.celsius += this.table_step){
            this.fahrenheit = this.celsiusToFahrenhit(celsius);
        }


    }
    celsiusToFahrenhit(c){
        const minimun_celsius = -273.15;
        if (c < minimun_celsius) {
            throw 'O argumento es pequeno';

        }
         this.celsius = (9.0 / 5.0) * c+ 32;

        var res = [this.celsius, this.fahrenheit]
        console.table(res);
    }
}

Upvotes: 0

Shaffic Muza
Shaffic Muza

Reputation: 51

You can separate the functions which do the temperature conversion as follows i did somw changes in the code.

       <p>
    <label>Fahrenheit</label>
  <input id="outputFahrenheit" type="number" placeholder="Fahrenheit"
  oninput="temperatureConverterCelsius(this.value)"
  onchange="temperatureConverterCelsius(this.value)" value="">
</p>
<p>Celsius: </p>

<input id="outputCelsius" type="number" placeholder="Celsius" 
   oninput="temperatureConverterFahrenheit(this.value)" 
    onchange="temperatureConverterFahrenheit(this.value)" value="">
    </p>


    <script type=""text/javascript>
    function temperatureConverterCelsius(valNum) {
    valNum = parseFloat(valNum);
    document.getElementById("outputCelsius").value = (valNum-32) / 1.8;
    //document.getElementById("outputFahrenheit").value = (valNum*1.8)+32;

}
    </script>


  </body>
</html>

Upvotes: 0

Roko C. Buljan
Roko C. Buljan

Reputation: 206078

I personally hate Do-it Buttons so I'd go with a more dynamic solution: 

// Get the Input elements:
var $f = document.getElementById("f");
var $c = document.getElementById("c");

function FC_CF() {

  var temp;  // Will hold the temperature value
  var $targ; // Used to target the element we're not typing into:

  if (this.id === "c") { // If we're typing into #c...
    $targ = $f;          // use #f as target element
    temp = (this.value * 9 / 5) + 32;  // C2F
  } else {
    $targ = $c;
    temp = (this.value - 32) * 5 / 9;  // F2C
  }

  // Write the result "as we type" in the other ($targ) field:
  $targ.value = !isNaN(temp) ? parseFloat(temp.toFixed(1))  : "Err";
  // (Above:) temp is a num  ? return floated number,   else: "Show some error"

}

// Assign input listeners to trigger the above function:
$f.oninput = FC_CF; 
$c.oninput = FC_CF;
Celcius:    <input id="c">
Fahrenheit: <input id="f">

Upvotes: 1

Christopher Esbrandt
Christopher Esbrandt

Reputation: 1198

There is no need for the onkeyup attributes, since they original code from W3Schools was designed to instantly update values as they were entered.

I did modify the functionality to clear of original value, that way the conversion button can work both ways with a simple code.

Here's a quick JavaScript to do the job:

function convertTemp() {
 // Set the initial variables for c (Celsius) and f (Fahrenheit)
 var c = document.getElementById('c'), f = document.getElementById('f');
 // Test if there is a value for Celsius
 if(c.value != '') {
  // Set the value for Fahrenheit
  f.value = Math.round(c.value * 9 / 5 + 32);
  // Clear the value for Celsius
  c.value = '';
 // If there isn't a value for Celsius
 } else  {
  // Set the value for Celsius
  c.value = Math.round((f.value - 32) * 5 / 9);
  // Clear the value for Fahrenheit
  f.value = '';
 }
}

And its accompanying HTML:

Celcius:<input id="c">&nbsp;&nbsp;&nbsp;
Fahrenheit:<input id="f">&nbsp;&nbsp;&nbsp;
<button type="button" id="convert" onclick="convertTemp()">Convert</button>

It can be tested at: http://jsfiddle.net/bhz6uz54/

Something to remember about simple code, like this, there is nothing to verify the supplied values are acceptable. A little regex can act as validation, but how it would be implemented depends on how you want to flag the problem.

Upvotes: 3

Related Questions