Dairenin alan ve çevresini hesaplamak, geometri ve matematik derslerinde sıkça karşılaşılan bir konudur. Web geliştirmede ise JavaScript ve HTML ile bu tür hesaplamaları yapmak oldukça basit bir işlem haline gelmiştir. Bu örnekte, bir dairenin yarıçapını alarak alan ve çevresini hesaplayan bir web sayfası tasarlayacağız.

Dairenin alanı ve çevresi formülleri şöyledir:

• Dairenin Alanı: π * r²
• Dairenin Çevresi: 2 * π * r

Burada, π pi sayısını (3.14159) ve r ise dairenin yarıçapını temsil eder. Şimdi, JavaScript ile bu hesaplamaları yapabilen bir web sayfası kodlayalım.

HTML

<label for="radius">Yarıçap (r):</label>
<input type="number" id="radius" placeholder="Yarıçapı girin">
<button onclick="calculateCircle()">Hesapla</button>

<p id="result"></p>

CSS

        body {
            font-family: Arial, sans-serif;
            display: flex;
            flex-direction: column;
            align-items: center;
            margin-top: 50px;
        }
        input, button {
            margin: 5px;
            padding: 8px;
            font-size: 16px;
        }

JavaScript

function calculateCircle() {
const radius = document.getElementById("radius").value;
const pi = Math.PI;

if (radius <= 0) {
	document.getElementById("result").textContent = "Lütfen geçerli bir yarıçap girin.";
	return;
}

const area = pi * Math.pow(radius, 2);
const circumference = 2 * pi * radius;

document.getElementById("result").innerHTML = 
	'Dairenin Alanı: ${area.toFixed(2)} <br> Dairenin Çevresi: ${circumference.toFixed(2)}';
}

Kod Açıklaması

1. HTML : input öğesi kullanıcıdan dairenin yarıçapını alır ve button öğesi “Hesapla” butonunu temsil eder. Sonuçlar p etiketi içinde görüntülenir.
2. JavaScript Fonksiyonu: calculateCircle fonksiyonu, girilen yarıçap değerini alır. Bu değer sıfırdan küçükse hata mesajı gösterilir. Alan ve çevre hesaplamaları yapıldıktan sonra sonuçlar ekranda gösterilir.
3. Hesaplamalar: area değişkeni dairenin alanını, circumference değişkeni ise çevresini hesaplar ve sonuçları iki ondalık basamağa kadar yuvarlar.

Yukarıda paylaştığım kodların çalışan bir örneğini aşağıda ki bağlantıdan inceleyebilirsiniz.

https://codepen.io/Serdar-Karaca/pen/MWNXpbE