Units Converter<\/title>\n<style>\n body {\n font-family: Arial, sans-serif;\n margin: 0;\n padding: 0;\n background-color: #f4f4f4;\n }\n\n .container {\n max-width: 600px;\n margin: 20px auto;\n padding: 20px;\n background-color: #fff;\n border-radius: 8px;\n box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);\n }\n\n h1 {\n text-align: center;\n color: #333;\n }\n\n select,\n input {\n width: 100%;\n padding: 10px;\n margin-bottom: 10px;\n border: 1px solid #ccc;\n border-radius: 5px;\n font-size: 16px;\n }\n\n button {\n width: 100%;\n padding: 10px;\n background-color: #4caf50;\n color: #fff;\n border: none;\n border-radius: 5px;\n cursor: pointer;\n font-size: 16px;\n transition: background-color 0.3s;\n }\n\n button:hover {\n background-color: #45a049;\n }\n\n #result {\n margin-top: 20px;\n padding: 10px;\n border: 1px solid #ccc;\n border-radius: 5px;\n }\n<\/style>\n<\/head>\n<body>\n\n<div class=\"container\">\n <h1>Units Converter<\/h1>\n <select id=\"unitType\">\n <option value=\"length\">Length<\/option>\n <option value=\"mass\">Mass<\/option>\n <option value=\"volume\">Volume<\/option>\n <\/select>\n <input type=\"number\" id=\"inputValue\" placeholder=\"Enter value to convert\">\n <select id=\"fromUnit\">\n \n <\/select>\n <select id=\"toUnit\">\n \n <\/select>\n <button onclick=\"convert()\">Convert<\/button>\n <div id=\"result\"><\/div>\n<\/div>\n\n<script src=\"https:\/\/unpkg.com\/js-quantities@1.4.0\"><\/script>\n<script>\n function populateUnits() {\n const unitType = document.getElementById('unitType').value;\n const fromUnitSelect = document.getElementById('fromUnit');\n const toUnitSelect = document.getElementById('toUnit');\n\n fromUnitSelect.innerHTML = '';\n toUnitSelect.innerHTML = '';\n\n switch (unitType) {\n case 'length':\n addOption(fromUnitSelect, 'm', 'Meter');\n addOption(fromUnitSelect, 'km', 'Kilometer');\n addOption(fromUnitSelect, 'cm', 'Centimeter');\n addOption(fromUnitSelect, 'mm', 'Millimeter');\n\n addOption(toUnitSelect, 'm', 'Meter');\n addOption(toUnitSelect, 'km', 'Kilometer');\n addOption(toUnitSelect, 'cm', 'Centimeter');\n addOption(toUnitSelect, 'mm', 'Millimeter');\n break;\n case 'mass':\n addOption(fromUnitSelect, 'kg', 'Kilogram');\n addOption(fromUnitSelect, 'g', 'Gram');\n addOption(fromUnitSelect, 'mg', 'Milligram');\n\n addOption(toUnitSelect, 'kg', 'Kilogram');\n addOption(toUnitSelect, 'g', 'Gram');\n addOption(toUnitSelect, 'mg', 'Milligram');\n break;\n case 'volume':\n addOption(fromUnitSelect, 'l', 'Liter');\n addOption(fromUnitSelect, 'ml', 'Milliliter');\n\n addOption(toUnitSelect, 'l', 'Liter');\n addOption(toUnitSelect, 'ml', 'Milliliter');\n break;\n }\n }\n\n function addOption(selectElement, value, text) {\n const option = document.createElement('option');\n option.value = value;\n option.textContent = text;\n selectElement.appendChild(option);\n }\n\n function convert() {\n const unitType = document.getElementById('unitType').value;\n const inputValue = parseFloat(document.getElementById('inputValue').value);\n const fromUnit = document.getElementById('fromUnit').value;\n const toUnit = document.getElementById('toUnit').value;\n\n const quantity = Qty(inputValue + ' ' + fromUnit);\n const result = quantity.to(toUnit).scalar;\n\n document.getElementById('result').textContent = `${inputValue} ${fromUnit} = ${result} ${toUnit}`;\n }\n\n document.addEventListener('DOMContentLoaded', function() {\n populateUnits();\n });\n\n document.getElementById('unitType').addEventListener('change', function() {\n populateUnits();\n });\n<\/script>\n<\/body>\n<\/html>\n\n\n\n\n<h3 class=\"wp-block-heading\">About Units Converter tool:<\/h3>\n\n\n\n<p>The Units Converter Tool is a web-based application designed to help users convert values between different units of measurement in three main categories: Length, Mass, and Volume. The tool provides a user-friendly interface with dropdown menus for selecting conversion types and units, an input field for entering values to convert, and a button to trigger the conversion process. Results are displayed instantly below the input fields, providing users with the converted value along with the selected units.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">How to Use:<\/h3>\n\n\n\n<ol class=\"wp-block-list\">\n<li><strong>Open the Tool<\/strong>: Open the Units Converter Tool in a web browser.<\/li>\n\n\n\n<li><strong>Select Conversion Type<\/strong>: Choose the type of conversion you want to perform by clicking on the “Unit Type” dropdown at the top and selecting one of the options: Length, Mass, or Volume.<\/li>\n\n\n\n<li><strong>Enter Value<\/strong>: In the input field labeled “Enter value to convert,” enter the numerical value you want to convert.<\/li>\n\n\n\n<li><strong>Select Source Unit<\/strong>: Click on the “From Unit” dropdown below the input field and choose the unit you want to convert from.<\/li>\n\n\n\n<li><strong>Select Target Unit<\/strong>: Click on the “To Unit” dropdown below the “From Unit” dropdown and choose the unit you want to convert to.<\/li>\n\n\n\n<li><strong>Perform Conversion<\/strong>: Click on the “Convert” button below the dropdown menus to initiate the conversion process.<\/li>\n\n\n\n<li><strong>View Result<\/strong>: The converted value will appear below the input fields in the “Result” section, showing the original value, source unit, converted value, and target unit.<\/li>\n\n\n\n<li><strong>Repeat as Needed<\/strong>: You can repeat the conversion process by entering different values, selecting different source units, and choosing different target units.<\/li>\n\n\n\n<li><strong>Switch Conversion Type<\/strong>: If you want to convert between a different type of units (e.g., from Length to Mass), simply select the desired conversion type from the “Unit Type” dropdown, and the tool will update the available units accordingly.<\/li>\n<\/ol>\n\n\n\n<p>That’s it! The Units Converter Tool provides a convenient way to perform conversions between various units of measurement quickly and accurately.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Units Converter Units Converter LengthMassVolume Convert About Units Converter tool: The Units Converter Tool is a web-based application designed to help users convert values between different units of measurement in three main categories: Length, Mass, and Volume. The tool provides a user-friendly interface with dropdown menus for selecting conversion types and units, an input field […]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-316","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/calcuconvertonline.com\/index.php\/wp-json\/wp\/v2\/pages\/316","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/calcuconvertonline.com\/index.php\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/calcuconvertonline.com\/index.php\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/calcuconvertonline.com\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/calcuconvertonline.com\/index.php\/wp-json\/wp\/v2\/comments?post=316"}],"version-history":[{"count":2,"href":"https:\/\/calcuconvertonline.com\/index.php\/wp-json\/wp\/v2\/pages\/316\/revisions"}],"predecessor-version":[{"id":318,"href":"https:\/\/calcuconvertonline.com\/index.php\/wp-json\/wp\/v2\/pages\/316\/revisions\/318"}],"wp:attachment":[{"href":"https:\/\/calcuconvertonline.com\/index.php\/wp-json\/wp\/v2\/media?parent=316"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}

{"id":316,"date":"2024-04-19T11:01:21","date_gmt":"2024-04-19T11:01:21","guid":{"rendered":"https:\/\/calcuconvertonline.com\/?page_id=316"},"modified":"2024-04-19T11:01:21","modified_gmt":"2024-04-19T11:01:21","slug":"units-converter","status":"publish","type":"page","link":"https:\/\/calcuconvertonline.com\/index.php\/units-converter\/","title":{"rendered":"Units Converter"},"content":{"rendered":"\n\n\n\n\n\nUnits Converter<\/title>\n<style>\n body {\n font-family: Arial, sans-serif;\n margin: 0;\n padding: 0;\n background-color: #f4f4f4;\n }\n\n .container {\n max-width: 600px;\n margin: 20px auto;\n padding: 20px;\n background-color: #fff;\n border-radius: 8px;\n box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);\n }\n\n h1 {\n text-align: center;\n color: #333;\n }\n\n select,\n input {\n width: 100%;\n padding: 10px;\n margin-bottom: 10px;\n border: 1px solid #ccc;\n border-radius: 5px;\n font-size: 16px;\n }\n\n button {\n width: 100%;\n padding: 10px;\n background-color: #4caf50;\n color: #fff;\n border: none;\n border-radius: 5px;\n cursor: pointer;\n font-size: 16px;\n transition: background-color 0.3s;\n }\n\n button:hover {\n background-color: #45a049;\n }\n\n #result {\n margin-top: 20px;\n padding: 10px;\n border: 1px solid #ccc;\n border-radius: 5px;\n }\n<\/style>\n<\/head>\n<body>\n\n<div class=\"container\">\n <h1>Units Converter<\/h1>\n <select id=\"unitType\">\n <option value=\"length\">Length<\/option>\n <option value=\"mass\">Mass<\/option>\n <option value=\"volume\">Volume<\/option>\n <\/select>\n <input type=\"number\" id=\"inputValue\" placeholder=\"Enter value to convert\">\n <select id=\"fromUnit\">\n \n <\/select>\n <select id=\"toUnit\">\n \n <\/select>\n <button onclick=\"convert()\">Convert<\/button>\n <div id=\"result\"><\/div>\n<\/div>\n\n<script src=\"https:\/\/unpkg.com\/js-quantities@1.4.0\"><\/script>\n<script>\n function populateUnits() {\n const unitType = document.getElementById('unitType').value;\n const fromUnitSelect = document.getElementById('fromUnit');\n const toUnitSelect = document.getElementById('toUnit');\n\n fromUnitSelect.innerHTML = '';\n toUnitSelect.innerHTML = '';\n\n switch (unitType) {\n case 'length':\n addOption(fromUnitSelect, 'm', 'Meter');\n addOption(fromUnitSelect, 'km', 'Kilometer');\n addOption(fromUnitSelect, 'cm', 'Centimeter');\n addOption(fromUnitSelect, 'mm', 'Millimeter');\n\n addOption(toUnitSelect, 'm', 'Meter');\n addOption(toUnitSelect, 'km', 'Kilometer');\n addOption(toUnitSelect, 'cm', 'Centimeter');\n addOption(toUnitSelect, 'mm', 'Millimeter');\n break;\n case 'mass':\n addOption(fromUnitSelect, 'kg', 'Kilogram');\n addOption(fromUnitSelect, 'g', 'Gram');\n addOption(fromUnitSelect, 'mg', 'Milligram');\n\n addOption(toUnitSelect, 'kg', 'Kilogram');\n addOption(toUnitSelect, 'g', 'Gram');\n addOption(toUnitSelect, 'mg', 'Milligram');\n break;\n case 'volume':\n addOption(fromUnitSelect, 'l', 'Liter');\n addOption(fromUnitSelect, 'ml', 'Milliliter');\n\n addOption(toUnitSelect, 'l', 'Liter');\n addOption(toUnitSelect, 'ml', 'Milliliter');\n break;\n }\n }\n\n function addOption(selectElement, value, text) {\n const option = document.createElement('option');\n option.value = value;\n option.textContent = text;\n selectElement.appendChild(option);\n }\n\n function convert() {\n const unitType = document.getElementById('unitType').value;\n const inputValue = parseFloat(document.getElementById('inputValue').value);\n const fromUnit = document.getElementById('fromUnit').value;\n const toUnit = document.getElementById('toUnit').value;\n\n const quantity = Qty(inputValue + ' ' + fromUnit);\n const result = quantity.to(toUnit).scalar;\n\n document.getElementById('result').textContent = `${inputValue} ${fromUnit} = ${result} ${toUnit}`;\n }\n\n document.addEventListener('DOMContentLoaded', function() {\n populateUnits();\n });\n\n document.getElementById('unitType').addEventListener('change', function() {\n populateUnits();\n });\n<\/script>\n<\/body>\n<\/html>\n\n\n\n\n<h3 class=\"wp-block-heading\">About Units Converter tool:<\/h3>\n\n\n\n<p>The Units Converter Tool is a web-based application designed to help users convert values between different units of measurement in three main categories: Length, Mass, and Volume. The tool provides a user-friendly interface with dropdown menus for selecting conversion types and units, an input field for entering values to convert, and a button to trigger the conversion process. Results are displayed instantly below the input fields, providing users with the converted value along with the selected units.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">How to Use:<\/h3>\n\n\n\n<ol class=\"wp-block-list\">\n<li><strong>Open the Tool<\/strong>: Open the Units Converter Tool in a web browser.<\/li>\n\n\n\n<li><strong>Select Conversion Type<\/strong>: Choose the type of conversion you want to perform by clicking on the “Unit Type” dropdown at the top and selecting one of the options: Length, Mass, or Volume.<\/li>\n\n\n\n<li><strong>Enter Value<\/strong>: In the input field labeled “Enter value to convert,” enter the numerical value you want to convert.<\/li>\n\n\n\n<li><strong>Select Source Unit<\/strong>: Click on the “From Unit” dropdown below the input field and choose the unit you want to convert from.<\/li>\n\n\n\n<li><strong>Select Target Unit<\/strong>: Click on the “To Unit” dropdown below the “From Unit” dropdown and choose the unit you want to convert to.<\/li>\n\n\n\n<li><strong>Perform Conversion<\/strong>: Click on the “Convert” button below the dropdown menus to initiate the conversion process.<\/li>\n\n\n\n<li><strong>View Result<\/strong>: The converted value will appear below the input fields in the “Result” section, showing the original value, source unit, converted value, and target unit.<\/li>\n\n\n\n<li><strong>Repeat as Needed<\/strong>: You can repeat the conversion process by entering different values, selecting different source units, and choosing different target units.<\/li>\n\n\n\n<li><strong>Switch Conversion Type<\/strong>: If you want to convert between a different type of units (e.g., from Length to Mass), simply select the desired conversion type from the “Unit Type” dropdown, and the tool will update the available units accordingly.<\/li>\n<\/ol>\n\n\n\n<p>That’s it! The Units Converter Tool provides a convenient way to perform conversions between various units of measurement quickly and accurately.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Units Converter Units Converter LengthMassVolume Convert About Units Converter tool: The Units Converter Tool is a web-based application designed to help users convert values between different units of measurement in three main categories: Length, Mass, and Volume. The tool provides a user-friendly interface with dropdown menus for selecting conversion types and units, an input field […]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-316","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/calcuconvertonline.com\/index.php\/wp-json\/wp\/v2\/pages\/316","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/calcuconvertonline.com\/index.php\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/calcuconvertonline.com\/index.php\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/calcuconvertonline.com\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/calcuconvertonline.com\/index.php\/wp-json\/wp\/v2\/comments?post=316"}],"version-history":[{"count":2,"href":"https:\/\/calcuconvertonline.com\/index.php\/wp-json\/wp\/v2\/pages\/316\/revisions"}],"predecessor-version":[{"id":318,"href":"https:\/\/calcuconvertonline.com\/index.php\/wp-json\/wp\/v2\/pages\/316\/revisions\/318"}],"wp:attachment":[{"href":"https:\/\/calcuconvertonline.com\/index.php\/wp-json\/wp\/v2\/media?parent=316"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}