Yeni başlayan biri olarak, küçük bir fikri tarayıcıda çalışır hâle getirmek öğrenmeyi somutlaştırır. Bu mini sayaçta HTML ile arayüzü kuracak, CSS ile düzenleyecek, JavaScript ile tıklamaları sayacağız.

1. HTML: düğmeyi ve sayacı ekle 

<button id="countButton" type="button">Tıkla</button> <p>Toplam tıklama: <span id="count">0</span></p>

HTML, sayfadaki düğmeyi ve sayının görüneceği alanı oluşturur. id değerleri JavaScript'in bu öğeleri bulmasını sağlar.

2. CSS: düğmeyi biçimlendir 

body { font: 1rem sans-serif; } #countButton { padding: 0.6rem 1rem; cursor: pointer; }

3. JavaScript: tıklamaları say 

const button = document.querySelector("#countButton"); const countLabel = document.querySelector("#count"); let count = 0; button.addEventListener("click", () => { count += 1; countLabel.textContent = count; });

Dosyaları aynı sayfada birleştirdiğinde düğmeye her tıklayışında sayaç bir artar. Bir şey çalışmazsa önce HTML'deki id değerlerinin JavaScript seçicileriyle aynı olduğunu kontrol et; sonra tarayıcı konsolundaki hata mesajına bak.

Kendin dene

  • Düğmenin yazısını değiştir.
  • CSS'e bir arka plan rengi ekle.
  • İkinci bir düğme ekleyip sayacı sıfırlamayı dene.

Küçük projelerle adım adım öğrenmek, kavramları ezberlemekten daha kalıcıdır. Sarcody'de HTML, CSS, JavaScript ve Python için Türkçe, uygulamalı ve interaktif dersleri inceleyebilirsin: https://sarcody.com/