ve

ile işaretlemek (

etiketi ana sayfa başlığı için ayrılmalı ve bir sayfada bir kez kullanılmalı), paragrafları

ile, listeleri

veya
ile belirtmek önemlidir. FLAMES hesaplayıcısı için aşağıdaki gibi bir yapı kullandım:

    

        
FLAMES Hesaplayıcı
        
İki isim arasındaki ilişkiyi öğrenin!
        

            

                İlk İsim:
                
            
            

                İkinci İsim:
                
            
            Hesapla
        
        

    

Form Elemanları ve Etiketler

Form elemanları (, ) ve onlarla ilişkili etiketleri, hem kullanıcı deneyimi hem de erişilebilirlik açısından kritik öneme sahiptir. etiketini for niteliği ile ilgili elemanına bağlamak, ekran okuyucuların hangi etiketin hangi giriş alanına ait olduğunu anlamasını sağlar.

ARIA Nitelikleri ve Erişilebilirlik

WAI-ARIA (Web Accessibility Initiative - Accessible Rich Internet Applications) nitelikleri, standart HTML ile ifade edilemeyen semantik bilgileri sağlamak için kullanılır. Özellikle dinamik içerik güncellemelerinde veya özel UI bileşenlerinde ARIA kullanımı önemlidir. Örneğin, sonuç alanına role="status" ve aria-live="polite" eklemek, ekran okuyucuların sonuç değiştiğinde kullanıcıyı bilgilendirmesini sağlar.

Vanilla JS ile Hesaplayıcı Mantığı

Hesaplayıcının kalbi, JavaScript ile yazılan algoritmik mantıktır. Bu bölümde, kullanıcı etkileşiminden sonuca ulaşana kadar olan adımları ve kod parçacıklarını inceleyeceğiz.

DOM Manipülasyonu ve Olay Dinleyicileri

Kullanıcı arayüzü ile etkileşim kurmak için JavaScript'in DOM (Document Object Model) manipülasyon yeteneklerini kullandım. Form gönderildiğinde tetiklenecek bir olay dinleyicisi ekledim:

document.addEventListener('DOMContentLoaded', () => {
    const flamesForm = document.getElementById('flamesForm');
    const name1Input = document.getElementById('name1');
    const name2Input = document.getElementById('name2');
    const resultDiv = document.getElementById('result');

    flamesForm.addEventListener('submit', (event) => {
        event.preventDefault(); // Formun varsayılan gönderimini engelle
        const name1 = name1Input.value;
        const name2 = name2Input.value;

        if (name1 && name2) {
            const outcome = calculateFlames(name1, name2);
            resultDiv.innerHTML = 
İlişki durumu: ${outcome};
        } else {
            resultDiv.innerHTML = 
Lütfen her iki ismi de girin.;
        }
    });
});

Karakter İşleme ve Tekrarları Giderme

FLAMES algoritmasının ilk adımı, isimleri temizlemek ve ortak harfleri çıkarmaktır. Bu işlem için aşağıdaki gibi bir fonksiyon yazdım:

function getRemainingCharacters(name1, name2) {
    let arr1 = name1.toLowerCase().replace(/\s/g, '').split('');
    let arr2 = name2.toLowerCase().replace(/\s/g, '').split('');

    // Ortak harfleri bul ve çıkar
    for (let i = 0; i < arr1.length; i++) {
        const char = arr1[i];
        const indexInArr2 = arr2.indexOf(char);
        if (indexInArr2 !== -1) {
            arr1.splice(i, 1);
            arr2.splice(indexInArr2, 1);
            i--; // Splice sonrası index kaymasını düzelt
        }
    }
    return arr1.length + arr2.length;
}

FLAMES Kelimesini Azaltma Algoritması

Kalan harf sayısını bulduktan sonra, FLAMES kelimesini bu sayıya göre azaltma işlemi yapılır. Bu, döngüsel bir eleme sürecidir:

function calculateFlames(name1, name2) {
    const totalCount = getRemainingCharacters(name1, name2);
    if (totalCount === 0) return "Belirlenemedi (isimler çok benzer)";

    let flames = ['F', 'L', 'A', 'M', 'E', 'S'];
    let currentIndex = 0;

    while (flames.length > 1) {
        // Eleme yapılacak harfin indeksini bul
        currentIndex = (currentIndex + totalCount - 1) % flames.length;
        flames.splice(currentIndex, 1); // Harfi listeden çıkar
    }

    const finalLetter = flames[0];
    const outcomes = {
        'F': 'Arkadaşlık',
        'L': 'Aşk',
        'A': 'Sevgi',
        'M': 'Evlilik',
        'E': 'Düşmanlık',
        'S': 'Kardeşlik'
    };
    return outcomes[finalLetter] || 'Bilinmeyen Sonuç';
}

Sonucu Görüntüleme

Hesaplama tamamlandıktan sonra, elde edilen ilişki durumunu kullanıcıya okunabilir bir formatta göstermek için DOM'u güncelledim. Sonuç div'i (resultDiv) içine dinamik olarak HTML ekledim.

Performans ve Kullanıcı Deneyimi Optimizasyonu

SEO sadece anahtar kelimelerden ibaret değildir; aynı zamanda web sitenizin performansı ve kullanıcı deneyimi de arama motoru sıralamalarını doğrudan etkiler. Hızlı yüklenen, mobil uyumlu ve kullanımı kolay bir site, hem kullanıcıları hem de arama motorlarını memnun eder.

Minimalist CSS ve JS

Vanilla JS kullanmanın getirdiği hafiflik avantajını CSS tarafında da sürdürdüm. Minimalist bir CSS dosyası, sadece gerekli stilleri içerir ve gereksiz kod şişkinliğini önler. JavaScript dosyalarını da sadece gerekli fonksiyonları içerecek şekilde optimize ettim. Bu, sayfa yükleme sürelerini önemli ölçüde azaltır.

Asenkron Yükleme ve Gecikmeli Komut Dosyaları

JavaScript dosyalarını HTML'in en altına veya async / defer nitelikleriyle yüklemek, tarayıcının HTML'i ayrıştırmasını ve içeriği görüntülemesini engellemez. Bu, özellikle büyük JavaScript dosyaları için kritik bir performans optimizasyonudur. Benim küçük projemde bile, JS dosyasını kapanış etiketinden hemen önce yükleyerek sayfa oluşturma hızını artırdım.

Duyarlı Tasarım (Responsive Design)

Mobil cihazlardan gelen trafiğin artmasıyla birlikte, duyarlı tasarım bir zorunluluk haline gelmiştir. Web sitesinin farklı ekran boyutlarına otomatik olarak uyum sağlaması, mobil kullanıcı deneyimini iyileştirir ve arama motorlarının mobil uyumluluk kriterlerini karşılar. Meta viewport etiketi ve CSS media query'leri bu konuda ana araçlardır.

SEO Optimizasyon Stratejileri

Bir FLAMES hesaplayıcısı gibi niş bir araç bile, doğru SEO stratejileriyle daha fazla kullanıcıya ulaşabilir. Bu bölümde, projemde uyguladığım SEO tekniklerini ele alacağım.

Meta Etiketler ve Açıklamalar

Meta etiketler, arama motorlarına sayfanız hakkında önemli bilgiler sağlar. Özellikle