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ı.

JS

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
0
// 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 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.join('  ');
}
// sponsor
ApexNW Hosting