1'den N'ye kadar olan sayıların toplamını yapan JavaScript programı

Programı denemek için kutuya bir sayı yazın ve enter tuşuna basın.

0


 Programın kodları aşağıdaki gibidir

<input type="text" id="sayiKutu" />

<div id="sonuc">0</div>

<script>

  var eleman = document.getElementById("sayiKutu");

  eleman.addEventListener("keyup", function(event) {

    if (event.keyCode === 13) {

      var t = 0;

      var x = 1;

      while (x <= parseInt(eleman.value)) {

        t = t + x;

        x = x + 1;

      }

      document.getElementById("sonuc").innerHTML = t;

    }

  });

</script>




Saygılarımla...
Turgut ARSLAN

Sliderli Product Box Örneği

 

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>

<script>

window.addEventListener("load",function(){

 var parent;

 var imgOrd;

 var upParent;

  var allItems=document.getElementsByClassName("imageThumbsItem");


    for(i=0;i<allItems.length;i++){

    allItems[i].addEventListener("mouseover",function(){

          parent = this.parentElement; 

   imgOrd=Array.prototype.indexOf.call(parent.children, this);

   upParent=parent.parentElement;

   var underImgs=upParent.getElementsByTagName('img');

    for (j=0;j<underImgs.length;j++){

    underImgs[j].style.display="none";

    }

   underImgs[imgOrd].style.display="block";

});

}

});

</script>

<div class="productBox">

<div class="productImages">

  <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj_Asv63bj3E2If7jgm-_GoroyOFZpResKSWFf65VtkyJ9846nhBW0Zz7pfAkB2NQZtCszwqSbE-IKJdL5eNzGQsUxZ0lJrsQAZtHxSxRWvYpz8wiJzxGSngYEVlmgSRBayX09wh8rZR1g/s0/a1.jpg" class="productImage" />

        <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg57pTPjVZ8VfbO6fK_mTP03MfS_ND0WIbDW6q0vcBUWBHTJjId-6egNww95QMdzHMb0wB131Dmj-GLMzvusAgX7ZfKgRVP75BBagHAB9a-hvLYjWeD5R_UM-oC1E2pt-0K0LkOtJR3ZX4/s0/a2.jpg" class="productImage" />

        <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi9Z9xNRo0ZtsvNISWZwN_G4kELyF9FhjFDJVmMaKYbn7q-lJ_visRrWPyzyo2kbX3Su8hARurzZkO4BzLq_nsgcfPsgwMKuQeDYx90aEfz-nDXrbtgOVcXKjlSLmxeuK2chLJ_ZcNTzuk/s0/a3.jpg" class="productImage" />

        <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiRLx2sSCf2JKMPDCtMJGONO3wcq6YdHZ_5uf-aa9KE7xA6W2SmoHDDTkBChqY1PEjIxC7lpN66G_DtVMi2eRX1jLU_DqtyhhsFqwAyr1pfeeBVT5emo9NbfxVbc09NxcAlb4aPdB5-2zU/s0/a4.jpg" class="productImage" />

</div>

    <div class="imageThumbs">

    <div class="imageThumbsItem"></div>

        <div class="imageThumbsItem"></div>

        <div class="imageThumbsItem"></div>

        <div class="imageThumbsItem"></div>

    </div>

</div>

<div class="productBox">

<div class="productImages">

  <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiR63dmMfuGmzqa32XhiiufZcB2qqAYtf2q_s9pRl8tS7RjF2m5gPh12Wb6kyT-86VclBge1JXIL6ity5UizX6M9x0fmplSLWfE9sugLhJZq5mnLeakEfGtPzxTHPefF9i-avlr1Ky1ZZI/s0/b1.jpg" class="productImage" />

        <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjcGcaqGBrBYT4u-LRoBVwo4TtnMKcwlF3apcpNu9fjV3V2X8JYvz44S6He7_3CAgvMvMBpFZq2xg0fYDCTA7GL2ybC4MbLo66fzOemTGw_CagwBRZfV94IZ9Zpn1mD9z9UXnLI3CCPzgI/s0/b2.jpg" class="productImage" />

        <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg8x0-DWQex4dM63FrGec1ZcjVIitZO5Q2Y3j9lhpqs4FjWTwPL2OrQUhn8kX_kpec9POvZKbY9UWxpSpZ8TyD6HkeFUIq7IjpOd2krE5jW1c9x_pwAYFN9NBjClYj8epCfldy33lDYQTw/s0/b3.jpg" class="productImage" />

        <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhUBPUiKuvW9TM2noVoUt0onhU8zYCukU-vo2Hrhm-QBajI2US27BTQc72uZDxTefbunorwKCd0ys8IwPmnaouryysBuub4tqEOmBMhhXYM4JoHle1myXvJNNXNuophHb3NUBZOxJWVK08/s0/b4.jpg" class="productImage" />

</div>

    <div class="imageThumbs">

    <div class="imageThumbsItem"></div>

        <div class="imageThumbsItem"></div>

        <div class="imageThumbsItem"></div>

        <div class="imageThumbsItem"></div>

    </div>

</div>

<div style="display:block;width:100%;height:10px;clear:both;"> &nbsp;</div>




Saygılarımla...
Turgut ARSLAN

Babamı kaybedeli ne kadar zaman geçti?

B

Babamı 27 Ocak 2021 günü kaybetmiştim.


Salih Bey'in Ruhu için El Fatiha!

JS ve CSS ile HTML Elemanlarının Sıralamasını Nasıl Değiştiririz?

HTML elemanlarının sıralarını değiştirebilmeniz için kapsayıcı elemanının display değerinin flex olması gerekmektedir. Sonrasında javascript ile verdiğiniz order değerine göre sıralanacaktır.

Aşağıdaki kodlar butona basıldığında elemanların sırasının karışık olarak değişmesini sağlamaktadır.


<style>

  .kapsayici {

    display: flex;

    display: -webkit-flex;

    flex-direction: column;

    max-width: 92px;

    height: auto;

    margin: 0px auto;

    flex-wrap: nowrap;

    justify-content: flex-start;

    align-items: stretch;

    align-content: stretch;

  }


  .eleman,

  .karistirButon {

    padding: 3%;

    border: solid 1px #f00;

    margin: 2px;

    max-width: 92px;

    text-align: center;

  }


  .karistirButon {

    background-color: red;

    color: #fff;

    margin: 0px auto;

    margin-top: 5px;

    cursor: pointer;

    display: block;

    padding: 1%;

    max-width: 92px;


  }

</style>

<script>

  function siraDegistir() {

    var sira = 0;

    var siraliste = [];

    var i = 0;

    var elemanlar = document.querySelectorAll(".eleman");

    for (i = 0; i < elemanlar.length; i++) {

      sira = Math.floor(Math.random() * (elemanlar.length)) + 1;

      if (!siraliste.includes(sira)) {

        siraliste.push(sira);

        elemanlar[i].style.order = sira;

      } else {

        i--;

      }

    }

  }

</script>

<div class="kapsayici">

  <div class="eleman">1</div>

  <div class="eleman">2</div>

  <div class="eleman">3</div>

  <div class="eleman">4</div>

</div>

<div class="karistirButon" onclick="siraDegistir();">Sırayı Karıştır</div>


Bu kodların çalışır hali 


1
2
3
4
Sırayı Karıştır


Saygılarımla...
Turgut ARSLAN

JavaScript ile Bir Elemanın İçeriğinin En Başına Yeni Bir İçerik Eklemek

Bu işlemi yapan kodlar aşağıdaki gibidir 


<script>

window.onload=function(){

/*eklenecek içerik*/

var a = "<style>.eklenenKutu{display:table;max-width:350px;height:auto;;background-color:#00dd00;padding:2%;}.ekleneniIcerik{display:table-cell;text-align:center;width:100%;height:auto;vertical-align:middle;color:#fff;font-size:18px;font-weight:bold;font-family:Proxima}@media screen and (max-width:900px){.eklenenKutu{max-width:90%;width:55%;margin:5px auto;}.ekleneniIcerik{font-size:.18px;}}</style><div class=\"eklenenKutu\"><div class=\"ekleneniIcerik\">Bu eleman Javascript ile başka bir elemanın içeriğinin başlangıcına eklenmiştir.<\/div><\/div>";


/*Ekleneceği eleman*/

var b=document.querySelectorAll(".disKutu")[0];


/*eklemek istediğimiz içeriği ilgili elemanın içeriğinin başına ekleyen kod*/

b.insertAdjacentHTML('afterbegin', a);


}

</script>


<div class="disKutu">

<div style="display:block;width:450px;height:55px;">Bu kutudaki içerikten önce eklenecek</div>

</div>



Kodun canlı çalışan örneğini görmek için aşağıdaki butona basın.



Bu kutudaki içerikten önce eklenecek


Saygılarımla...
Turgut ARSLAN

CSS Hazır Basit Product Box Kodu(Transition Efektli)

Product Box'lar, E-Ticaret sitlerinde ürün kutusu olarak bilinen ve kategori sayfalarında ürünlerin gösterilmesi için kullanılan site elemanlarıdır. Kullanıcılar bu kutucuklardaki bilgilere bakarak ürünler hakkında özet bilgi edinirler. Tıkladıklarında ürün detay sayfasına yönlendirme yapar. Bazılarında sepete ekleme butonları ve çeşitli aksiyon elemanları bulunur. Bu örnekte temel seviyede bir ürün kutusu kodlaması yaptım. Basit kolay anlaşılır bir kodlar kullandım. Sadece hover etkisini basit transition ile daha şık yapmak için bir iki ufak CSS3 kodu kullandım. Kodlar aşağıdaki gibidir.

<style>
  .productBox {
    border: solid 1px #ddd;
    width: calc((100% - 10px)/4);
    min-width: 150px;
    min-height:340px;
    height: auto;
    display: block;
    font-family: Arial;
    float: left;
    margin: 5px;
    border-radius: 2%;
    -webkit-border-radius: 2%;
    -moz-border-radius: 2%;
    transition: all .5s;
    background: #fff;
  }

  .productBox:hover {
    border: solid 1px #ccc;
    box-shadow: rgba(0, 0, 0, 0.12) 0px 2px 16px 0px;
  }

  .productImg {
    max-width: 100%;
    height: auto;
    display: block;
    margin: 5px auto;
  }

  .productBox a {
    text-decoration: none;
    color: #717171;
  }

  .productName {
    font-size: 0.8rem;
    padding: 5px 7px;
    margin: 0px auto;
    display: block;
  }

  .productBox a:hover .productName {
    color: #141414;
  }

  .productSku {
    font-size: 10px;
    margin: 0px auto;
    padding: 0 7px;
  }

  .productPrice {
    padding: 5px 7px;
    font-size: 1rem;
    font-weight: bold;
    color: #439e4a;
  }

  .productOldPrice {
    padding: 1px 7px;
    font-size: 0.7rem;
    text-decoration: line-through;
    color: #999;
  }
</style>

<div class="productBox">
  <a href="#" title="CSS hazır ürün kutusu">
    <div class="pictureBox">
      <img src="/css-hazir-basit-product-box.jpg" alt="Ürün Fotoğrafı" class="productImg" />
    </div>
    <span class="productSku"> SKU : FFF333ddDDD</span>
    <div class="productName">
      Lorem ipsum dolor sit amet, consectetur adipiscing elit
    </div>
    <div class="productOldPrice">
      29.999,89 <small>TL</small>
    </div>
    <div class="productPrice">
      19.999,89 <small>TL</small>
    </div>

  </a>
</div>

Bu kodların canlı hali,





 
İsterseniz bu kutucukları yan yana koyarak bir ürün vitrini oluşturabilirsiniz..


Saygılarımla...
Turgut ARSLAN

Google Ads'te TBM Düşüren Bir Anahtar Kelime Stratejisi

Google Ads reklamlarının TBM maliyetleri enflasyon ve rekabetin etkisiyle giderek artmakta. Artık eskisi gibi ucuz CPC'lerle reklam yapm...