533388
Hectopat
- Katılım
- 27 Mart 2022
- Mesajlar
- 4.436
- Makaleler
- 2
- Çözümler
- 54
Merhaba arkadaşlar, dün bir tane sayaç projesi yapmıştık bugün ise arka plan rengi değiştirme projemizi yapacağız yine ilk önce HTML kodlarını anlatacağım sonra ise JavaScript kodlarını ve yine dünkü gibi CSS kodlarını vereceğim ama anlatmayacağım.
Burada ilk önce renklerimizi değiştireceğimiz üst panelimizi yani nav kısmımızı yaptık için idleri sırasıyla kirmizi, mavi, yesil, siyah ve mor olan toplam 5 adet buton bulunuyor ve aşağı kısımda arka plan rengini değiştireceğimiz alan bulunuyor.
Şimdi en önemmli kısım olan JavaScript kısmına geçiyoruz.
Üst kısımda yaptığımız işlemler.
1-HTML tarafında kirmizi idsine sahip olan butonu burada getelementbyıd ile seçtik ve let kirmizi adlı değişkenimize atadık,
2-HTML tarafında mavi idsine sahip olan butonu burada getelementbyıd ile seçtik ve let mavi adlı değişkenimize atadık,
3-HTML tarafında yesil idsine sahip olan butonu burada getelementbyıd ile seçtik ve let yesil adlı değişkenimize atadık,
4-HTML tarafında siyah idsine sahip olan butonu burada getelementbyıd ile seçtik ve let siyah adlı değişkenimize atadık,
5-HTML tarafında mor idsine sahip olan butonu burada getelementbyıd ile seçtik ve let mor adlı değişkenimize atadık.
Sonra tek tek bu butonlara işlev verdik.
Örnekte olduğu gibi az önce oluşturduğumuz let kirmizi değişkenine tıklandığında yani Click olayı gerçekleşince bodymiz yani sayfamızın tüm beyaz görününen kısımını seçtik ve arka plan rengine kırmızı verdik ondan önce ki arrow function
Az önce oluşturduğumuz let mavi değişkenine tıklandığında yani Click olayı gerçekleşince bodymiz yani sayfamızın tüm beyaz görününen kısımını seçtik ve arka plan rengine mavi verdik ondan önce ki arrow function
Ve diğer tüm butonlarımıza da sırasıyla yeşil, siyah ve mor renklerini atadık.
Son durumda böyle bir görünüme.
Sahip olduk yarınki projemizde görüşmek üzere kolay gelsin.
@WAHRETTE hocam nasıl buldunuz.
HTML:
<nav>
<h3>Arka plan rengi değiştirme paneli</h3>
<button id="kirmizi">Kırmızı</button>
<button id="mavi">Mavi</button>
<button id="yesil">Yeşil</button>
<button id="siyah">Siyah</button>
<button id="mor">Mor</button>
</nav>
<hr>
<div id="anadiv">
</div>Burada ilk önce renklerimizi değiştireceğimiz üst panelimizi yani nav kısmımızı yaptık için idleri sırasıyla kirmizi, mavi, yesil, siyah ve mor olan toplam 5 adet buton bulunuyor ve aşağı kısımda arka plan rengini değiştireceğimiz alan bulunuyor.
CSS:
<style>
*
{
margin: 0;
padding: 0;
}
nav.
{
display: flex;
justify-content: space-evenly;
}
</style>Şimdi en önemmli kısım olan JavaScript kısmına geçiyoruz.
JavaScript:
let kirmizi = document.getElementById("kirmizi");
let mavi = document.getElementById("mavi");
let yesil = document.getElementById("yesil");
let siyah = document.getElementById("siyah");
let mor = document.getElementById("mor");Üst kısımda yaptığımız işlemler.
1-HTML tarafında kirmizi idsine sahip olan butonu burada getelementbyıd ile seçtik ve let kirmizi adlı değişkenimize atadık,
2-HTML tarafında mavi idsine sahip olan butonu burada getelementbyıd ile seçtik ve let mavi adlı değişkenimize atadık,
3-HTML tarafında yesil idsine sahip olan butonu burada getelementbyıd ile seçtik ve let yesil adlı değişkenimize atadık,
4-HTML tarafında siyah idsine sahip olan butonu burada getelementbyıd ile seçtik ve let siyah adlı değişkenimize atadık,
5-HTML tarafında mor idsine sahip olan butonu burada getelementbyıd ile seçtik ve let mor adlı değişkenimize atadık.
Sonra tek tek bu butonlara işlev verdik.
JavaScript:
kirmizi.addEventListener("click",() => {
document.body.style.background = "red";
});Örnekte olduğu gibi az önce oluşturduğumuz let kirmizi değişkenine tıklandığında yani Click olayı gerçekleşince bodymiz yani sayfamızın tüm beyaz görününen kısımını seçtik ve arka plan rengine kırmızı verdik ondan önce ki arrow function
() => {} bu ifade yerine bunu da function(){} kullanabilirsiniz.Az önce oluşturduğumuz let mavi değişkenine tıklandığında yani Click olayı gerçekleşince bodymiz yani sayfamızın tüm beyaz görününen kısımını seçtik ve arka plan rengine mavi verdik ondan önce ki arrow function
() => {} bu ifade yerine bunu da function(){} kullanabilirsiniz.Ve diğer tüm butonlarımıza da sırasıyla yeşil, siyah ve mor renklerini atadık.
Son durumda böyle bir görünüme.
Sahip olduk yarınki projemizde görüşmek üzere kolay gelsin.
@WAHRETTE hocam nasıl buldunuz.
Son düzenleme:
