Turgut Arslan

Sitelerde çokça kullanılan yukarı çık, başa dön vb. isimlerle adlandırılan buton kodu. <script>   var btnP =0;   window.addEventListener("load",function(){     btnP =window.scrollY;   });   window.addEventListener("scroll",function(){       scrollStat();   });   function scrollStat(){     btnP =window.scrollY;     if(btnP <=600 ){       document.getElementById("toTopBtn").className ="scrollToTopBtn";     }     else{       document.getElementById("toTopBtn").className ="scrollToTopBtn scrollToTopBtnShow";     }   }   function scrollToTop(){     window.scrollTo(0,0);     scrollStat();   }   </script>   <style>     *{       scroll-behavior: smooth;     }     .scrollToTopBtn{       position:fixed;       bottom:3%; ...

Bu çalışmamda JavaScript ile bir geri sayım sayacı yaptım. Input elemanına bitiş zamanını yazıp butona tıkladığınızda belirlediğiniz saate kaç saat kaldığını görebilirisiniz. Bu uygulamada input elemanına yapılan girişleri sınırlandırdım. Program klavyeden girilen değerin sayısal olup olmadığını kontrol ediyor ve girilen değerleri saat formatına göre HH:MM:SS şeklinde düzenliyor. Javascript mesai sayacının kodları aşağıdaki gibidir. Lütfen mesai bitiş saatini girin Kodları yazarken  https://www.w3schools.com/howto/howto_js_countdown.asp linkindeki sayfadan yararlandım Kodun çalışan örneğini buraya ekliyorum. Dilerseniz günün bir saatini girip kalan sürenin geriye doğru sayılmasını deneyimleyebilirsiniz. Lütfen mesai bitiş saatini girin

 SEO metni oluştururken işaretlemede kolaylık sağlamak amacıyla basit bir işaretleme editörü yaptım SEO Editör SEO Metin İşaretleme Editörü İstediğiniz işareti seçin P Em Strong H1 H2 H3 H4 H5 H6 İşaretle ve Ekle İşaretlemek istediğiniz metni girin Metnin işaretlemek istediğiniz yerlerini kutudan seçin ve yukarıdaki menüden etiket seçimini yapıp, İşaretle ve ekle butonuna basın. İşlem sonucu aşağıdaki gibi görünecektir.

  Sliderli Product Box Kodları :  <style> .productBox{ display:block; position:relative; width:25%; height:auto; float:left; box-sizing:border-box; border:solid 1px #dedede; border-radius:1rem; padding:.3rem; margin:.3%; background:#fff; } .productImages{ position:relative; width:100%; height:auto; display:block; padding-bottom:100%; box-sizing:border-box; } .productImage{ margin:auto; max-width:85%; height:auto; display:none; position:absolute; z-index:1; top:0; left:0; right:0; bottom:0;box-sizing:border-box;} .productImage:nth-child(1){display:block;} .imageThumbs{display:flex;width:100%;justify-content: center;margin:0px auto;} .imageThumbsItem{ display:block; border:solid 1px #dedede; width:1rem; height:1rem; border-radius:50%; margin:1%; box-sizing:border-box; cursor:pointer; } </style...

Saf Javascript ve CSS kullanarak basit bir büyüteç programı yazdım. Javascript Büyüteç Kodları: HTML Kodu; <div id="resimKabi">   <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgzzIU2K83cIbm0r_wB8lrZ5m3iSKchB-WolIEDvxFCz3BuYLB-g2_keCJ6QxbpfXBJ9tYjOQtWTn3sEub5tOycXxKFx_gK99s3jsUZckLWCyFEA_lab-T0A5voDQcXy0fLxjJopxevCa4/s1600/lotr-ring.jpg" />   <div id="buyutec"></div> </div> CSS Kodu; #resimKabi {   width: 100%;   height: auto;   display: block;   position: relative;   overflow: hidden; } #resimKabi img {   display: block;   width: 100%;   height: auto; } #buyutec {   width: 100px;   height: 100px;   background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgzzIU2K83cIbm0r_wB8lrZ5m3iSKchB-WolIEDvxFCz3BuYLB-g2_keCJ6QxbpfXBJ9tYjOQtWTn3sEub5tOycXxKFx_gK99s3jsUZckLWCyFEA_lab-T0A5voDQcXy0fLxjJopxevCa4/s1600/lotr-ring.jpg); ...