JavaScript ile Basit Bir Sayaç Uygulaması

JavaScript ile Basit Bir Sayaç Uygulaması

Merhaba! Bugün sizlerle birlikte JavaScript kullanarak basit bir sayaç uygulaması geliştireceğiz. Bu uygulama, artırma ve azaltma butonlarına tıklandığında sayıyı güncelleyen basit bir arayüze sahip olacak. Öncelikle HTML yapımızı oluşturalım. Bu yapı, sayaç değerini gösterecek bir alan ve artırma-azaltma butonlarını içerecek.

HTML Yapısı

<div id="counter">
  <h2>0</h2>
  <button id="increment">Arttır</button>
  <button id="decrement">Azalt</button>
</div>

Gördüğünüz gibi, sayaç değerini görüntülemek için bir div, artırma butonu için bir button ve azaltma butonu için de bir button oluşturduk. Şimdi, JavaScript kodumuz ile bu elementlere fonksiyonellik kazandıralım.

JavaScript Kodlaması

JavaScript kodumuz, butonlara tıklandığında sayaç değerini güncelleyecek. Bunun için, öncelikle HTML elementlerine referans alıp, ardından tıklama olaylarını dinleyeceğiz.

let counter = 0;
const counterDisplay = document.getElementById('counter');
const incrementButton = document.getElementById('increment');
const decrementButton = document.getElementById('decrement');

incrementButton.addEventListener('click', () => {
  counter++;
  counterDisplay.querySelector('h2').textContent = counter;
});

decrementButton.addEventListener('click', () => {
  counter--;
  counterDisplay.querySelector('h2').textContent = counter;
});

Bu kodda, counter değişkeni sayaç değerini tutuyor. Daha sonra, HTML elementlerine referans alıyoruz. addEventListener fonksiyonu ile butonlara tıklama olaylarını dinleyip, tıklama olduğunda sayaç değerini güncelliyoruz. Son olarak, güncellenmiş sayaç değerini HTML’deki h2 elementine yazdırıyoruz. Bu sayede, kullanıcı arayüzünde sayaç değerini gerçek zamanlı olarak görebiliyoruz.

Bu basit örnek, JavaScript’in web uygulamalarına dinamiklik kazandırmada nasıl kullanılabileceğini gösteriyor. Daha karmaşık projelerde de bu temel prensipleri kullanarak geliştirmeler yapabilirsiniz. Daha gelişmiş JavaScript projeleri için fatihsoysal.com adresini ziyaret edebilirsiniz. Ayrıca, daha kapsamlı JavaScript eğitimleri için online kaynakları inceleyebilirsiniz.

Umarım bu makale size yardımcı olmuştur. Herhangi bir sorunuz veya öneriniz varsa, lütfen bana bildirin.

Anahtar Kelimeler

#Etiketler: javascript, sayaç, counter, uygulama, proje, kodlama, programlama, web geliştirme, tutorial, eğitim, artırma, azaltma, button, eventListener