HTML, CSS ve JavaScript ile Sayaç Örneği
Bu yazımızda, HTML, CSS ve JavaScript ile basit bir sayaç örneği oluşturmayı ele alacağız.
JavaScript, modern web uygulamaları geliştirmede oldukça popüler ve güçlü bir programlama dilidir. İster başlangıç seviye bir geliştirici olun, ister daha deneyimli birisi, her zaman temel JavaScript konseptlerini kullanarak eğlenceli ve etkili projeler yapabilirsiniz. Dahası bu projeler kodların nasıl çalıştığını hatırlamak için de oldukça ideal örneklerdir.
Örnek uygulamamız, kullanıcının sayacı artırıp azaltabileceği iki düğme içerecek ve JavaScript’in temel yeteneklerini kullanarak kullanıcı etkileşimli bir web sayfası oluşturma sürecini açıklayacaktır. Proje boyunca, aşağıdaki temel JavaScript fonksiyonlarını ve özelliklerini kullanarak, nasıl bir sayaç işlevselliği oluşturabileceğinizi göstereceğiz.
- ☑️
document.querySelectorAll(), - ☑️
forEach(), - ☑️
addEventListener(), - ☑️
currentTargetproperty, - ☑️
classList, - ☑️
textContent
Ayrıca, projemize daha şık bir görünüm kazandırmak için basit bir CSS düzenlemesi de ekleyeceğiz. Kodun nasıl bir görünümde olduğunu görmek için codepen üzerinden inceleyebilirsiniz:
See the Pen Counter by 1kodum (@1kodum) on CodePen.
⭐ HTML kodu
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 |
<!DOCTYPE html> <html lang="tr"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Sayaç Örneği</title> <link rel="stylesheet" href="styles.css"> </head> <body> <div class="counter-container"> <h1 id="counter">0</h1> <div class="button-container"> <button class="counter-btn increase">Artır</button> <button class="counter-btn decrease">Azalt</button> </div> </div> <script src="script.js"></script> </body> </html> |
⭐ CSS kodu
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 |
/* Sıfırlama (reset) CSS */ * { margin: 0; padding: 0; box-sizing: border-box; } body { font-family: Arial, sans-serif; display: flex; justify-content: center; align-items: center; height: 100vh; background-color: #f5f5f5; } .counter-container { display: flex; flex-direction: column; align-items: center; background-color: #ffffff; padding: 2rem; border-radius: 1rem; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); } #counter { font-size: 3rem; margin-bottom: 1rem; color: #333; } .button-container { display: flex; } .counter-btn { font-size: 1rem; padding: 0.5rem 1rem; margin: 0 0.5rem; border: none; border-radius: 0.5rem; background-color: #007bff; color: #ffffff; cursor: pointer; transition: background-color 0.3s; } .counter-btn:hover { background-color: #0056b3; } .counter-btn.decrease { background-color: #dc3545; } .counter-btn.decrease:hover { background-color: #c82333; } |
Yukarıdaki CSS kodu, HTML sayfasındaki sayaç ve düğmeleri merkezleyerek daha estetik bir görünüm kazanmasını sağlar. Ayrıca sayacın ve butonların boyutları ve renkleri ayarlanmış olup ilgili CSS kodunu “styles.css” dosyasına ekleyin ve yukarıdaki gibi HTML dosyasına bağlantı olarak ekleyin.
⭐ JavaScript kodu
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 |
// HTML elemanlarını seçme const counter = document.getElementById("counter"); const counterButtons = document.querySelectorAll(".counter-btn"); // Sayaç değerini güncelleme fonksiyonu function updateCounter(value) { counter.textContent = parseInt(counter.textContent) + value; } // Butonları döngüye alarak event listener ekliyoruz counterButtons.forEach((button) => { button.addEventListener("click", (event) => { const currentButton = event.currentTarget; if (currentButton.classList.contains("increase")) { updateCounter(1); } else if (currentButton.classList.contains("decrease")) { updateCounter(-1); } }); }); |
JavaScript kodunda verilen düğmelerle sayaç değerinin artırıp azaltmanıza izin verir. İlgili JavaScript kodlarının nasıl çalıştığının detaylı açıklamasını aşağıdaki gibi yapabiliriz:
➡️ const counter = document.getElementById("counter");: Bu satır, counter adlı bir sabit (constant) oluşturur ve HTML belgesindeki “counter” ID’sine sahip olan elemanı seçer (örnekte, sayaç değerini gösteren <h1> etiketi).
➡️ const counterButtons = document.querySelectorAll(".counter-btn");: Bu satırda, counterButtons adlı bir sabit oluşturuyoruz ve HTML belgesinde “.counter-btn” sınıfına sahip olan tüm elemanları seçiyoruz (örnekte, “Artır” ve “Azalt” düğmeleri).
➡️ function updateCounter(value) { ... }: Bu satırda, updateCounter adlı bir fonksiyon tanımlıyoruz. Bu fonksiyon, value adlı bir parametre alır ve counter.textContent değerini (sayaç değeri) güncellemek için kullanılır.
➡️ counter.textContent = parseInt(counter.textContent) + value;: Bu satır, counter.textContent değerini parseInt() fonksiyonu kullanarak bir tam sayıya dönüştürür, ardından value değerini ekler ve bu değeri tekrar counter.textContent‘e atar. Bu işlem, sayaç değerini günceller.
➡️ counterButtons.forEach((button) => { ... });: Bu satırda, counterButtons listesindeki tüm düğmeler üzerinde bir döngü başlatıyoruz. Döngü içinde, her düğmeye aşağıdaki işlemler uygulanır:
➡️ button.addEventListener("click", (event) => { ... });: Her düğmeye bir “click” olayı dinleyicisi (event listener) ekliyoruz. Bu dinleyici, düğmeye tıklandığında aşağıdaki işlemleri gerçekleştirir:
- ☑️ a.
const currentButton = event.currentTarget;: Tıklanan düğmeyi temsil eden bir sabit (currentButton) oluşturuyoruz.
- ☑️ b.
if (currentButton.classList.contains("increase")) { ... }: Eğer tıklanan düğme “increase” sınıfına sahipse (örnekte, “Artır” düğmesi), sayaç değerini 1 artırmak içinupdateCounter(1);fonksiyonunu çağırırız.
- ☑️ c.
else if (currentButton.classList.contains("decrease")) { ... }: Eğer tıklanan düğme “decrease” sınıfına sahipse (örnekte, “Azalt” düğmesi), sayaç değerini 1 azaltmak içinupdateCounter(-1);fonksiyonunu çağırırız.
