Simple Unit Conversion Script For WordPress Or Blogger 2022

Spread the love

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.

A Simple Unit Conversion Script-Pykit
A Simple Unit Conversion Script

Steps To Create A Simple Unit Conversion Script (Kilometer to Meter)

  1. Create three blank files “index.html”, “style.css”, and “app.js” for writing HTML, CSS, and JavaScript codes respectively
  2. Write the basic structure of the simple unit conversion application in “index.html” file
  3. Provide some styling to your unit conversion application using “style.css” file
  4. 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.

Blank Script Files- Unit Conversion Script
Blank Script Files

#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).

Kilometers Into Meters- A Simple Unit Conversion Application
Kilometers Into Meters

#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.

Kilometers Into Meters- A Simple Unit Conversion Application
Kilometers Into Meters

#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.

A Simple Unit Conversion- A Unit conversion script
A Simple Unit Conversion

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.


Spread the love

Related Posts

This Post Has One Comment

Leave a Reply

Your email address will not be published.

© 2022 Pykit - All Rights Reserved!