Merhaba arkadaşlar,
Bu yazıda çok basit kodlarla kısa bir sürede aşağıdaki resimde gördüğünüz gibi güzel görünümlü, web hesap makinesi ve dijital saatin nasıl yapılabileceğini göreceğiz.
Sırasıyla Html sonra Css ardından Javascript kodlarımızı yazacağız. Bu şekilde ilerlemek istememin sebebi bu projeyi insan vucüduna benzetmemden kaynaklıdır. ilk önce iskeleti oluşturup sonra bu iskelete rengi ile etini, sonrada hareket edebilmesi için kaslarını ekleyeceğiz. Bu şekilde adım adım ilerlememiz işimizi dahada kolaylaştıracaktır.
Hemen projemiz için bir klasör oluşturalım, içinede HTML, CSS, JS adında üç ayrı klasör daha oluşturalım böylelikle hem dosyalarımız birbirine karışmayacak hemde anlaşılması kolay bir proje olacak.
Dilerseniz projenin tamamını bu linkten indirip, görüntüleyebilirsiniz.
Just trying to be Coder
Bu yazıda çok basit kodlarla kısa bir sürede aşağıdaki resimde gördüğünüz gibi güzel görünümlü, web hesap makinesi ve dijital saatin nasıl yapılabileceğini göreceğiz.
Sırasıyla Html sonra Css ardından Javascript kodlarımızı yazacağız. Bu şekilde ilerlemek istememin sebebi bu projeyi insan vucüduna benzetmemden kaynaklıdır. ilk önce iskeleti oluşturup sonra bu iskelete rengi ile etini, sonrada hareket edebilmesi için kaslarını ekleyeceğiz. Bu şekilde adım adım ilerlememiz işimizi dahada kolaylaştıracaktır.
Hemen projemiz için bir klasör oluşturalım, içinede HTML, CSS, JS adında üç ayrı klasör daha oluşturalım böylelikle hem dosyalarımız birbirine karışmayacak hemde anlaşılması kolay bir proje olacak.
İlk olarak iskeletimizi HTML ile oluşturalım :
Html için oluşturduğumuz klasörün içine "index" adında bir html dosyası oluşturuyoruz.Aşağıdaki gibi kodları kendi .html dosyamıza yazıyoruz.
Ardından sıra geldi .css dosyamızı oluşturmaya :
Css için oluşturduğumuz klasörün içine "calc-style" adında styling dosyası oluşturup aşağıdaki kodları içine yazıyoruz.
Son olarak .js uzantılı sicript dosyamızı oluşturuyoruz :
Yine Javascript için oluşturmuş olduğumuz klasörün içine "calc-script" adında Javascript dosyası oluşturup aşağıda hazırlamış olduğum kodları dosyamıza yazıyoruz.
Kodları elimden geldiğince temiz ve basit yazmaya çalıştım, değişkenleride üç dosyada aynı şekilde adlandırmaya çaba gösterdim, umarım clean code olmuştur. Sizde bu kodları örnek alarak kendi isteğinize göre yazıları, renkleri değiştirerek kendi hesap makinenizi ya da saatinizi yapabilirsiniz.Dilerseniz projenin tamamını bu linkten indirip, görüntüleyebilirsiniz.
Just trying to be Coder
Yorumlar
Yorum Gönder