Bu konu çözüldü olarak işaretlenmiştir. Çözülmediğini düşünüyorsanız konuyu rapor edebilirsiniz.
Jack İşte

Jack İşte

Üstün
İlk 1.000!
Katılım
15 Aralık 2023
Mesajlar
2.755
Makaleler
3
Çözümler
27
Beğeniler
2.652
Yer
Avcılar/İstanbul
Merhaba arkadaşlar, HTML ve JavaScript (JS'i daha çok biliyorum) bilgim var ancak sadece kitap üzerinden çalıştığımdan dolayı gerçekçi projeler yapamıyorum. Ben de bu yüzden Gemini'den yardım alayım dedim. Başta güzel gidiyorduk, baya bir kısmı anladım ancak bir süre sonra kodları o kadar karışık yazmaya başladı ki hiçbir şey anlamamaya başladım. Amacım kodları incelemekti ancak çok karıştı ve sitede bir sürü hatalar meydana geldi. Siteyi (Dosyayı yani) düzeltmeme yardım eder misiniz? Hangi dosyaları düzeltirsem düzelebilir? Hatalar genel olarak şunlar:
  • Renk tuşu daha yukarıda ve tuşların olduğu dosyada değil.
  • Çek liste öğeleri kendine özel bir kısım kaplıyor, direkt nottaki metinin aşağısından devam etmiyor. Bu yüzden de çok koyunca metin gözükmüyor.
  • İçeriği sabitledikten sonra nottan çık-gir yapınca sabitli olduğunu unutuyor.
  • Son olarak her şey çok düzensiz, hiçbir şey anlaşılmıyor.
Normalde kendim yapmaya çalışırım ancak 3 gündür boş durmayayım diye bi' Lua dilinde bir şeyler yapmaya çalışıyorum, bi' JavaScript ile bir şeyler yapmaya çalışıyorum, onu bırakıyorum HTML yapıyorum. Aralarından da tek başarılı olduğum JavaScript oluyor genelde :D Bu yüzden kafam allak bullak oldu. Yardımcı olan herkese teşekkür ederim, dosya olarak link aşağıda.


Bu arada siteyi çalıştırmak için python -m http.server 8000 (Veya farklı bir port) komudu gerekiyor, diğer şekilde bazı özellikler çalışmıyor.
 
Son düzenleyen: Moderatör:
Çözüm
brkdnmz
Bahsettiğiniz hataların üzerinde durmak istedim:

Jack İşte dedi:
Renk tuşu daha yukarıda...
Genişletmek için tıkla...
Küçültmek için tıkla...

Bu tür tasarım sorunlarının neden oluştuğunu ve nasıl çözebileceğinizi daha rahat anlayabilmeniz adına size önerim, kullandığınız tarayıcıdaki geliştirici araçlarını kullanmak. Chrome için DevTools mesela, F12 ile açılan:

1753704251420.webp

Sayfada elementin üstüne geldiğinizde/tıkladığınızda elementin özelliklerini gösteren, alttaki DevTools penceresinin sol üstündeki şu mavi araç -etkinleştirdiğim için mavi- çok kullanışlı. Onun sayesinde sorunun renk tuşunda değil dörtlü araç takımının container'ında olduğunu görebiliyoruz. Gereksiz olduğunu düşündüğüm margin-top ve padding-top atanmış, onları silince ideal görüntüye kavuşabildim:

1753704556642.webp

Kaldırdığım (yoruma aldığım) özellikleri aşağıda görebilirsiniz:

CSS: 
.modal-add-controls {
    display: flex;
    align-items: center;
    gap: .75rem;
    /* padding-top: .5rem; */
    border-top: none !important;
    /* margin-top: .75rem; */
    flex-wrap: wrap;
    gap: .5rem;
    flex-shrink: 0;
}

Bu özellikleri kaldırmanın yol açtığı bir tutarsızlık göremedim.

Jack İşte dedi:
Çek liste ögeleri kendine özel bir kısım kaplıyor, direkt nottaki metnin aşağısından devam etmiyor. Bu yüzden de çok koyunca metin gözükmüyor.
Genişletmek için tıkla...
Küçültmek için tıkla...

O ögeleri metnin içinde tutabilmek için sanırım birtakım uğraştırıcı işler yapmak gerekiyor. Benim aklıma çok kolay bir çözüm gelmedi.

En azından çok öge koyunca metnin gözükmesini engellememesi için checklist-items-container elementine yükseklik sınırı ve bu sınırı aşınca yukarı-aşağı kaydırma özelliklerini ekleyebiliriz. Bu iki yeni özelliği CSS'te son 2 satır olarak ekledim:

CSS: 
#checklist-items-container {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  flex-shrink: 0;
  padding: 0;
  margin-top: 10px;
  border-top: none;
  max-height: 200px; /* bu */
  overflow: auto;    /* ve bu */
}

Örnek bir sonuç da bu oluyor:

1753705246430.webp

Daha sağlıklı çözümler düşünülebilir tabii, bu çözüm pencere yeterince yüksekken çalışıyor.

Kodunuzun güncellenmiş halini buradan inceleyebilirsiniz:




Size önerim, özellikle de öğrenme aşamasındayken yapay zekaya minimal düzeyde kod yazdırmanız. Çok işe yarar olmakla birlikte aşırı kullanımı öğrenme sürecinizi baltalayabilir. Kafanıza takılan soruları cevaplaması için kullanabilirsiniz ama işte bunun sonu, kodun çoğunluğunu yapay zekaya yazdırmaya varırsa sizin için faydalı olacağını düşünmüyorum. Sorunu çözmekle nedenini kavramak çok farklı şeyler.

Öğreniyorken ellerinizi bolca kirletmeniz gerekir ki yanlışlarınızı görün, düzeltmek için araştırma yapın, hatalarınızdan ders çıkarın... Önemli olan doğru kod yazmak değil, yanlış/istenmeyen kodu düzeltebilmek ki doğruya böyle ulaşırız. Bunu çoğunlukla kendiniz yaparsanız asıl o zaman öğrenirsiniz. Önünüze benzer sorunlar çıktığında kendi kendinize yeter hale gelirsiniz. Evet, gereken zaman artacak ama meyvesi de bol olacak.

Bu dediklerim, amacınız öğrenmekse geçerli. Projenizi hızlı bir şekilde hayata geçirmek istiyorsanız gerçekten işe yarar araçlar.
Tarihe göre sırala Puana göre sırala
Artı 0 Eksi
Jack İşte dedi:
Merhaba arkadaşlar, HTML ve JavaScript (JS'i daha çok biliyorum) bilgim var ancak sadece kitap üzerinden çalıştığımdan dolayı gerçekçi projeler yapamıyorum. Ben de bu yüzden Gemini'den yardım alayım dedim. Başta güzel gidiyorduk, baya bir kısmı anladım ancak bir süre sonra kodları o kadar karışık yazmaya başladı ki hiçbir şey anlamamaya başladım. Amacım kodları incelemekti ancak çok karıştı ve sitede bir sürü hatalar meydana geldi. Siteyi (Dosyayı yani) düzeltmeme yardım eder misiniz? Hangi dosyaları düzeltirsem düzelebilir? Hatalar genel olarak şunlar:
  • Renk tuşu daha yukarıda ve tuşların olduğu dosyada değil.
  • Çek liste öğeleri kendine özel bir kısım kaplıyor, direkt nottaki metinin aşağısından devam etmiyor. Bu yüzden de çok koyunca metin gözükmüyor.
  • İçeriği sabitledikten sonra nottan çık-gir yapınca sabitli olduğunu unutuyor.
  • Son olarak her şey çok düzensiz, hiçbir şey anlaşılmıyor.
Normalde kendim yapmaya çalışırım ancak 3 gündür boş durmayayım diye bi' Lua dilinde bir şeyler yapmaya çalışıyorum, bi' JavaScript ile bir şeyler yapmaya çalışıyorum, onu bırakıyorum HTML yapıyorum. Aralarından da tek başarılı olduğum JavaScript oluyor genelde :D Bu yüzden kafam allak bullak oldu. Yardımcı olan herkese teşekkür ederim, dosya olarak link aşağıda.


Bu arada siteyi çalıştırmak için python -m http.server 8000 (Veya farklı bir port) komudu gerekiyor, diğer şekilde bazı özellikler çalışmıyor.
Genişletmek için tıkla...
Küçültmek için tıkla...
Hocam ilk kısmı style kısmından Margin vererek düzeltebilirsiniz. Ben -18px vererek düzelttim. İkinci maddede ne dediğinizi anlamadım. 3. madde de bende sabitli kısmı çalışıyor. Sabitlediğim en başta duruyor.
 
Artı 0 Eksi
Bahsettiğiniz hataların üzerinde durmak istedim:

Jack İşte dedi:
Renk tuşu daha yukarıda...
Genişletmek için tıkla...
Küçültmek için tıkla...

Bu tür tasarım sorunlarının neden oluştuğunu ve nasıl çözebileceğinizi daha rahat anlayabilmeniz adına size önerim, kullandığınız tarayıcıdaki geliştirici araçlarını kullanmak. Chrome için DevTools mesela, F12 ile açılan:

1753704251420.webp

Sayfada elementin üstüne geldiğinizde/tıkladığınızda elementin özelliklerini gösteren, alttaki DevTools penceresinin sol üstündeki şu mavi araç -etkinleştirdiğim için mavi- çok kullanışlı. Onun sayesinde sorunun renk tuşunda değil dörtlü araç takımının container'ında olduğunu görebiliyoruz. Gereksiz olduğunu düşündüğüm margin-top ve padding-top atanmış, onları silince ideal görüntüye kavuşabildim:

1753704556642.webp

Kaldırdığım (yoruma aldığım) özellikleri aşağıda görebilirsiniz:

CSS: 
.modal-add-controls {
    display: flex;
    align-items: center;
    gap: .75rem;
    /* padding-top: .5rem; */
    border-top: none !important;
    /* margin-top: .75rem; */
    flex-wrap: wrap;
    gap: .5rem;
    flex-shrink: 0;
}

Bu özellikleri kaldırmanın yol açtığı bir tutarsızlık göremedim.

Jack İşte dedi:
Çek liste ögeleri kendine özel bir kısım kaplıyor, direkt nottaki metnin aşağısından devam etmiyor. Bu yüzden de çok koyunca metin gözükmüyor.
Genişletmek için tıkla...
Küçültmek için tıkla...

O ögeleri metnin içinde tutabilmek için sanırım birtakım uğraştırıcı işler yapmak gerekiyor. Benim aklıma çok kolay bir çözüm gelmedi.

En azından çok öge koyunca metnin gözükmesini engellememesi için checklist-items-container elementine yükseklik sınırı ve bu sınırı aşınca yukarı-aşağı kaydırma özelliklerini ekleyebiliriz. Bu iki yeni özelliği CSS'te son 2 satır olarak ekledim:

CSS: 
#checklist-items-container {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  flex-shrink: 0;
  padding: 0;
  margin-top: 10px;
  border-top: none;
  max-height: 200px; /* bu */
  overflow: auto;    /* ve bu */
}

Örnek bir sonuç da bu oluyor:

1753705246430.webp

Daha sağlıklı çözümler düşünülebilir tabii, bu çözüm pencere yeterince yüksekken çalışıyor.

Kodunuzun güncellenmiş halini buradan inceleyebilirsiniz:




Size önerim, özellikle de öğrenme aşamasındayken yapay zekaya minimal düzeyde kod yazdırmanız. Çok işe yarar olmakla birlikte aşırı kullanımı öğrenme sürecinizi baltalayabilir. Kafanıza takılan soruları cevaplaması için kullanabilirsiniz ama işte bunun sonu, kodun çoğunluğunu yapay zekaya yazdırmaya varırsa sizin için faydalı olacağını düşünmüyorum. Sorunu çözmekle nedenini kavramak çok farklı şeyler.

Öğreniyorken ellerinizi bolca kirletmeniz gerekir ki yanlışlarınızı görün, düzeltmek için araştırma yapın, hatalarınızdan ders çıkarın... Önemli olan doğru kod yazmak değil, yanlış/istenmeyen kodu düzeltebilmek ki doğruya böyle ulaşırız. Bunu çoğunlukla kendiniz yaparsanız asıl o zaman öğrenirsiniz. Önünüze benzer sorunlar çıktığında kendi kendinize yeter hale gelirsiniz. Evet, gereken zaman artacak ama meyvesi de bol olacak.

Bu dediklerim, amacınız öğrenmekse geçerli. Projenizi hızlı bir şekilde hayata geçirmek istiyorsanız gerçekten işe yarar araçlar.
 
Artı 0 Eksi
Çözüm

Benzer konular

mburakkarakas
HTML/CSS Tasarımına başladığım yeni web sitem sizce nasıl? (HTML/JS/CSS)
2
Mesaj
12
Görüntüleme
262
mburakkarakas
mburakkarakas
Z
HTML, CSS ve PHP dilleri nasıl öğrenilir?
2
Mesaj
12
Görüntüleme
300
TerabyteForever
TerabyteForever
Lorien
HTML-CSS-JS mi yoksa WordPress mi?
Mesaj
8
Görüntüleme
192
mertjr
mertjr
farfan
Hazır "HTML" site şablonu nasıl bulunur?
2
Mesaj
18
Görüntüleme
266
farfan
farfan

Yeni konular

Yeni mesajlar