CodeNewbie Community 🌱

Pranab Bhandari
Pranab Bhandari

Posted on

How to Build a CM to Inches Converter with HTML and JavaScript

Converting between cm to Inches is a common task, especially in international contexts where metric and imperial systems meet. In this article, we'll walk through how to build a simple and interactive CM to Inches conversion tool using HTML, CSS, and JavaScript. This is a great beginner project to learn web development fundamentals.

Before we dive into the code, let’s review the conversion formula:

1 inch = 2.54 cm

To convert from cm to inches, divide the centimeter value by 2.54:

inches = cm / 2.54

Step 1: HTML Structure
Start by creating a simple HTML form to input the cm value and show the result.

<!DOCTYPE html>



CM to Inches Converter

CM to Inches Converter


Convert

Step 2: Adding Basic CSS
Let’s add some styling to make the tool user-friendly and visually appealing.

body { font-family: Arial, sans-serif; padding: 20px; max-width: 400px; margin: auto; background-color: #f9f9f9; } input, button { width: 100%; padding: 10px; margin-top: 10px; font-size: 16px; } #result { margin-top: 15px; font-weight: bold; }

Step 3: JavaScript for Conversion
Here’s the JavaScript function that performs the conversion and displays the result.

function convertToInches() { const cm = document.getElementById("cmInput").value; if (cm === "" || isNaN(cm)) { document.getElementById("result").innerText = "Please enter a valid number."; return; } const inches = (cm / 2.54).toFixed(2); document.getElementById("result").innerText = `${cm} cm = ${inches} inches`; }

Final Code
<!DOCTYPE html>



CM to Inches Converter body { font-family: Arial, sans-serif; padding: 20px; max-width: 400px; margin: auto; background-color: #f9f9f9; } input, button { width: 100%; padding: 10px; margin-top: 10px; font-size: 16px; } #result { margin-top: 15px; font-weight: bold; }

CM to Inches Converter


Convert

function convertToInches() { const cm = document.getElementById("cmInput").value; if (cm === "" || isNaN(cm)) { document.getElementById("result").innerText = "Please enter a valid number."; return; } const inches = (cm / 2.54).toFixed(2); document.getElementById("result").innerText = `${cm} cm = ${inches} inches`; }

Top comments (2)

Collapse
 
ariba12345 profile image
ariba12345

Great idea for a beginner-friendly project! Building a CM to Inches converter is a perfect way to practice HTML and JavaScript. Just use a simple form with an input field, a button, and a bit of JavaScript to handle the math (1 cm = 0.3937 inches). If you need help with the code or want to add more features like real-time conversion or input validation, feel free to ask

Collapse
 
frisbook profile image
kopexof

This is a great and practical tutorial—perfect for beginners looking to build something useful while learning the basics of HTML, CSS, and JavaScript. The explanation of the conversion formula is clear, and the step-by-step breakdown makes it really easy to follow. 👍

What I especially like is how the tool includes simple validation and immediate results—it's small touches like these that make a web tool more user-friendly and functional. The clean layout and responsiveness also make it ideal for embedding in other projects, such as educational websites or property conversion tools.

In fact, something like this could be super handy when integrating unit converters into portals like UP Bhulekh, where users often need to switch between measurement units for land records or plot sizes.

Keep up the great work—looking forward to seeing more useful tools like this!