Yeni Başlayanlar İçin JavaScript Projeleri: Bugün Kodlamaya Başlayın

Bir JavaScript eğitimini okumakla onu bitirmek tamamen farklı iki deneyimdir.

İlki üretken hissettirir. İkincisi ise gerçekten öğrendiğiniz yerdir. Bir süredir JS dersleriyle boğuşup duruyorsunuz ama yazdığınız kodlar hâlâ başkalarının egzersizlerinin içinde mi hapsolmuş durumda? Merak etmeyin, bu durum çok yakında değişecek.

Döngüleri bilmek, onlarla çalışan bir şey yapana kadar pek bir işe yaramaz. Eğitimler size kelimeleri öğretir. Projeler ise o dili konuşmanızı sağlar.

İşte karşınızda, nereden başlayacağınızı bilmeniz için her biri kısa bir kılavuz içeren yeni başlayanlar için 18 JavaScript projesi. Birini seçin, kodlayın ve ardından diğerine geçin.

Önce JavaScript Temellerini Sağlamlaştırın

Yeni başlayanlar için tüm JS projeleri; değişkenler, fonksiyonlar, koşullu ifadeler, döngüler, diziler, nesneler ve birkaç DOM metoduna dayanır. Eğer bunlar henüz refleks haline gelmediyse, proje geliştirmekten çok sözdizimiyle (syntax) savaşmaya vakit harcarsınız.

Coddy'nin JavaScript kursu tam olarak bunun için tasarlandı. Dilin temel mantığını adım adım ele alan beşer dakikalık dersler sunuyor. Kodunuzu doğrudan tarayıcıda yazıp çalıştırabiliyorsunuz. Kurulum yok, ortam yapılandırması yok, "önce Node yükleyin" derdi yok.

Kafanıza bir şey takıldığında, yapay zeka asistanımız Bugsy her derste yardıma hazır bekliyor.

Eğer aşağıdakileri gözünüzü kırpmadan okuyabiliyor, yazabiliyor ve açıklayabiliyorsanız hazırsınız demektir. Değilseniz, hazır olana kadar Coddy'deki temel JS derslerine göz atın.

• Değişkenler ve ilkel (primitive) tipler (string, number, boolean)
• if/else ve switch ifadeleri
• for, while ve for...of döngüleri
• Fonksiyonler ve arrow (ok) fonksiyonları
• Diziler ve yaygın metotlar (push, pop, map, filter, find)
• Nesneler (Objects) ve nokta/köşeli parantez gösterimi
• Temel DOM erişimi (querySelector, addEventListener, textContent)

Bunlar tamam mı? Harika. Hadi kodlamaya başlayalım!

Başlangıç Projeleri: Merhaba DOM

Bu projeler bilerek küçük tutulmuştur. Sadece bir veya iki konsepte odaklanırlar; böylece bir şeyler bozulduğunda hatayı hızla bulabilirsiniz. Ve sakın kulağa basit geliyor diye bunları es geçmeyin!

1. Klasik Sayaç (Counter)

Nedir: Ekranda artı ve eksi butonları olan bir sayı.

Neden faydalı: HTML, CSS ve JavaScript'i bir arada kullanan en küçük uygulamadır. Durum (değişen bir değişken), DOM güncellemeleri ve olay dinleyicilerine (event listeners) ilk adımınızı atacaksınız. Aşağı yukarı yirmi satırlık bir koddan bahsediyoruz.

Nasıl yapılır: Sayı için bir span, iki adet buton oluşturun. Bir let count = 0 değişkeni tanımlayın. Butonlara tıklama dinleyicileri ekleyerek sayıyı artırın veya azaltın, ardından span'in textContent değerini güncelleyin. Ekstra hedef: Bir sıfırlama (reset) butonu ekleyin ve sayının sıfırın altına düşmesini engelleyin.

2. Bahşiş Hesaplayıcı (Tip Calculator)

Nedir: Hesap tutarını ve bahşiş yüzdesini girip, bahşiş miktarını ve toplam tutarı gördüğünüz bir uygulama.

Neden faydalı: Form girdileriyle ve yeni başlayanların neredeyse her zaman takıldığı parseFloat ile tanışmanızı sağlar. Ayrıca NaN (Not a Number) kavramını unuttuğunuzda matematiksel işlemlerin ne kadar kolay bozulabileceğini fark edersiniz.

Nasıl yapılır: İki sayı girdisi (hesap, bahşiş yüzdesi), bir buton ve iki çıktı span'i oluşturun. Butona tıklandığında her iki girdiyi de sayıya dönüştürün (parse), hesaplamayı yapın, .toFixed(2) ile virgülden sonra iki basamağa yuvarlayın ve sonucu ekranda gösterin. Ekstra hedef: Hesabı kişiler arasında paylaştırma seçeneği ekleyin.

3. Renk Paleti Oluşturucu (Color Palette Generator)

Nedir: Bir butona tıklayarak hex koduyla birlikte rastgele yeni bir renk elde ettiğiniz bir araç.

Neden faydalı: Rastgele sayılar, template literals (şablon dizimleri) ve satır içi (inline) stilleri tek bir küçük uygulamada birleştirir. Görsel bir çıktı almak süreci eğlenceli kılar.

Nasıl yapılır: 0 ile 255 arasında üç kez rastgele tam sayı üreten ve ardından rgb(${r}, ${g}, ${b}) şeklinde bir string döndüren bir fonksiyon yazın. Bu değeri renk kutusunun arka plan rengi (background color) olarak ayarlayın. Ekstra hedef: Tek bir renk yerine beşli bir renk paleti oluşturun.

4. Rastgele Alıntı Oluşturucu (Random Quote Generator)

Nedir: Ekranda gösterilen alıntıyı, hazırladığınız diziden rastgele seçilen başka bir alıntıyla değiştiren bir buton.

Neden faydalı: Diziler ve Math.random ile pratik yapmanızı sağlar. Ayrıca arkadaşlarınızla paylaşabileceğiniz hızlı ve keyifli bir projedir.

Nasıl yapılır: text (metin) ve author (yazar) özelliklerine sahip alıntı nesnelerinden oluşan bir dizi tanımlayın. Butona tıklandığında rastgele bir indeks seçin ve ilgili iki elementi güncelleyin. Ekstra hedef: Alıntıyı doğrudan Twitter'da paylaşmayı sağlayan bir "bunu tweetle" bağlantısı ekleyin.

5. Dijital Saat (Digital Clock)

Nedir: Ekranda her saniye güncellenen güncel saat.

Neden faydalı: İleride sürekli kullanacağınız setInterval ve Date nesnesiyle burada tanışırsınız. Tek haneli dakika ve saniyelerin başına sıfır eklemek (padding) kendi içinde tatlı bir bulmacadır.

Nasıl yapılır: new Date() değerini okuyan, saat, dakika ve saniyeyi biçimlendiren ve bunları bir span içine yazan bir fonksiyon oluşturun. Bu fonksiyonu setInterval(updateClock, 1000) içine alın. Ekstra hedef: 12 saatlik ve 24 saatlik formatlar arasında geçiş yapmayı sağlayan bir buton ekleyin.

6. Vücut Kitle İndeksi (VKİ) Hesaplayıcı (BMI Calculator)

Nedir: Boy ve kilo bilgilerini girerek VKİ değerini ve buna karşılık gelen kategoriyi (zayıf, normal, kilolu vb.) öğrendiğiniz bir araç.

Neden faydalı: Koşullu ifadelerin (if/else) hangi etiketin gösterileceğini seçtiği gerçek hayattan bir örnektir. Ayrıca temiz bir form düzeni tasarlamak için harika bir fırsattır.

Nasıl yapılır: Boy (cm) ve kilo (kg) için sayı girdileri oluşturun. Form gönderildiğinde standart formülle VKİ'yi hesaplayın, bir if/else zinciriyle kategoriyi belirleyin ve her iki değeri de ekranda gösterin. Ekstra hedef: Metrik ve emperyal (inç/libre) birimler arasında geçiş yapma seçeneği ekleyin.

Orta Seviye Projeler: Daha Fazla Hareketli Parça

Birkaç proje yaptıktan sonra bazı kalıpların tekrar ettiğini fark edeceksiniz. Bir butona tıklanır, bir değişken değişir, bir fonksiyon bu değişkene göre arayüzü günceller ve bu süreç tekrarlanır. İşte frontend geliştirmenin büyük kısmı bundan ibarettir. Bu projeler, aynı anda biraz daha fazla durumu (state) yönetmenizi gerektirir.

7. Yapılacaklar Listesi (To-Do List)

Nedir: Bir görev yazıp enter'a bastığınızda listeye eklenen, üzerine tıklayarak tamamlandı olarak işaretlediğiniz ve X butonuna basarak sildiğiniz bir uygulama.

Neden faydalı: Frontend kütüphanelerinin "merhaba dünya"sı olmasının bir sebebi var. Bir diziyi yönetecek, onu DOM'a aktaracak (render) ve iki veya üç olayı (event) kontrol edeceksiniz. Sıfırdan bir yapılacaklar listesi yapabiliyorsanız, artık tamamen yeni başlayan seviyesini geride bırakmışsınız demektir.

Nasıl yapılır: id, text ve done (tamamlandı) özelliklerine sahip görev nesnelerinden oluşan bir dizi tutun. Her değişiklikten sonra listeyi bir <ul> olarak yeniden oluşturun. Enter'a basıldığında yeni bir görev ekleyin (push). Tıklandığında tamamlandı durumunu değiştirin veya görevi diziden silin (splice). Ekstra hedef: Görevleri localStorage üzerinde saklayarak sayfa yenilendiğinde kaybolmalarını engelleyin.

8. Tur Süreli Kronometre (Stopwatch with Lap Times)

Nedir: Başlat, durdur, sıfırla ve tur (lap) butonları olan bir kronometre.

Neden faydalı: Dijital saatten daha zordur çünkü sisteme saati sormak yerine geçen süreyi kendi değişkeninizle yönetirsiniz. Date.now(), zaman aralıkları (intervals) ve duraklatma mantığına değineceksiniz.

Nasıl yapılır: Bir startTime (başlangıç zamanı) ve elapsed (geçen süre) biriktiricisi tutun. Başlatıldığında startTime = Date.now() yapın ve bir interval çalıştırın. Durdurulduğunda elapsed += Date.now() - startTime işlemini gerçekleştirin. Tur butonuna basıldığında o anki süreyi bir diziye ekleyin ve ekrana yazdırın. Ekstra hedef: Milisaniyeleri şık bir şekilde biçimlendirin.

9. Pomodoro Sayacı (Pomodoro Timer)

Nedir: 25 dakika çalışma, 5 dakika mola ve tekrar. Süre bittiğinde geçişi bildiren bir bip sesi.

Neden faydalı: Yeni başlayanlar için harika bir durum makinesi (state machine) örneğidir. "Çalışma", "mola" veya "duraklatıldı" durumlarındasınızdır ve arayüz hangi modda olduğunuza göre değişir.

Nasıl yapılır: Kronometredeki interval mantığını kullanın ancak bu kez geriye doğru sayın. Hangi modda olduğunuzu takip edin. Sayaç sıfıra ulaştığında modu değiştirin ve new Audio('beep.mp3').play() ile kısa bir ses oynatın. Ekstra hedef: Gün içinde tamamlanan çalışma seanslarını gösteren bir sayaç ekleyin.

10. Bilgi Yarışması Uygulaması (Quiz App)

Nedir: Sonunda size skorunuzu gösteren çoktan seçmeli bir bilgi yarışması.

Neden faydalı: Dizi döngülerini, koşullu ifadeleri ve küçük bir "ekran durumu" (mevcut soru, sonuç ekranı) mantığını birleştirir.

Nasıl yapılır: text, options (seçenekler) ve correctIndex (doğru cevap indeksi) özelliklerine sahip soru nesnelerinden oluşan bir dizi tanımlayın. Her seferinde tek bir soru gösterin. Cevaba tıklandığında correctIndex ile karşılaştırın, skoru artırın ve sonraki soruya geçin. Sorular bittiğinde sonuç ekranını gösterin. Ekstra hedef: Her soru için bir süre sınırı ekleyin.

11. Şifre Oluşturucu (Password Generator)

Nedir: Belirli bir uzunluk ve karakter türleri seçerek rastgele güvenli bir şifre oluşturduğunuz bir araç.

Neden faydalı: String (metin) manipülasyonu, rastgelelik ve onay kutusu (checkbox) girdilerini bir araya getirir. Ayrıca pratik projelerinde nadir görülen bir şekilde, gerçekten işe yarar bir araçtır.

Nasıl yapılır: Dört farklı karakter havuzu oluşturun (küçük harf, büyük harf, sayılar, semboller). Seçilen onay kutularına göre aktif havuzları birleştirin. Belirlenen uzunluk kadar döngü kurarak birleştirilmiş havuzdan rastgele karakterler seçin. Ekstra hedef: Şifrenin ne kadar güçlü olduğunu gösteren bir şifre gücü göstergesi ekleyin.

12. Form Doğrulayıcı (Form Validator)

Nedir: Geçersiz alanları kırmızıyla vurgulayan ve her birinin altında hata mesajı gösteren bir kayıt formu.

Neden faydalı: Gerçek dünyadaki JS projelerinde bu işlem çok sık yapılır. Düzenli ifadeler (Regex), odaklanma olayları (focus/blur events) ve DOM manipülasyonu tanıdık bir form düzeninde bir araya gelir.

Nasıl yapılır: Her alan için küçük doğrulama fonksiyonları yazın (e-posta formatı, şifre uzunluğu, şifre eşleşmesi). Giriş alanından çıkıldığında (on blur) doğrulayıcıyı çalıştırın, girdiye bir sınıf (class) ekleyip çıkarın ve hata span'ini güncelleyin. Form gönderildiğinde, yalnızca tüm doğrulamalar başarılıysa işleme devam edin. Ekstra hedef: İlk odak kaybından (blur) sonra canlı doğrulama (live validation) yapın.

Mini Oyunlar: İşin Eğlenceli Kısmı

Oyunlar; sürekli değişen durumlar, zamanlama ve etkileşim içerdiğinden becerilerinizi bir üst seviyeye taşır. Bir tuval (canvas) üzerinde pikselleri ilk kez hareket ettirdiğinizde, JavaScript'in gerçekte ne işe yaradığını çok daha iyi kavrayacaksınız.

13. Taş Kağıt Makas (Rock Paper Scissors)

Nedir: Taş, kağıt veya makas seçtiğiniz, bilgisayarın da bir seçim yaptığı ve kazananın belirlendiği klasik oyun.

Neden faydalı: Koşullu ifadeler ve rastgelelik üzerine, tatmin edici bir kazanma/kaybetme anı sunan temiz bir pratik çalışmasıdır.

Nasıl yapılır: Oyuncunun seçimi için üç buton oluşturun. Tıklandığında bilgisayarın da aynı üç seçenek arasından rastgele bir seçim yapmasını sağlayın. Sonucu belirlemek için basit bir eşleştirme mantığı (veya iç içe if/else) kullanın. Turlar boyunca galibiyet ve mağlubiyetleri takip edin. Ekstra hedef: Beş turda biten ve sonunda bir zafer ekranı gösteren bir sistem kurun.

14. XOX Oyunu (Tic-Tac-Toe)

Nedir: Aynı ekranda iki oyuncunun sırayla oynadığı klasik 3x3 karelik oyun.

Neden faydalı: 9 elemanlı tek boyutlu bir diziyi 2D bir ızgara gibi kullanmayı ve kazanma koşullarını kontrol etme mantığını öğretir. Bu kadar ikonik bir projeyi tamamlamak harika hissettirir.

Nasıl yapılır: Dokuz hücre oluşturun. Sıranın kimde olduğunu takip edin. Bir hücreye tıklandığında, mevcut oyuncunun işaretini yerleştirin ve sekiz olası kazanma çizgisini kontrol edin. Biri eşleştiğinde kazananı belirten bir afiş gösterin. Ekstra hedef: Boş hücrelerden rastgele seçim yapan basit bir yapay zeka rakip ekleyin.

15. Hafıza Oyunu (Memory Match)

Nedir: Ters çevrilmiş kartlardan oluşan bir ızgara. İki karta tıklarsınız; eşleşirlerse açık kalırlar, eşleşmezlerse geri kapanırlar.

Neden faydalı: Dizi karıştırma (shuffling), zaman aşımları (timeouts) ve net bir kazanma koşulu içerir. "Bir saniye sonra geri kapat" mantığını ilk kez kurduğunuzda, setTimeout fonksiyonunu gerçekten anlamış olacaksınız.

Nasıl yapılır: Çiftler oluşturmak için bir dizideki değerleri kopyalayın, Fisher-Yates algoritmasıyla karıştırın. Kartları ters şekilde ekrana yerleştirin. Tıklandığında kartı açın. İki kart açıldığında bunları karşılaştırın; eşleşirlerse kilitleyin, eşleşmezlerse kısa bir gecikmenin ardından ikisini de geri kapatın. Tüm çiftler eşleştiğinde oyunu bitirin. Ekstra hedef: Hamle sayacı ve localStorage üzerinde en iyi skor takibi ekleyin.

16. Sayı Tahmin Oyunu (Number Guessing Game)

Nedir: Bilgisayarın 1 ile 100 arasında bir sayı tuttuğu, sizin tahmin ettiğiniz ve doğruyu bulana kadar bilgisayarın "daha yüksek" veya "daha düşük" diyerek sizi yönlendirdiği bir oyun.

Neden faydalı: Basittir ancak girdi yönetimini, karşılaştırmaları ve her yerde karşınıza çıkacak olan "doğru olana kadar döngüye al" mantığını öğretir.

Nasıl yapılır: Bir kez hedef sayı üretin. Tahminleri takip edin. Her tahminde hedefle karşılaştırıp geri bildirim mesajını güncelleyin. Doğru tahmin yapıldığında girdi almayı durdurun. Ekstra hedef: Oyuncuyu yedi tahminle sınırlandırın ve tahmin hakkı bittiğinde bir oyun bitti (game over) ekranı gösterin.

17. Adam Asmaca (Hangman)

Nedir: Bilgisayarın bir kelime seçtiği, sizin harf harf tahmin ettiğiniz ve yanlış tahminlerin bir adam asmaca çizimini tamamladığı oyun.

Neden faydalı: String (metin) manipülasyonundan korkmayı bırakacağınız projedir. "Tahmin edilen harfler" ekranını oluşturmak size tek seferde split, map ve join metotlarını öğretir.

Nasıl yapılır: Bir diziden kelime seçin. Her harf için bir alt çizgi gösterin. Oyuncu bir harf seçtikçe eşleşen konumları açın veya yanlış tahmini kaydedin. CSS veya canvas kullanarak adam asmaca şeklini aşamalı olarak (genellikle en fazla altı yanlış tahmine izin verilir) çizin. Ekstra hedef: Kelimeleri herkese açık bir sözlük API'sinden çekin.

18. Yılan Oyunu (Snake)

Nedir: Yemi yedikçe uzadığınız, kendinize veya duvara çarptığınızda yandığınız klasik yılan oyunu.

Neden faydalı: Bu, yeni başlayanlar için "bölüm sonu canavarı" niteliğinde bir projedir. Bir ızgaraya (canvas veya CSS), klavye olaylarına, oyun döngüsüne (game loop), çarpışma algılamaya (collision detection) ve büyüme mekaniklerine değineceksiniz.

Nasıl yapılır: CSS veya <canvas> ile bir ızgara oluşturun. Yılanı koordinat nesnelerinden oluşan bir dizi olarak saklayın. Her oyun adımında (tick), yılanı mevcut yönde bir kare kaydırın. Yeni kafa konumu yemin konumuyla eşleşirse yılanı büyütün ve yeni bir yem oluşturun. Kafa duvara veya yılanın kendi gövdesine çarparsa oyunu bitirin. Yönü değiştirmek için yön tuşlarını dinleyin. Ekstra hedef: Skor arttıkça oyun hızını (tick rate) artırın.

Bonus: Hava Durumu Uygulaması

Nedir: Bir şehir girip güncel sıcaklığı ve hava durumu açıklamasını aldığınız bir uygulama.

Neden faydalı: Herkese açık bir API ve asenkron (async) kodlarla ilk gerçek tanışmanızdır. Herhangi bir ücretsiz hava durumu API'si işinizi görecektir.

Nasıl yapılır: Ücretsiz bir API anahtarı alın. Form gönderildiğinde, URL'de şehir adını kullanarak fetch isteği atın. Yanıtı bekleyin (await), JSON'ı ayrıştırın ve ilgili alanlarla DOM'u güncelleyin. Hatalı şehir isimlerinin arayüzü bozmaması için kodu bir try/catch bloğuna alın. Ekstra hedef: Beş günlük hava tahmini görünümü ekleyin.

Başladığınız Projeleri Nasıl Bitirirsiniz?

Yukarıdaki liste, yarısını yapıp kalanını bırakırsanız hiçbir işe yaramaz. Süreci tamamlamanıza yardımcı olacak birkaç ipucu:

• Sizi heyecanlandıran en küçük projeyi seçin. Heyecan başlamanızı, projenin küçük olması ise bitirmenizi sağlar. Sonra bunu tekrarlayın.
• Kapsamı değil, zamanı sınırlandırın (Time-box). Başlangıç projesi için kendinize odaklanmış bir veya iki saat verin. Bitiremezseniz bu bir başarısızlık değil, nerede takıldığınıza dair değerli bir geri bildirimdir.
• Önce kodlayın, sonra süsleyin. CSS'e dokunmadan önce çalışan ama çirkin olan sürümü tamamlayın. Süslü ama bozuk bir kod, çirkin ama çalışan bir koddan çok daha kötüdür.
• Eğitimden eğitime atlamayın (Tutorial-hopping). Aynı proje için üç farklı eğitim videosu izlemek, hiç kod yazmadan vakit kaybetmek demektir. Kusurlu da olsa kendiniz yazın, ardından bilmediğiniz kısımları araştırın.
• Proje geliştiremediğiniz günlerde temelleri pratik edin. Otobüste geçireceğiniz 5 dakikalık bir Coddy seansı bile çok değerlidir. Günlük seriler (streaks) birikerek büyük fark yaratır.

Bu son madde her şeyi birbirine bağlıyor. Projeler öğrendiklerinizi somutlaştırır ancak hepsi temellere dayanır. Kısa günlük dersler, projelerin gözünüzü korkutmasını engeller.

Coddy Bu Sürecin Neresinde?

Bu, projeleri geliştirmek için belirli bir aracı kullanmanız gerektiğine dair bir reklam değil. İstediğiniz editörü kullanın, tarayıcıda çalıştırın, dilediğiniz yerde barındırın.

Coddy'nin üstlendiği kısım ise çok daha öncesidir: JavaScript temellerinizi o kadar sağlamlaştırmak ki, "bilgi yarışması uygulaması yap" dendiğinde ".map metodunun ne işe yaradığını iki saat boyunca Google'da aramak" zorunda kalmayın.

Coddy; web, iOS ve Android platformlarında milyonlarca kişiye JavaScript öğretti. Nerede açarsanız açın aynı dersler, aynı ilerleme ve aynı Bugsy sizi bekliyor.

Ücretsiz sürüm, herhangi bir kuruluma gerek kalmadan tüm JS derslerini kapsar. Tek sınırınız, birkaç saatte bir dolan enerji sistemidir.

Sınırsız seans ve her soruda Bugsy'nin desteğini mi istiyorsunuz? Ücretli üyeliklerimiz, benzer platformların yaklaşık yarı fiyatınadır. Her halükarda kuralımız aynı: Önce temeller, sonra projeler.