İlk web projen: HTML, CSS ve JavaScript ile tıklama sayacı

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/