Analog Saat Yapımı | HTML CSS JS Projesi

Bu videomuzda HTML, CSS ve Javascript kullanarak analog saat , duvar saati yapımını öğreniyoruz. Çok kompleks olmayan fakat javascript üstünde biraz hesaplama ve yerel fonksiyonları bilmeyi gerektiren bir proje. Yeni başlayanlar için pratik yapmaya yarayacak fazlasıyla.

0:00 - Giriş
0:25 - HTML
1:14 - CSS
7:55 - Javascript
12:30 - Son konuşma ve Kapanış

[tanerdurkut]

Merhaba, öncelikle güzel ve detaylı anlatımınız için teşekkürler. CSS tarafında verdiğimiz translateX(-50%) değerini Javascript tarafında rotate ile eziyoruz. Aslında o yüzden kayıyor videoda düzeltmeye çalıştığınız kısmın sebebi bu. Düzeltmek için Javascript kodunda dereceyi ayarlarken translateX değerini de rotate değerinin yanında geçerek problemi halledebiliriz.

Örnek:
min.style.transform = `translateX(-50%) rotate(${180 + minute * 6}deg)`;

Ortadaki noktayı da tam olarak ortalamak için translateY değerini -50% olarak ayarladım CSS kısmında:
transform: translateX(-50%) translateY(-50%);

Son olarak gözüme çarpan bir yer; Javascript kodunda saat, dakika ve saniye için new Date() kodu ile 3 ayrı instance oluşturuluyor, bunun yerine tek bir instance yeterli olacaktır. 3 ayrı instance oluşturmanın çok sağlıklı olmadığını düşünüyorum, belki bu projede etkisi olmayabilir ancak objelerin ihtiyaçtan fazla kopyasını oluşturmak performans açısından, özellikle büyük projelerde, olumsuz etki oluşturabilir. Tekrar teşekkürler, başarılarınızın devamını dilerim :)

[atalaysezen]

Teşekkürler ellerine sağlık ne kadar teori olarak öğrensek de pratik yapmadan bir çok şey kafaya oturmuyor ellerinize sağlık.

[logoritmik]

Ellerinize sağlık. iki nacizane katkım olsun basitçe: transform-origin: top; dersek direkt en üst uçlar en üste gelir. bununla birlikte noktanın css değerinde top değerini %50 değil %49 alırsak hata tamamen çözülmüş olur. Çok yararlı bir video çözümü bulmak bile geliştirir bazen insanı teşekkür ediyorum.

[zeynepsuhedaiskifoglu]

Detayli anlatim icin teşekkürler, rica etsem daha cok js projeleri paylaşırmısınız

[turgutgilgil]

Daha fazla proje lütfen çok güzel anlatıyorsunuz hocam

[sadaharu_tr]

Video için teşekkürler güzel bir pratik oldu.

[ekremkocak]

dizi tadında izledim. güzel içerik olmuş elinize sağlık

[yavergazi]

sepersin eline, emegine saglik, tessekur ederim

[qweqwe]

bende hep otomatik herkes nasıl kaydediyor diyordum çok saol kodmatik reis

[erhunn]

Anlatım çok güzel ama videolardaki ses biraz daha fazla olsa daha güzel olacak.

[muhammeteminmetin]

setInterval(tiktak, 1000) yaptıktan sonra tiktak fonksiyonunu çağırmak için ()' ları neden kullanmadınız hocam? o ()'leri kullanıp kullanmamayı birkaç yerde gördüm ama anlamadım. Olayı nedir? eline sağlık teşekkürler

[enes_]

kardeş kodların ne işe yaradığını nerede ne iş görceğini açıklayarak anlatsan daha güzel olur izleyen açısından video uzun olsun önemli değil emeğine sağlık başarılar

[UnCorbasi]

Instagramda sayfaniz var mi ? Cok basarili bir sekilde anlatim yapmissiniz tesekkur ederim 👍🙏

[thesmym]

kardeşim eline sağlık bende yeniyim javascriptte bana pekiştiricek önerilerin varmı acaba ?

[kskserneyyiz]

Html css ve javascriptle web site yap bro

[boradurmaz]

Hocam html css js kullararak site yapımı serisi gelse iyi olur

[omerguven]

{} % rem url() bunlarin renkli olmasini hangi vs code eklentisiyle yaptiniz ?

[lyssithea]

Tebrik ederim çok güzel olmuş. Aklıma aynısını yapıp saatin arka planına Atatürk koymak geldi direkt :D Backgroundlar çakışacak muhtemelen, onu nasıl ayarlayabilirim?

[ezger]

Merhabalar brom. CSS kodunda tam olarak anlamadım transform origin : 25% 0 sebebi nedir anlatır mısın? Şimdiden teşekkürler.

[kemalsogut]

dikkatimi çeken bir şey oldu 60 dk geçmeden akrep ilerlemiyor.
bunu çözmek için ;

hours.style.transform = `rotate(${180 + (hour * 30)}deg)` hours.style.transform = `rotate(${180 + (minute * 0.5)}deg)`

işlemini uyguladım gözlemlediğim kadarıyla doğru çalışıyor ama
bildiğiniz daha iyi bir yöntem var mıdır ?