Hesap Makinesi Projesi: Neden Daha Kolaydı Ama Engellerle Doluydu

Merhaba, ben Blazej,

Hesap Makinesi Projesi üzerinde çalışmak oldukça eğlenceliydi ve farklı bir deneyim olduğunu söyleyebilirim. Daha zor gibi görünen Etch-a-Sketch'ten farklı. O zaman bu nasıl mümkün olabilir?

Cevap, egzersizin zorluğunda değil, başka bir şeyde yatıyor sanırım. Hadi baştan başlayalım.

Hesap Makinesi Projesini Başlatma

Hesap Makinesi üzerinde çalışmaya 2 Mayıs 2024'te başladım. İlk oturum üç saatimi aldı ve bu süre zarfında onu kurup çalıştırmayı başardım. Öğle vaktiydi, bu yüzden son bir taahhütte bulunmaya, akşam yemeği yemeye ve egzersiz yapmaya karar verdim.

O öğleden sonra biraz daha kodlamak istedim çünkü arkadaşımın ertesi gün ziyarete geleceğini biliyordum ve o da üç gece kalacaktı.

Diğer kendini adamış Odinistler gibi ben de kodlamaya, özellikle de Foundations'ın en önemli projesi olduğuna inandığım Hesap Makinesi'ne ara vermek istemedim.

Beklenmedik İlhamlar

ForrestKnight'ın YouTube videosu karşıma çıktığında bilgisayarımı kapatmak üzereydim. Biraz izledim ve kodlamanın tadını çıkardığından bahsettikten hemen sonra durdum.

Bunu iyice düşündüm ve işte kodlamayı yeni bitirmiş ve hala kendime bu soruyu sıklıkla soran yeni başlayan biri olarak bakış açım.

Benim gibi çocukluğundan beri bilgisayara erişimi olan, birçok oyun oynayan ve işlerin nasıl yürüdüğüne dair temel bir anlayışa sahip biri için bu sorunun cevabı çok basit değil.

Ancak daha önce hiç kodlama yapmamıştım!

İlk Kodlama Deneyimi

Ancak şunu fark ettim ki, ne kadar çok kod yazarsam ve çalıştığını görürsem, süreçten o kadar keyif alıyorum. Bu özellikle genel olarak sorunsuz çalışan hesap makinesi için geçerliydi ve CİDDİ bir şekilde sıkışıp kalmaktan kaçınmayı başardım - yani çoğunlukla. Buna daha sonra değineceğim.

Bu proje, iki gün boyunca degrade renk değiştirme mantığını uygulamakta zorlandığım Etch-a-Sketch projesinden çok daha kolay geldi. Kodlama kesinlikle kolay değil, ancak bu projeye dört gün boyunca her gün yaklaşık 1,5 ila 2 saat ayırdım ve bu yönetilebilir ve ödüllendirici bir deneyimdi.

VSCode'u her açtığımda kendimi çok üretken hissettim ve bu da görevleri hızlı bir şekilde çözmeme yardımcı oldu. Üzerinde çalışırken en büyüleyici şey, bu alıştırmayı çözecek diğer seçenekleri de hayal edebilmemdi.

Kendimi çılgın bir Lego Technic araba yapan ve hangi özelliklerin tekrar ekleneceğini hayal eden bir çocuk gibi hissettim. Komik bir duygu.

Sürecin Keyfini Çıkarmak

Bununla tam olarak ne demek istiyorum? Dokuz ayrı düğme yapmak yerine, tüm rakam düğmeleri için olayları içeren tek bir işlev oluşturabileceğimi biliyordum.

Ancak bunu nasıl düzgün bir şekilde yapacağımı unuttum ve 9 farklı olanla devam etmeye karar verdim, ancak kendime geri dönüp bu sorunun nasıl çözüleceğine dair birkaç ders içeren belgeleri okuyacağıma söz verdim. Yaptığımı düşündüğüm gibi.

Yaklaşık beş saat daha bir şeye takılıp kalacağımı bekliyordum ama bu aslında hiç olmadı. 244 satır kodla çalışmasını sağladım.

CSS ile İlgili Zorluklar

Artık CSS ile oynamaya başlamanın ve bu projeye biraz stil vermenin zamanı gelmişti. İşte o zaman sıkışıp kaldım. JavaScript oluşturmaktan daha zor görünüyordu.

İnanamadım! Bu proje için Flexbox'ı kullanmam gerektiğini biliyordum ama düğmeler daha önce yaptığım Eskizden biraz farklı görünüyordu. Etch-a-Sketch'te bana döngüleri kullanarak bir ızgara yapmam söylendi:

Ne zaman Flexbox'a takılıp kalsam, her zaman Josh'un blog yazısına başvuruyorum. Nasıl çalıştıklarına dair daha iyi bir açıklama yok, IMHO.

Ancak tüm düğmeler eşit olmadığından hesap makinesinde işe yarayacağından emin değildim. Mesela 0'ın daha büyük olmasını istedim.

Makaleyi aşağı kaydırdım çünkü orada CSS Grid'den bahsedildiğini hatırladım. Aslında onu burada kullanmam gerekeceği ortaya çıktı.

Ayrıca Odin'in örnek olarak gösterdiği hesap makinesi de CSS Grid kullanılarak tasarlanmıştır.

CSS Izgarasını Keşfetmek

Bu noktada biraz kaybolmuştum çünkü hatırladığım kadarıyla ızgaraya hiç dokunmamıştık.

Google'da aramaya başladım. Ne buldum? Nasıl kullanılacağına dair oldukça gelişmiş açıklamalar içeren büyük bir makale. Bunun zamanı olmadığını düşündüm ve gridle daha sonra tanışacağımızı varsaydım.

Üstelik alıştırmada sadece Flexbox'tan bahsediliyordu çooook evet, UMARIM biz de grid'i öğreneceğiz. Aksi takdirde, bir noktada tek başıma bu konuya geri döneceğim.

KÜÇÜK GÜNCELLEME - ertesi gün Odin Discord'da şu yazıyı gördüm:

Son Düzenlemeler ve Kullanıcı Arayüzü Tasarımı

Birkaç div ile gitmeye ve düğmeleri HTML'de yeniden gruplandırmaya karar verdim

Başka bir çalışma oturumundan sonra hesap makinesi bir şekilde normal bir cihaza tanıdık gelmeye başladı.

Klavye Desteği Ekleme

Benim için son adım klavye desteğini yapmaktı.

Lanet olsun! Bu kolay değildi ve bu klavye tuşlarının nasıl çalıştığını anlamak için etkinlik dersine geri dönüp belgeleri birkaç kez okumam gerekti.

Olayların köpürmesi kafamı karıştırdığı için oldukça zordu. Düğmeleri tıklatacak 1 işlevi ve bunun için 2 çağrıyı yapmanın doğru anıydı. Biri fare 'tıklaması' için, ikincisi ise klavyenin 'tuşuna basılması' için.

Tüm rakamları ve eşittir düğmelerini sıralamayı başardım ancak mantığımı operatörün nesnesiyle değiştirmek zorunda kalacağım için operatörlerle gitmemeye karar verdim.

Daha sonra incelemem gerekirse bu kurulumu kavramak daha kolay görünüyor.

Ancak yanılıyor olabilirim, o yüzden bunu hafife almayın.

Bitmiş proje burada görülebilir:

HESAP MAKİNESİ

Düşünceler ve Öğrenilen Dersler

Buradaki ders neydi? Bir uygulama yapma ve onu tasarlama sürecinden keyif aldım ve etkinlikler hakkında ÇOK şey öğrendim. Bununla ekstra kredi sürecinden geçmenizi şiddetle tavsiye ederim!

Bu hikayeyi beğendiyseniz ve ipuçlarını faydalı bulduysanız daha fazla güncelleme ve kodlama ipucu için beni Twitter'da takip edin. Aşağıdaki yorumlarda kendi kodlama zorluklarınızı ve başarılarınızı duymayı çok isterim!