HTML5 · CSS3 · JavaScript

Web Tabanlı
Programlama Şablonu

Semantik işaretleme, responsive düzen ve DOM etkileşimleri üzerine kurulu örnek uygulama.

// temel konular

HTML5

Semantik Yapı

Header, main, section ve footer etiketleri kullanılarak anlamsal sayfa düzeni oluşturuldu.

CSS3

Grid & Responsive

Ekran boyutuna göre otomatik hizalanan grid sistemi ile her cihazda düzgün görünüm sağlandı.

DOM Yönetimi

Sayfa yenilenmeden veri güncelleyen event listener'lar ve fonksiyonlarla dinamik içerik üretimi.

// dinamik uygulama — sayaç

state.counter

Değişkeni aşağıdaki butonlarla güncelle

// işlem geçmişi burada görünür

// kaynak kod

sayac.js

// sayaç durum yönetimi
let count = 0;
const display = document.getElementById('counter-val');
const history = document.getElementById('history');
let log = [];

function change(val) {
  count += val;
  log.unshift(val > 0 ? `+${val}` : `${val}`);
  if (log.length > 5) log.pop();
  render();
}

function resetCounter() {
  count = 0;
  log = [];
  render();
}

function render() {
  display.textContent = count;
  display.className = count < 0 ? 'negative'
                      : count === 0 ? 'zero' : '';
  display.classList.add('bump');
  setTimeout(() => display.classList.remove('bump'), 100);
  history.textContent = log.length ? '// ' + log.join('  ') : '// işlem geçmişi burada görünür';
}

Web TabanlıProgramlama Şablonu

Semantik Yapı

Grid & Responsive

DOM Yönetimi

Site Önizlemesi

Web Tabanlı
Programlama Şablonu