JSFiddle - React, Tailwind, and code Playground
HTML
<div class="wrap">
<h1 class="heading">
Internet speed converter
</h1>
<h3 class="subheading">Megabyte !== Megabit</h3>
<form class="form" name="units" method="post" id="form">
<div class="inputs">
<input type="text" name="from" id="from">
<select name="fromWhat" id="fromWhat">
<option>Convert from</option>
<option value="1024">Kilobits</option>
<option value="1048576">Megabits</option>
<option value="1073741824">Gigabits</option>
</select>
<br>
<input type="text" name="to" id="to" readonly="readonly">
<select id="toWhat" name="toWhat">
<option>Convert to</option>
<option value="8192">Kilobytes</option>
<option value="8388608">Megabytes</option>
<option value="8589934592">Gigabytes</option>
</select>
</div>
<br>
<input class="bttn" id="calc" type="button" value="Convert">
</form>
</div>
JavaScript
var converter = function() {
var from = document.units.elements.from,
fromWhat = document.units.elements.fromWhat,
to = document.units.elements.to,
toWhat = document.units.elements.toWhat;
if (fromWhat.value === "Convert from" && toWhat.value === "Convert to") {
alert("Please choose what you want to convert, and what you want it be converted to.");
} else if (fromWhat.value === "Convert from") {
alert("Please choose what you want to convert.");
} else if (toWhat.value === "Convert to") {
alert("Please choose what you want to convert to.");
} else if ((isNaN(from.value) === true) || (isNaN(to.value) === true) || (from === null) || (from.value === undefined)) {
alert("Please enter a number.");
} else {
to.value = from.value*fromWhat.value/toWhat.value;
}
return false;
};
$("#calc").click(converter);