Simple Unit Conversion Script For WordPress Or Blogger 2022
We all know that to measure any quantity we require a base unit. While working on calculations we always need to convert one unit to another for simplicity like Hour to Second, Degree to Fahrenheit, Year to Days, and so on. In this article, we will see a simple unit conversion script that will convert a Kilometer to Meter. We will use that script to create a custom converter application for our WordPress or Blogger for our website visitors. We will create the simple unit conversion script using HTML, CS, and JavaScript (JS) coding.
Steps To Create A Simple Unit Conversion Script (Kilometer to Meter)
- Create three blank files “index.html”, “style.css”, and “app.js” for writing HTML, CSS, and JavaScript codes respectively
- Write the basic structure of the simple unit conversion application in “index.html” file
- Provide some styling to your unit conversion application using “style.css” file
- Write the logic for the conversion in the “app.js” file
For editing the script files, I am using Notepad++ which is totally free. You can also download your own copy of Notepad++.
#01 Create three blank files “index.html”, “style.css”, and “app.js” for writing HTML, CSS, and JavaScript codes respectively
Create three blank text files and rename the filename with extensions as “index.html”, “style.css”, and “app.js” as shown in the below image. Note: Create a separate folder and place all these files in it.
#02 Write the basic structure of the simple unit conversion application in “index.html” file
Right-click on the “index.html” file and open it using Notepad++ editor. Then in the next step, copy and paste the below script and save it.
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="A Simple Unit Conversion, Kilometer to Meter, Unit Converter, Length Convertor"/>
<meta name="robots" content="index,follow" />
<meta name="keywords" content="A Simple Unit Conversion, Kilometer to Meter, Unit Converter, Length Convertor" />
<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
<link rel = "stylesheet" type="text/css" href = "style.css" />
</head>
<body><center>
<h2>Length Converter</h3>
<h3>Convert Kilometers Into Meters</h3>
<p>
<label>Kilometers</label>
<input id="inputKm" type="number" placeholder="Kilometers"
oninput="KmtoMConverter(this.value)" onchange="KmtoMConverter(this.value)">
</p>
<p>Meters: <span class="meters"></span></p>
</center>
<script src="app.js"></script>
</body>
</html>Explanation: In the above script, we have created a basic structure of our length conversion application (a simple unit conversion). We have provided keywords, descriptions, titles, heads, and labels. We have also provided an input box that will take the input Kilometers from the user.
Once, you save the index.html file, you can view the structure using the browser (as shown in the below image).
#03 Provide some styling to your unit conversion application using “style.css” file
Using the “style.css” we will provide some formatting to the basic structure. Open the “style.css” file using Notepad++ and copy and paste the below script and save it.
<style>
body{
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}
input,span{
font-size: 20px;
}
h2{color: white;
background-color: black;
text-align: center;
padding: 10px;
}
</style>Explanation: In the above script, we are providing formatting to our body and h2 heading. We have also provided a background color to the h2 heading.
Once you have saved the script, refresh the “index.html” file in the browser and you will see the difference.
#04 Write the logic for the conversion in the “app.js” file
Now, the structure of the unit conversion application is ready and we just have to provide the calculation logic using JavaScript. Open the “app.js” file using Notepad++ and copy and paste the below script and save it.
function KmtoMConverter(length) {
document.querySelector(".meters").innerHTML=length*1000;
}Explanation: In the “index.html” script, we have provided a function “KmtoMConverter” which will take the value from the “Kilometers” field and convert the value into Meters by multiplying it to 1000.
Once you have saved the script, refresh the “index.html” file in the browser and you can see that our simple unit conversion is working absolutely perfectly.
I have embedded that Simple Unit Conversion Application below. Try it out yourself!
Length Converter
Convert Kilometers Into Meters
Meters:
If you want to know how to embed this application into your WordPress, read my article Create A Custom Tool Website In WordPress For Users In 2022 where I have explained in detail how to create it and embed it in WordPress Post Or Page. I have demonstrated the same example.
Thank you for reading this article!
Hope you find this useful. Please share and comment below for any suggestions. You can also Contact Us if you have any queries.
We all know that to measure any quantity we require a base unit. While working on calculations we always need to convert one unit to another for the simplicity like Hour to Second, Degree to Fahrenheit, Year to Days, and so on. In this article, we will see a simple unit conversion script which will convert Kilometer to Meter. We will use that script to create a custom convertor application for our WordPress or Blogger for our website visitors. We will create the simple unit conversion script using HTML, CS, and JavaScript (JS) coding.