Merhaba Javascript ile Basit bir sayaç yapımını göstereceğim. Umarım hoşunuza gider.
HTML Yapısı
Sayaç için HTML yapısını oluşturacağız. Sayacımızı gösterecek bir metin alanı ve artırma/azaltma düğmeleri içeren basit bir yapı kullanacağız. HTML yapısı:
JavaScript Kodu
Sayaç işlevselliğini sağlamak için JavaScript kodu yazacağız. Düğmelere tıklama olaylarına yanıt vererek sayaç değerini artırma veya azaltma işlemlerini gerçekleştireceğiz. JavaScript kodu:
Sayaç Özelleştirme ve İyileştirme
Bu temel sayaç yapısını dilediğiniz gibi özelleştirebilirsiniz. Örneğin, başlangıç değerini değiştirebilir veya sayaç değerinin sınırlarını belirleyebilirsiniz. Ayrıca, görsel tasarımı CSS ile düzenleyerek daha estetik bir görünüm elde edebilirsiniz. İhtiyaçlarınıza bağlı olarak, sayaçın üzerine farklı işlevler ekleyebilirsiniz. Örneğin, sayaç belirli bir sayıya ulaştığında bir uyarı mesajı gösterebilirsiniz.
HTML Yapısı
Sayaç için HTML yapısını oluşturacağız. Sayacımızı gösterecek bir metin alanı ve artırma/azaltma düğmeleri içeren basit bir yapı kullanacağız. HTML yapısı:
HTML:
<div>
<button id="decrement">-</button>
<span id="counter">0</span>
<button id="increment">+</button>
</div>JavaScript Kodu
Sayaç işlevselliğini sağlamak için JavaScript kodu yazacağız. Düğmelere tıklama olaylarına yanıt vererek sayaç değerini artırma veya azaltma işlemlerini gerçekleştireceğiz. JavaScript kodu:
JavaScript:
const decrementButton = document.getElementById('decrement');
const counterElement = document.getElementById('counter');
const incrementButton = document.getElementById('increment');
let counterValue = 0;
decrementButton.addEventListener('click', () => {
counterValue--;
updateCounter();
});
incrementButton.addEventListener('click', () => {
counterValue++;
updateCounter();
});
function updateCounter() {
counterElement.textContent = counterValue;
}Sayaç Özelleştirme ve İyileştirme
Bu temel sayaç yapısını dilediğiniz gibi özelleştirebilirsiniz. Örneğin, başlangıç değerini değiştirebilir veya sayaç değerinin sınırlarını belirleyebilirsiniz. Ayrıca, görsel tasarımı CSS ile düzenleyerek daha estetik bir görünüm elde edebilirsiniz. İhtiyaçlarınıza bağlı olarak, sayaçın üzerine farklı işlevler ekleyebilirsiniz. Örneğin, sayaç belirli bir sayıya ulaştığında bir uyarı mesajı gösterebilirsiniz.
