محول المسافات بلغة html و java script

السلام عليكم ورحمة الله وبركاته.

طبتم وطابت أوقاتكم.

ضمن سلسلة مشاركات بدأت بها مؤخرًا لأضع لكم بعض التطبيقات المفيدة التي يمكننا كتابتها بلغة html و java script أقدم لكم هذا الكود المكتوب أيضًا باللغتين المشار إليهما يقوم بتحويل ما بين وحدات قياس المسافة المختلفة.

سأضع لكم الكود مع بعض التعليقات التوضيحية السريعة.

لكن في البداية لنرى النتيجة التي سنحصل عليها بعد كتابة الكود بعدها سأترك لكم حرية التمعن في الكود ومحاولة فهمه.

محول المسافات

التحويل من: سانتي متر متر كيلو متر ميل قدم	التحويل إلى: سانتي متر متر كيلو متر ميل قدم
القيمة:
الناتج:

الكود

<font size=18>
<!-- تعيين حجم الخط -->
<h1><b> <a href="#"> محول المسافات </a></b></h1>
<!-- العنوان الظاهر في الأعلى -->
<br />

<table border=0>
<tr width=100%>
<td width=50% align="center">
<label> التحويل من: <select onchange="convertor()" id="m1">
<option> سانتي متر </option>
<option> متر </option>
<option> كيلو متر </option>
<option selected> ميل </option>
<option> قدم </option>
</select></label>
</td>
<td width=50% align="center">
<label> التحويل إلى: <select onchange="convertor()" id="m2">
<option> سانتي متر </option>
<option> متر </option>
<option selected> كيلو متر </option>
<option> ميل </option>
<option> قدم </option>
</select></label>
</td>
</tr>
<tr>
<td width=100% align="center">
<label>القيمة: <input type="text" id="num" onchange="convertor()"></label><br />
</td>
</tr>
<tr>
<td width=100% align="center">
<label>الناتج: <input type="text" id="result" readonly></label><br />
</td>
</tr>
</table>
<!-- توزيع العناصر بطريقة الصف والعمود , هذه العناصر تمثل الصناديق ومربعات التحرير -->
</font>
<script type-text="javascript">
var units = {cm_km:function(num) {
return num/100000
},cm_m:function(num) {
return num/100
},cm_mi:function(num) {
return (num/100000)*0.6214
},cm_f:function(num) {
return num/30.48
},m_cm:function(num) {
return num*100
},m_km:function(num) {
return num/1000
},m_mi:function(num) {
return (num/1000)*0.6214
},m_f:function(num) {
return (num*100)/30.48
},km_cm:function(num) {
return num*100000
},km_m:function(num) {
return num*1000
},km_mi:function(num) {
return num*0.6214
},km_f:function(num) {
return (num*100000)/30.48
},mi_cm:function(num) {
return (num*1.6214)*100000
},mi_m:function(num) {
return (num*1.6214)*1000
},mi_km:function(num) {
return num*1.6214
},mi_f:function(num) {
return ((num*1.6214)*100000)/30.48
},f_cm:function(num) {
return num*30.48
},f_m:function(num) {
return (num*30.48)/100
},f_km:function(num) {
return (num*30.48)/100000
},f_mi:function(num) {
return ((num*30.48)/100000)*0.6214
}
}
// ما سبق كان قاموس الوحدات مع طرق تحويل كل وحدة إلى أخرى
function convertor() {
var num = Number(document.getElementById("num").value)
var result = document.getElementById("result")
var m1 = document.getElementById("m1")
var m2 = document.getElementById("m2")
var i1 = m1[m1.selectedIndex].index
var i2 = m2[m2.selectedIndex].index
var unit = m2[m2.selectedIndex].innerHTML
// استدعاء العناصر
if (i1 == i2) {
result.value = num+unit
}else if (i1 ==0 && i2 ==1) {
result.value = units.cm_m(num)+unit
} else if (i1 ==0 && i2 ==2) {
result.value = units.cm_km(num)+unit
} else if (i1 ==0 && i2 == 3) {
result.value = units.cm_mi(num)+unit
} else if (i1 ==0 && i2 == 4) {
result.value = units.cm_f(num)+unit
}else if (i1 ==1 & i2 == 0) {
result.value = units.m_cm(num)+unit
} else if (i1 ==1 && i2 == 2) {
result.value = units.m_km(num)+unit
} else if (i1 == 1 && i2 == 3 ) {
result.value = units.m_mi(num)+unit
} else if (i1 == 1 && i2 == 4 ) {
result.value = units.m_f(num)+unit
} else if (i1 == 2 & i2 == 0) {
result.value = units.km_cm(num)+unit
} else if (i1 == 2 && i2 == 1) {
result.value = units.km_m(num)+unit
} else if (i1 == 2 && i2 == 3 ) {
result.value = units.km_mi(num)+unit
} else if (i1 == 2 && i2 == 4 ) {
result.value = units.km_f(num)+unit
} else if (i1 == 3 && i2 == 0) {
result.value = units.mi_cm(num)+unit
} else if (i1 == 3 && i2 == 1 ) {
result.value = units.mi_m(num)+unit
} else if (i1 == 3 && i2 == 2) {
result.value = units.mi_km(num)+unit
} else if (i1 == 3 && i2 == 4) {
result.value = units.mi_f(num)+unit
}else if (i1 == 4 && i2 ==0) {
result.value = units.f_cm(num)+unit
} else if (i1 == 4 && i2 == 1) {
result.value = units.f_m(num)+unit
} else if (i1 == 4 && i2 == 2) {
result.value = units.f_km(num)+unit
} else if (i1 == 4 && i2 == 3) {
result.value = units.f_mi(num)+unit
}
}
// مجموعة أوامر شرطية تتحقق من تحديد الوحدات وتنفذ العمليات الحسابية المعدة لكل عملية تحويل
</script>

وسائل التواصل