533388
Hectopat
- Katılım
- 27 Mart 2022
- Mesajlar
- 4.436
- Makaleler
- 2
- Çözümler
- 54
Merhaba arkadaşlar bugün sizlerle birlikte JavaScript'te kendinizi geliştirebileceğiniz ufak projeleri göstereceğim;
1-sayı arttırma ve azaltma projesi,
2-arka plan rengi değiştirme projesi,
3-responsive navbar projesi.
Projeler kolaydan zora doğru gidecek her gün 1 tane ekleyeceğim ve tüm kodları tek tek açıklayacağım.
Evet ilk olarak HTML kodlarından başlayalım.
Burada ilk önce cssimizi dahil ettik sonra en aşağıya JavaScript dosyamızı dahil ettik.
Upmenu classına sahip olan divimizle JavaScript tarafında işimiz yok sadece oraya projenin başlığını koyduk. Downmenu classlı divimizin içindeki elementlerin işlevleri;
1-ID'si arttir olan button bu buton sayımızı arttırmada kullanacağımız buton,
2-ID'si azalt olan button bu buton sayımızı azaltmada kullanacağımız buton,
3-ID'si deger olan H3 ise sayımızı tuttuğumuz HTML elementi HTML tarafında işimiz bu kadardı şimdi CSS kısmına geçelim ama CSS kısmında kodları anlatmıyacağım sadece size atacağım ki benimle aynı tasarıma sahip olun.
Evet şimdi en öncemli kısım olan JavaScript'e geçiyoruz.
Burada ilk önce sayımızı arttıracağımız değişkeni yani let arttir değişkenini tanımladık, ikinci olarak ise sayımızı azaltacağımız let azalt değişkenini tanımladık, üçüncü olarak ise htöml tarafındaki sayımızı dinamik olarak değiştirebilmek için ve ona değer atamak için let deger değişkenini tanımladık HTML tarafında değişkenlerimize ID değeri verdiğimiz için getelementbyıd ile seçtik class olarak veya HTML etiketi olarak da seçebilirdik ve son olarak değişkene atacağımız değeri yani let Value'yi tanımladık sabit olarak sayacımız 0'dan başlayacağı için 0 değerini verdik.
Burada ise az önce tanımladığımız arttir değişkenine bir olay atadık bunu ise addeventlistener ile yaptık ID'si arttir olan butonumuza basılınca yani Click olayı olunca Value değerimizi bir arttır dedik ama ondan önceki arrow functionumuzu tanımladık bunu yerine
Burada ise az önce tanımladığımız azalt değişkenine bir olay atadık bunu ise addeventlistener ile yaptık ID'si azalt olan butonumuza basılınca yani Click olayı olunca Value değerimizi bir azalt dedik ama ondan önceki arrow functionumuzu tanımladık bunu yerine
Evet arkadaşlar yarinki projede görüşmek üzere kolay gelsin.
@GTX1650
Beğendiniz mi hocam.
1-sayı arttırma ve azaltma projesi,
2-arka plan rengi değiştirme projesi,
3-responsive navbar projesi.
Projeler kolaydan zora doğru gidecek her gün 1 tane ekleyeceğim ve tüm kodları tek tek açıklayacağım.
Evet ilk olarak HTML kodlarından başlayalım.
HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Sayı arttırma azaltma projesi</title>
<link rel="stylesheet" href="app.css">
</head>
<body>
<div class="upMenu">
<h1>Javascript sayaç projesi</h1>
</div>
<div class="downMenu">
<button id="arttir">Arttır</button>
<h3 id="deger">0</h3>
<button id="azalt">Azalt</button>
</div>
<script src="app.js"></script>
</body>
</html>Burada ilk önce cssimizi dahil ettik sonra en aşağıya JavaScript dosyamızı dahil ettik.
Upmenu classına sahip olan divimizle JavaScript tarafında işimiz yok sadece oraya projenin başlığını koyduk. Downmenu classlı divimizin içindeki elementlerin işlevleri;
1-ID'si arttir olan button bu buton sayımızı arttırmada kullanacağımız buton,
2-ID'si azalt olan button bu buton sayımızı azaltmada kullanacağımız buton,
3-ID'si deger olan H3 ise sayımızı tuttuğumuz HTML elementi HTML tarafında işimiz bu kadardı şimdi CSS kısmına geçelim ama CSS kısmında kodları anlatmıyacağım sadece size atacağım ki benimle aynı tasarıma sahip olun.
CSS:
*
{
margin: 0;
padding: 0;
}
body.
{
height: 60vh;
background-color: #C5DFF8;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
.upMenu h1.
{
font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
}
.downMenu
{
display: flex;
margin-top: 30px;
}
.downMenu button.
{
margin: 0 20px;
font-family: sans-serif;
font-size: 20px;
}Evet şimdi en öncemli kısım olan JavaScript'e geçiyoruz.
JavaScript:
let arttir = document.getElementById("arttir");
let azalt = document.getElementById("azalt");
let deger = document.getElementById("deger");
let value = 0;Burada ilk önce sayımızı arttıracağımız değişkeni yani let arttir değişkenini tanımladık, ikinci olarak ise sayımızı azaltacağımız let azalt değişkenini tanımladık, üçüncü olarak ise htöml tarafındaki sayımızı dinamik olarak değiştirebilmek için ve ona değer atamak için let deger değişkenini tanımladık HTML tarafında değişkenlerimize ID değeri verdiğimiz için getelementbyıd ile seçtik class olarak veya HTML etiketi olarak da seçebilirdik ve son olarak değişkene atacağımız değeri yani let Value'yi tanımladık sabit olarak sayacımız 0'dan başlayacağı için 0 değerini verdik.
JavaScript:
arttir.addEventListener("click",() => {
value++;
deger.innerHTML = value;
})Burada ise az önce tanımladığımız arttir değişkenine bir olay atadık bunu ise addeventlistener ile yaptık ID'si arttir olan butonumuza basılınca yani Click olayı olunca Value değerimizi bir arttır dedik ama ondan önceki arrow functionumuzu tanımladık bunu yerine
function(){} bu ifadeyi de kullanabilirdiniz ve arttırdığımız Value değerini HTML tarafında oluşturduğumuz ve burada deger olarak seçtiğimiz H3 etiketine innerhtml ile atadık.
JavaScript:
azalt.addEventListener("click",() => {
value--;
deger.innerHTML = value;
})Burada ise az önce tanımladığımız azalt değişkenine bir olay atadık bunu ise addeventlistener ile yaptık ID'si azalt olan butonumuza basılınca yani Click olayı olunca Value değerimizi bir azalt dedik ama ondan önceki arrow functionumuzu tanımladık bunu yerine
function(){} bu ifadeyi de kullanabilirdiniz ve azalttığımız Value değerini HTML tarafında oluşturduğumuz ve burada deger olarak seçtiğimiz H3 etiketine innerhtml ile atadık.Evet arkadaşlar yarinki projede görüşmek üzere kolay gelsin.
@GTX1650
Beğendiniz mi hocam.
Son düzenleme:
