Altın Konu HTML ve JavaScript ile ağırlık dönüştürücü nasıl yapılır?

GUNNERIUS · 28 Şub 2024

Ağırlık dönüştürücü, kullanıcıların farklı ağırlık birimleri arasında dönüşüm yapmasını sağlayan bir araçtır. HTML ve JavaScript kullanarak basit bir ağırlık dönüştürücü oluşturabiliriz. Bu rehberde, adım adım bir ağırlık dönüştürücü nasıl yapılacağını açıklayacağım.

1. HTML Yapısını Oluşturma:

İlk adım, HTML yapısını oluşturmaktır. Bu, kullanıcı arayüzünü oluşturacak temel bileşenlerdir. Bir input alanı, dönüşüm yapılacak birimleri seçmek için bir dropdown menüsü ve dönüşüm sonucunu gösterecek bir alan içerebilir.

[CODE lang="html" title="html"]<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Ağırlık Dönüştürücü</title>
</head>
<body>
<h2>Ağırlık Dönüştürücü</h2>
<input type="number" id="inputWeight" placeholder="Ağırlık girin">
<select id="selectUnit">
<option value="kg">Kilogram (kg)</option>
<option value="g">Gram (g)</option>
<option value="lb">Pound (lb)</option>
<option value="oz">Ons (oz)</option>
</select>
<button onclick="convertWeight()">Dönüştür</button>
<p id="result"></p>
</body>
</html>[/CODE]

2. JavaScript Kodunu Yazma:

Şimdi, kullanıcının girdiği ağırlığı dönüştürmek için JavaScript kodu yazacağız. Bu kod, input alanındaki değeri alacak, seçilen birime göre dönüştürme işlemini yapacak ve sonucu ekranda gösterecek.

[CODE lang="javascript" title="jsx"]<script>
function convertWeight() {
var inputWeight = document.getElementById("inputWeight").value;
var selectUnit = document.getElementById("selectUnit").value;
var result = document.getElementById("result");

if (isNaN(inputWeight)) {
result.innerText = "Geçersiz giriş. Lütfen bir sayı girin.";
return;
}

var kg;

switch (selectUnit) {
case "kg":
kg = inputWeight;
break;
case "g":
kg = inputWeight / 1000;
break;
case "lb":
kg = inputWeight * 0.453592;
break;
case "oz":
kg = inputWeight * 0.0283495;
break;
default:
kg = inputWeight;
}

result.innerText = "Sonuç: " + kg.toFixed(2) + " kilogram";
}

</script>[/CODE]

3. Ağırlık Birimlerini Dönüştürme:

JavaScript kodunda, seçilen birime göre ağırlık birimlerini dönüştürmek için bir dizi koşul kullanırız. Örneğin, kilogramı gram cinsine dönüştürmek için giriş ağırlığını 1000'e böleriz. Bu işlemi diğer birimler için de uygularız.

4. Sonuçları Gösterme:

Son olarak, dönüşüm sonucunu kullanıcıya göstermek için JavaScript kodunda bir sonuç alanı kullanırız. Bu alan, dönüştürülen ağırlığı ve birimi içerecek şekilde güncellenir.

Bu adımları takip ederek, HTML ve JavaScript kullanarak basit bir ağırlık dönüştürücü oluşturabiliriz. Bu dönüştürücü, kullanıcıların farklı ağırlık birimleri arasında kolayca dönüşüm yapmasını sağlar.