Javascript

RadioButton Yardımıyla Web Sayfasının Arkaplan Rengini Değiştiren Uygulamayı Javascript Kodlarıyla Tasarlama

Web sayfalarının kullanıcı dostu bir yapıyla tasarlanması, programın bazı görsel yönlerini kullanıcının isteğine göre düzenlenmesi kullanıcının o web sayfasını sahiplenmesine neden olur. Pencerenin arkaplan renginin kullanıcı tarafından seçilmesi işlemi de bunlardan biridir. Biz bu işlemi radiobutton yardımıyla gerçekleştirmeye çalışacağız.

Adım 1: Web sayfasının temel tanımlamalarını yapalım.

<!DOCTYPE html>
<html lang="tr">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, 
initial-scale=1.0">
    <title>Arkaplan Rengi Değiştirme</title>
    <style>

    </style>
    <script>

    </script>
</head>
<body>
    <header>

    </header>
</body>
</html>

Adım 2: header etiketine ait tanımlamalarını yapalım.

<header>
    <h2>Arkaplan Rengini Seçiniz:</h2>

    <nav>
        <label>
            <input type="radio" name="color" value="red" 
onclick="changeBackgroundColor()"> Kırmızı
        </label>
        <label>
            <input type="radio" name="color" value="green" 
onclick="changeBackgroundColor()"> Yeşil
        </label>
        <label>
            <input type="radio" name="color" value="blue" 
onclick="changeBackgroundColor()"> Mavi
        </label>
    </nav>
</header>

Adım 3: 1. RadioButton işaretliyse web saydasının arka plan rengini kırmızı, 2. RadioButton işaretliyse arka plan rengini yeşil, 3. Radiobutton işaretliyse arka plan rengini mavi yapalım.

<script>
    // JavaScript ile arka plan rengini değiştiren fonksiyon
    function changeBackgroundColor() {
        // RadioButton'lardan seçilen değeri al
        let selectedColor = document.querySelector(
'input[name="color"]:checked').value;

        // Seçilen renge göre body'nin arka planını değiştir
        document.body.style.backgroundColor = selectedColor;
    }
</script>

Adım 4: Web sayfasını kaydedip çalıştıralım. En temel anlamda web sayfasının çalıştığını görürsünüz. Şimdi header etiketini css ile tasarlayalım.

<style>
    body {
        margin: 0;
    }
    /* Header'ın ortalanması ve arka plan rengi */
    header {
        text-align: center;
        background-color: #2c3e50; /* Koyu gri arka plan */
        padding: 20px;
    }

        /* Başlık stil düzenlemeleri */
        header h2 {
            color: white; /* Başlık rengini beyaz yapar */
            font-size: 20px;
            margin-bottom: 30px;
        }

    /* Menü elemanlarının yatay sıralanması ve stil düzenlemeleri */
    nav label {
        margin-right: 30px; /* Menü elemanları arasında 
boşluk bırakır */
        font-size: 16px; /* Menüdeki yazı boyutunu 30px yapar */
        color: #ecf0f1; /* Açık gri renk (menü yazısı için) */
    }

    /* RadioButton boyutu ve aradaki mesafeyi ayarlama */
    nav input[type="radio"] {
        transform: scale(1.5); /* RadioButton'un boyutunu büyütür */
        width: 16px; /* RadioButton genişliği */
        height: 16px; /* RadioButton yüksekliği */
        margin-right: 10px; /* RadioButton ve etiket arası boşluk */
    }
</style>

Adım 4: Web sayfasını bootstrap ile yeniden düzenleyelim.

 

Öncelikle web sayfasını tasarlayalım.

 
İlgili Makaleler
Javascript Kodlarıyla Tarayıcı Penceresinde Yön Tuşlarıyla Kutunun Hareket Ettirilmesi
JavaScript Kodlarıyla TextBox Nesnesine Sadece Sayıların Girilmesini Sağlama
Web Sayfasında Tıklanan Resmin Gerçek Boyutunu Öğrenme
Faktöriyel Hesabı Yapan Javascript Uygulaması
Tetris Oyununu Javascript Dilini Kullanarak Web Sayfasında Kodlama1
Validation Kontrollerini Yaparak Kimlik Bilgileri Formunu Oluşturan Programı Javascript Script Dilinde Yapınız
Radio Button İçinden Seçilen Değeri Görüntüleyen Programı Javascript Script Dilinde Yapınız
Bölme İşaretini Kullanmadan İki Sayıyı Bölen Programı Javascript Script Dilinde Yapınız
Basamak Değerleri Seçilerek Elde Edilen Sayılarla Toplama İşlemi Alıştırmaları Yapan Programı Javascript Script Dilinde Yapınız
Koordinat Düzleminde Verilen Bir Noktanın Hangi Bölgeye Düştüğünü Bulan Programı Javascript Script Dilinde Yapınız
Pascal Üçgenine Ait İlk 10 Terimin Kat Sayılarını Bulan c# Web Uygulaması
RadioButton Yardımıyla Web Sayfasının Arkaplan Rengini Değiştiren Uygulamayı Javascript Kodlarıyla Tasarlama
Birinci Dereceden Bir Bilinmeyenli Bir Denkleme Ait Çözüm Kümesine Göre Grafik Oluşturan Programı Javascript Script Dilinde Yapınız
RadioButton Yardımıyla Resim Galerisi Oluşturan Web Sayfasını Javascript Kodlarıyla Tasarlama
ListBox Yardımıyla Listelenen Dosya Uzantılarının Hangi Medya Dosyası Olduğunu Bulan Web Sayfasını Javascript Kodlarıyla Düzenleme
Javascript Script Dilinde Atama Operatörleri
Video Açıkken Yeni Sekme Açıldığında ya da Tarayıcı Simge Durumuna Getirildiğinde Javascript Kodlarıyla Videoyu Durdurma İşlemi
Web Sayfalarında Tablo İşlemlerinin Dinamik Olarak Gerçekleştiren Javascript Kodları
Çarpma İşaretini Kullanmadan İki Sayıyı Çarpan Programı Javascript Script Dilinde Yapınız
Tetris Oyununu Javascript Dilini Kullanarak Web Sayfasında Kodlama2

Yorum Ekle
   
Kötü İyi