Buradasın
HTML, CSS ve JavaScript ile Basit Hesap Makinesi Oluşturma Eğitimi
youtube.com/watch?v=uAcARynJ79gYapay zekadan makale özeti
- Kısa
- Ayrıntılı
- Bu video, bir eğitmen tarafından sunulan web geliştirme eğitim içeriğidir. Eğitmen, izleyicilere adım adım basit bir hesap makinesi uygulamasının nasıl oluşturulacağını göstermektedir.
- Video, HTML, CSS ve JavaScript kullanarak basit bir hesap makinesi oluşturma sürecini kapsamaktadır. İlk olarak index.html, style.css ve app.js dosyaları oluşturulur, ardından CSS ile tasarım yapılır ve son olarak JavaScript ile fonksiyonellik eklenir. Eğitmen, buton oluşturma, tıklama olayları ekleme ve hesaplama işlemlerinin nasıl gerçekleştirileceğini detaylı şekilde anlatmaktadır.
- Oluşturulan hesap makinesi, numerik tuşlar ve işlem tuşları (artı, eksi, çarpma, bölme ve eşit) içeren basit bir arayüze sahiptir. Video sonunda eğitmen, oluşturulan hesap makinesinin çalıştığını test etmektedir.
- 00:01Basit Hesap Makinesi Projesi
- Videoda basit bir hesap makinesi yapımı gösterilecek.
- Hesap makinesi basit bir arayüze sahip olacak ve numerik tuşlar bulunacak.
- İşlemler ekranımıza yansıtılacak ve sonuçlar hesaplanacak.
- 01:13Proje Hazırlığı
- Proje için index.html, style.css ve app.js dosyaları oluşturuluyor.
- HTML dosyasında temel yapı oluşturuluyor ve CSS dosyasına link veriliyor.
- Hesap makinesi için "calculator" div'i oluşturuluyor ve içinde "display" ve "buttons" section'ları yer alacak.
- 04:12CSS Stil Uygulamaları
- Tüm elementlerin margin'i kaldırılıyor ve taşma engellenecek.
- Body'e genişlik ve yükseklik değerleri veriliyor ve arka plan rengi ayarlanıyor.
- Calculator div'i pozisyonlandırılıyor ve merkeze yerleştiriliyor.
- 06:31Hesap Makinesi Stil Uygulamaları
- Calculator div'e padding, display flex ve flex-direction column özellikleri veriliyor.
- Border ve border-radius özellikleri ile kenarlar ve köşeler biçimlendiriliyor.
- Display section'a genişlik, border, arka plan rengi ve yazı yönü ayarlanıyor.
- 10:14Butonlar İçin Stil Uygulamaları
- Butonlar için margin-top değeri veriliyor ve display grid özelliği uygulanıyor.
- Grid template columns ile butonların düzeni belirleniyor.
- Butonlara yükseklik, genişlik, font size ve cursor pointer özellikleri veriliyor.
- 12:05JavaScript Kodlaması
- app.js dosyasına geçiliyor ve kodlama başlıyor.
- Butonlar ve display elementleri document.querySelector ile seçiliyor.
- 12:44JavaScript ile Hesap Makinesi Oluşturma
- Eğitmen, JavaScript bölümünde bir hesap makinesi oluşturmayı anlatıyor.
- Hesap makinesi için numara pad paneli, üç rakamlı hesaplama işareti, nokta, eksi işareti, eşit ve sıfırlama tuşları bulunuyor.
- Eğitmen, "ledVal" adında bir değişken tanımlıyor ve başlangıçta sıfır değerini veriyor.
- 15:03Butonların Oluşturulması
- Butonlar için "document.createElement" metodu kullanılarak butonlar oluşturuluyor.
- Oluşturulan butonlara "textContent" özelliği ile değerler atanıyor.
- Tüm butonlar "document.querySelectorAll" ile alınıp, her birine "click" olayı ekleniyor.
- 16:58Butonlara Tıklama Olayı
- Tıklanan butonun değerini ekranda göstermek için "event.target.textContent" kullanılıyor.
- "kalkülate" adında bir fonksiyon oluşturuluyor ve tıklanan butonun değerini alıyor.
- Eğer tıklanan buton "C" ise, "ledVal" değişkeni sıfırlanıyor ve ekranda gösteriliyor.
- 19:13Hesaplama İşlemleri
- Eğer tıklanan buton "C" değilse, "ledVal" değişkenine değer ekleniyor ve ekranda gösteriliyor.
- Dizideki virgül karakterlerini kaldırmak için "join('')" metodu kullanılıyor.
- Eşit tuşuna basıldığında, "eval" metodu kullanılarak hesaplama yapılıyor ve sonucu ekranda gösteriyor.
- 22:29Video Kapanışı
- Eğitmen, videoyu beğenenlerin like tuşuna basmalarını ve kanala abone olmalarını istiyor.
- Bir sonraki videoda buluşma dileğiyle izleyicilere iyi günler diliyor.