You are currently viewing How to create a converter with HTML and JavaScript

How to create a converter with HTML and JavaScript

Hello Friends, In this article we will discuss How to create a converter with HTML and JavaScript. If you want to create a converter with HTML and JavaScript. Then you are in the right place.

Create a converter with HTML and JavaScript

Create a Temperature Converter

Create an input element that can change a value from one temperature measurement to another.

Convert from Fahrenheit to other Measurements

  • Convert from Fahrenheit to Celsius- ℃=(℉-32)/1.8
  • Convert from Fahrenheit to Kelvin- K=((℉-32)/1.8)+273.15

Convert from Celsius to other Measurements

  • Convert from Celsius to Fahrenheit- ℉=(℃*1.8)+32
  • Convert from Celsius to Kelvin- K=℃+273.15

Convert from Kelvin to other Measurements

  • Convert from Kelvin to Fahrenheit- ℉=((K-273.15)*1.8)+32
  • Convert from Kelvin to Celsius- ℃=K-273.15

Temperature converter with HTML and JavaScript

HTML:

<p>
<label>Fahrenheit</label>
<input id=”inputFahrenheit” type=”number” placeholder=”Fahrenheit”
oninput=”temperatureConverter(this.value)”
onchange=”temperatureConverter(this.value)”
>

</p>
<p>Celsius: <span id=”outputCelsius”></span></p>

JavaScript:

function temperatureConverter(valNum) {
valNum = parseFloat(valNum);
document.getElementById(“outputCelsius”).innerHTML = (valNum-32) / 1.8;
}

How to create a temperature converter with HTML and JavaScript

<!DOCTYPE html>
<html>
<title>Fahrenheit to Celcius Temperature Converter</title>
<body>

<h2>Temperature Converter</h2>
<p>Type a value in the Fahrenheit field to convert the value to Celsius:</p>

<p>
<label>Fahrenheit</label>
<input id=”inputFahrenheit” type=”number” placeholder=”Fahrenheit” oninput=”temperatureConverter(this.value)” onchange=”temperatureConverter(this.value)”>
</p>
<p>Celcius: <span id=”outputCelcius”></span></p>

<script>
function temperatureConverter(valNum) {
valNum = parseFloat(valNum);
document.getElementById(“outputCelcius”).innerHTML=(valNum-32)/1.8;
}
</script>

</body>
</html>

Create a converter with HTML and JavaScript

Create a Length converter

Create an input element that can change a value from one temperature measurement to another.

Convert from Miles to other Measurements

  • Convert from Miles to Feet- ft=mi*5280
  • Convert from Miles to Meters- m=mi/0.00062137
  • Convert from Miles to Inches- in=mi*63360
  • Convert from Miles to cm- cm=mi/0.0000062137
  • Convert from Miles to Yards- yd=mi*1760
  • Convert from Miles to Kilometers- km=mi/0.62137

Convert from Kilometers to other Measurements

  • Convert from Kilometers to Feet- ft=km*3280.8
  • Convert from Kilometers to Meters- m=km*1000
  • Convert from Kilometers to Inches- in=km*39370
  • Convert from Kilometers to cm- cm=km*100000
  • Convert from Kilometers to Yards- mi=km*1093.6
  • Convert from Kilometers to Miles- mi=km*0.62137

Convert from Yards to other Measurements

  • Convert from Yards to Feet- ft=yd*3
  • Convert from Yards to Meters- m=yd/1.0936
  • Convert from Yards to Inches- in=yd*36
  • Convert from Yards to cm- cm=yd/0.010936
  • Convert from Yards to Kilometers- km=yd/1093.6
  • Convert from Yards to Miles- mi=yd*0.00056818

Convert from Meters to other Measurements

  • Convert from Meters to Feet- ft=m*3.2808
  • Convert from Meters to Inches- in=m*39.370
  • Convert from Meters to cm- cm=m/0.01
  • Convert from Meters to Yards- yd=m*1.0936
  • Convert from Meters to Kilometers- km=m/1000
  • Convert from Meters to Miles- mi=m*0.00062137

Convert from Feet to other Measurements

  • Convert from Feet to Meters- m=ft/3.2808
  • Convert from Feet to Inches- in=ft*12
  • Convert from Feet to cm- cm=ft/0.032808
  • Convert from Feet to Yards- yd=ft*0.33333
  • Convert from Feet to Kilometers- km=ft/3280.8
  • Convert from Feet to Miles- mi=ft*0.00018939

Convert from Inches to other Measurements

  • Convert from Inches to Feet- ft=in*0.083333
  • Convert from Inches to Meters- m=in/39.370
  • Convert from Inches to cm- cm=in/0.39370
  • Convert from Inches to Yards- yd=in*0.027778
  • Convert from Inches to Kilometers- km=in/39370
  • Convert from Inches to Miles- mi=in*0.000015783Convert from cm to other Measurements
  • Convert from cm to Feet- ft=cm*0.032808
  • Convert from cm to Meters- m=cm/100
  • Convert from cm to Inches- in=cm*0.39370
  • Convert from cm to Yards- yd=cm*0.010936
  • Convert from cm to Kilometers- km=cm/100000
  • Convert from cm to Miles- mi=cm*0.0000062137

Length converter with HTML and JavaScript

HTML:

<p>
<label>Feet</label>
<input id=”inputFeet” type=”number” placeholder=”Feet”
oninput=”lengthConverter(this.value)” onchange=”lengthConverter(this.value)”>
</p>
<p>cm: <span id=”outputMeters”></span></p>

JavaScript:

function lengthConverter(valNum) {
document.getElementById(“outputMeters”).innerHTML = valNum / 0.0022046;
}

How to create a Length converter with HTML and JavaScript

<!DOCTYPE html>
<html>
<title>Feet to Meters Length Converter</title>
<body>

<h2>Length Converter</h2>
<p>Type a value in the Feet field to convert the value to Meters:</p>

<p>
<label>Feet</label>
<input id=”inputFeet” type=”number” placeholder=”Feet” oninput=”LengthConverter(this.value)” onchange=”LengthConverter(this.value)”>
</p>
<p>Meters: <span id=”outputMeters”></span></p>

<script>
function LengthConverter(valNum) {
document.getElementById(“outputMeters”).innerHTML=valNum/3.2808;
}
</script>
</body>
</html>

Create a converter with HTML and JavaScript

Create a Weight Converter

Create an input element that can convert a value from one weight measurement to another.

Convert Kilograms to other measurements

  • Convert from Kilograms to Pounds- lb=kg*2.2046
  • Convert from Kilograms to Ounces- oz=kg*35.274
  • Convert from Kilograms to Grams- g=kg*1000
  • Convert from Kilograms to Stones- st=kg*0.1574

Convert from Gram to Other Measurements

  • Convert from Grams to Pounds- lb=g*0.0022046
  • Convert from Grams to Kilograms- kg=g/1000
  • Convert from Grams to Ounces- oz=g*0.035274
  • Convert from Grams to Stones- st=g*0.00015747

Convert from pounds to other measurements

  • Convert from Pounds to Kilograms- kg=lb/2.2046
  • Convert from Pounds to Ounces- oz=lb*16
  • Convert from Pounds to Grams- g=lb/0.0022046
  • Convert from Pounds to Stones- st=lb*0.071429

Convert Ounces to Other Measurements

  • Convert from Ounces to Pounds- lb=oz*0.0625
  • Convert from Ounces to Kilograms- kg=oz/35.274
  • Convert from Ounces to Grams- g=oz/0.035274
  • Convert from Ounces to Stones- st=oz*0.0044643

Change from stone to other measurements

  • Convert from Stones to Pounds- lb=st*14
  • Convert from Stones to Kilograms- kg=st/0.15747
  • Convert from Stones to Ounces- oz=st*224
  • Convert from Stones to Grams- g=st/0.00015747

How to create a weight converter with HTML and JavaScript

HTML:

<p>
<label>Pounds</label>
<input id=”inputPounds” type=”number” placeholder=”Pounds”
oninput=”weightConverter(this.value)” onchange=”weightConverter(this.value)”
>

</p>
<p>Grams: <span id=”outputGrams”></span></p>

JavaScript:

function weightConverter(valNum) {
document.getElementById(“outputGrams”).innerHTML = valNum / 0.0022046;
}

Weight converter with HTML and JavaScript

<!DOCTYPE html>
<html>
<title>Pounds to Kilograms Weight Converter</title>
<body>

<h2>Weight Converter</h2>
<p>Type a value in the Pounds field to convert the value to Kilograms:</p>

<p>
<label>Pounds</label>
<input id=”inputPounds” type=”number” placeholder=”Pounds” oninput=”weightConverter(this.value)” onchange=”weightConverter(this.value)”>
</p>
<p>Kilograms: <span id=”outputKilograms”></span></p>

<script>
function weightConverter(valNum) {
document.getElementById(“outputKilograms”).innerHTML=valNum/2.2046;
}
</script>

</body>
</html>

Read More:

 

Satendra Kumar Rawat

I am a professional web designer, web developer, blogger, digital service provider, video creator, content creator. I have 4+ years of experience in this field, I love technology, and also share knowledge on social platforms. I have 10+ different blogs then, and currently have 5+ sites running. Our most popular websites are skrcreations.com and InfinityGyan.in.

Leave a Reply