Internet Explorer
Internet Explorer is not supported. Please upgrade to a more modern browser.
Open4Discuss
Technology
A Basic Units Convention by html code
Started by Hemanth
This only a basic code
<html>
<body>
<style>
.w3-row-padding {
font-size:20px;
font-weight:bold;
text-align: center;
color:white;
}
h2 {
color: aliceblue;
}
p {
color: aliceblue;
}
body {
background-color: black;
}
</style>
<div class="w3-row-padding" style="margin:0 16px">
<p style="margin-left:8px;margin-bottom:4px">Type a value in any of the fields to convert between weight measurements:</p>
<div class="w3-half w3-margin-top">
<label>Pounds</label>
<input id="inputPounds" class="w3-input w3-border" type="number" placeholder="Pounds" oninput="weightConverter(this.id,this.value)" onchange="weightConverter(this.id,this.value)">
</div>
<div class="w3-half w3-margin-top">
<label>Kilograms</label>
<input id="inputKilograms" class="w3-input w3-border" type="number" placeholder="Kilograms" oninput="weightConverter(this.id,this.value)" onchange="weightConverter(this.id,this.value)">
</div>
<div class="w3-half w3-margin-top">
<label>Ounces</label>
<input id="inputOunces" class="w3-input w3-border" type="number" placeholder="Ounces" oninput="weightConverter(this.id,this.value)" onchange="weightConverter(this.id,this.value)">
</div>
<div class="w3-half w3-margin-top">
<label>Grams</label>
<input id="inputGrams" class="w3-input w3-border" type="number" placeholder="Grams" oninput="weightConverter(this.id,this.value)" onchange="weightConverter(this.id,this.value)">
</div>
<div class="w3-half w3-margin-top">
<label>Stones</label>
<input id="inputStones" class="w3-input w3-border" type="number" placeholder="Stones" oninput="weightConverter(this.id,this.value)" onchange="weightConverter(this.id,this.value)">
</div>
</div>
<script>
function weightConverter(source,valNum) {
valNum = parseFloat(valNum);
var inputPounds = document.getElementById("inputPounds");
var inputKilograms = document.getElementById("inputKilograms");
var inputOunces = document.getElementById("inputOunces");
var inputGrams = document.getElementById("inputGrams");
var inputStones = document.getElementById("inputStones");
if (source=="inputPounds") {
inputKilograms.value=(valNum/2.2046).toFixed(2);
inputOunces.value=(valNum*16).toFixed(2);
inputGrams.value=(valNum/0.0022046).toFixed();
inputStones.value=(valNum*0.071429).toFixed(3);
}
if (source=="inputKilograms") {
inputPounds.value=(valNum*2.2046).toFixed(2);
inputOunces.value=(valNum*35.274).toFixed(2);
inputGrams.value=(valNum*1000).toFixed();
inputStones.value=(valNum*0.1574).toFixed(3);
}
if (source=="inputOunces") {
inputPounds.value=(valNum*0.062500).toFixed(4);
inputKilograms.value=(valNum/35.274).toFixed(4);
inputGrams.value=(valNum/0.035274).toFixed(1);
inputStones.value=(valNum*0.0044643).toFixed(4);
}
if (source=="inputGrams") {
inputPounds.value=(valNum*0.0022046).toFixed(4);
inputKilograms.value=(valNum/1000).toFixed(4);
inputOunces.value=(valNum*0.035274).toFixed(3);
inputStones.value=(valNum*0.00015747).toFixed(5);
}
if (source=="inputStones") {
inputPounds.value=(valNum*14).toFixed(1);
inputKilograms.value=(valNum/0.15747).toFixed(1);
inputOunces.value=(valNum*224).toFixed();
inputGrams.value=(valNum/0.00015747).toFixed();
}
}
</script>
<div class="w3-container ws-green">
</div>
<div class="w3-row-padding" style="margin:0 16px">
<p style="margin-left:8px;margin-bottom:4px;">Type a value in any of the fields to convert between temperature
measurements:</p>
<div class="w3-half w3-margin-top">
<label>Fahrenheit</label>
<input id="inputFahrenheit" class="w3-input w3-border" type="number" min="-459.66999999999996" placeholder="Fahrenheit" oninput="temperatureConverter(this.id,this.value)" onchange="temperatureConverter(this.id,this.value)">
</div>
<div class="w3-half w3-margin-top">
<label>Celsius</label>
<input id="inputCelsius" class="w3-input w3-border" type="number" min="-273.15" placeholder="Celsius" oninput="temperatureConverter(this.id,this.value)" onchange="temperatureConverter(this.id,this.value)">
</div>
<div class="w3-half w3-margin-top">
<label>Kelvin</label>
<input id="inputKelvin" class="w3-input w3-border" type="number" min="0" placeholder="Kelvin" oninput="temperatureConverter(this.id,this.value)" onchange="temperatureConverter(this.id,this.value)">
</div>
</div>
<script>
function temperatureConverter(source,valNum) {
valNum = parseFloat(valNum);
var inputFahrenheit = document.getElementById("inputFahrenheit");
var inputCelsius = document.getElementById("inputCelsius");
var inputKelvin = document.getElementById("inputKelvin");
if (source=="inputFahrenheit") {
inputCelsius.value=((valNum-32)/1.8).toFixed(2);
inputKelvin.value=(((valNum-32)/1.8)+273.15).toFixed(2);
}
if (source=="inputCelsius") {
inputFahrenheit.value=((valNum*1.8)+32).toFixed(2);
inputKelvin.value=((valNum)+273.15).toFixed(2);
}
if (source=="inputKelvin") {
inputFahrenheit.value=(((valNum-273.15)*1.8)+32).toFixed(2);
inputCelsius.value=((valNum)-273.15).toFixed(2);
}
}
</script>
<div class="w3-row-padding" style="margin:0 16px">
<p style="margin-left:8px;margin-bottom:4px;">Type a value in any of the fields to convert between speed measurements:</p>
<div class="w3-half w3-margin-top">
<label>mile per hour (MPH)</label>
<input id="inputMPH" class="w3-input w3-border" type="number" placeholder="MPH" oninput="speedConverter(this.id,this.value)" onchange="speedConverter(this.id,this.value)">
</div>
<div class="w3-half w3-margin-top">
<label>kilometers pre hour(KPH)</label>
<input id="inputKPH" class="w3-input w3-border" type="number" placeholder="KPH" oninput="speedConverter(this.id,this.value)" onchange="speedConverter(this.id,this.value)">
</div>
<div class="w3-half w3-margin-top">
<label>Knots</label>
<input id="inputKnots" class="w3-input w3-border" type="number" placeholder="Knots" oninput="speedConverter(this.id,this.value)" onchange="speedConverter(this.id,this.value)">
</div>
<div class="w3-half w3-margin-top">
<label>Mach</label>
<input id="inputMach" class="w3-input w3-border" type="number" placeholder="Mach" oninput="speedConverter(this.id,this.value)" onchange="speedConverter(this.id,this.value)">
</div>
</div>
<script>
function speedConverter(source,valNum) {
valNum = parseFloat(valNum);
var inputMPH = document.getElementById("inputMPH");
var inputKPH = document.getElementById("inputKPH");
var inputKnots = document.getElementById("inputKnots");
var inputMach = document.getElementById("inputMach");
if (source=="inputMPH") {
inputKPH.value=(valNum*1.609344).toFixed(2);
inputKnots.value=(valNum/1.150779).toFixed(2);
inputMach.value=(valNum/761.207).toFixed(4);
}
if (source=="inputKPH") {
inputMPH.value=(valNum/1.609344).toFixed(2);
inputKnots.value=(valNum/1.852).toFixed(2);
inputMach.value=(valNum/1225.044).toFixed(5);
}
if (source=="inputKnots") {
inputMPH.value=(valNum*1.150779).toFixed(2);
inputKPH.value=(valNum*1.852).toFixed(2);
inputMach.value=(valNum/661.4708).toFixed(4);
}
if (source=="inputMach") {
inputMPH.value=(valNum*761.207).toFixed();
inputKPH.value=(valNum*1225.044).toFixed();
inputKnots.value=(valNum*661.4708).toFixed();
}
}
</script>
<div class="w3-row-padding" style="margin:0 16px">
<p style="margin-left:8px;margin-bottom:4px;">Type a value in any of the fields to convert between Length measurements:</p>
<div class="w3-half w3-margin-top">
<label>Feet</label>
<input id="inputFeet" class="w3-input w3-border" type="number" placeholder="Feet" oninput="lengthConverter(this.id,this.value)" onchange="lengthConverter(this.id,this.value)">
</div>
<div class="w3-half w3-margin-top">
<label>Meters</label>
<input id="inputMeters" class="w3-input w3-border" type="number" placeholder="Meters" oninput="lengthConverter(this.id,this.value)" onchange="lengthConverter(this.id,this.value)">
</div>
<div class="w3-half w3-margin-top">
<label>Inches</label>
<input id="inputInches" class="w3-input w3-border" type="number" placeholder="Inches" oninput="lengthConverter(this.id,this.value)" onchange="lengthConverter(this.id,this.value)">
</div>
<div class="w3-half w3-margin-top">
<label>cm</label>
<input id="inputcm" class="w3-input w3-border" type="number" placeholder="cm" oninput="lengthConverter(this.id,this.value)" onchange="lengthConverter(this.id,this.value)">
</div>
<div class="w3-half w3-margin-top">
<label>Yards</label>
<input id="inputYards" class="w3-input w3-border" type="number" placeholder="Yards" oninput="lengthConverter(this.id,this.value)" onchange="lengthConverter(this.id,this.value)">
</div>
<div class="w3-half w3-margin-top">
<label>Kilometers</label>
<input id="inputKilometers" class="w3-input w3-border" type="number" placeholder="Kilometers" oninput="lengthConverter(this.id,this.value)" onchange="lengthConverter(this.id,this.value)">
</div>
<div class="w3-half w3-margin-top">
<label>Miles</label>
<input id="inputMiles" class="w3-input w3-border" type="number" placeholder="Miles" oninput="lengthConverter(this.id,this.value)" onchange="lengthConverter(this.id,this.value)">
</div>
</div>
<script>
function lengthConverter(source,valNum) {
valNum = parseFloat(valNum);
var inputFeet = document.getElementById("inputFeet");
var inputMeters = document.getElementById("inputMeters");
var inputInches = document.getElementById("inputInches");
var inputcm = document.getElementById("inputcm");
var inputYards = document.getElementById("inputYards");
var inputKilometers = document.getElementById("inputKilometers");
var inputMiles = document.getElementById("inputMiles");
if (source=="inputFeet") {
inputMeters.value=(valNum/3.2808).toFixed(2);
inputInches.value=(valNum*12).toFixed(2);
inputcm.value=(valNum/0.032808).toFixed();
inputYards.value=(valNum*0.33333).toFixed(2);
inputKilometers.value=(valNum/3280.8).toFixed(5);
inputMiles.value=(valNum*0.00018939).toFixed(5);
}
if (source=="inputMeters") {
inputFeet.value=(valNum*3.2808).toFixed(2);
inputInches.value=(valNum*39.370).toFixed(2);
inputcm.value=(valNum/0.01).toFixed();
inputYards.value=(valNum*1.0936).toFixed(2);
inputKilometers.value=(valNum/1000).toFixed(5);
inputMiles.value=(valNum*0.00062137).toFixed(5);
}
if (source=="inputInches") {
inputFeet.value=(valNum*0.083333).toFixed(3);
inputMeters.value=(valNum/39.370).toFixed(3);
inputcm.value=(valNum/0.39370).toFixed(2);
inputYards.value=(valNum*0.027778).toFixed(3);
inputKilometers.value=(valNum/39370).toFixed(6);
inputMiles.value=(valNum*0.000015783).toFixed(6);
}
if (source=="inputcm") {
inputFeet.value=(valNum*0.032808).toFixed(3);
inputMeters.value=(valNum/100).toFixed(3);
inputInches.value=(valNum*0.39370).toFixed(2);
inputYards.value=(valNum*0.010936).toFixed(3);
inputKilometers.value=(valNum/100000).toFixed(6);
inputMiles.value=(valNum*0.0000062137).toFixed(6);
}
if (source=="inputYards") {
inputFeet.value=(valNum*3).toFixed();
inputMeters.value=(valNum/1.0936).toFixed(2);
inputInches.value=(valNum*36).toFixed();
inputcm.value=(valNum/0.010936).toFixed();
inputKilometers.value=(valNum/1093.6).toFixed(5);
inputMiles.value=(valNum*0.00056818).toFixed(5);
}
if (source=="inputKilometers") {
inputFeet.value=(valNum*3280.8).toFixed();
inputMeters.value=(valNum*1000).toFixed();
inputInches.value=(valNum*39370).toFixed();
inputcm.value=(valNum*100000).toFixed();
inputYards.value=(valNum*1093.6).toFixed();
inputMiles.value=(valNum*0.62137).toFixed(2);
}
if (source=="inputMiles") {
inputFeet.value=(valNum*5280).toFixed();
inputMeters.value=(valNum/0.00062137).toFixed();
inputInches.value=(valNum*63360).toFixed();
inputcm.value=(valNum/0.0000062137).toFixed();
inputYards.value=(valNum*1760).toFixed();
inputKilometers.value=(valNum/0.62137).toFixed(2);
}
}
</script>
<p>This is made by Hemanth</p>
</body>
</html>
Reactions