Untitled

<html lang="en"><head><title>bill</title>
  <style>
      .spin {
        display: inline-block;
    }
    .spin span {
        display: inline-block;
        width: 20px;
        height: 22px;
        text-align: center;
        padding-top: 2px;
        background: #ff0;
        border: 1px solid #aaa;
        border-radius: 0 4px 4px 0;
        cursor: pointer;
    }
    .spin span:first-child {
        border-radius: 4px 0 0 4px;
    }
    .spin input {
        width: 150px;
        height: 20px;
        text-align: center;
        font-weight: bold;
    }
  </style>
  <script>

    // sir ye code yahan run ni ho raha lakin jb is ko spearte file main
    // run krta hon to phir run ho jata ha
    // code start


     var spins = document.querySelectorAll(".spin");
console.log(spins);
for (var i = 0 ; i < spins.length ; i++) {
    var spin = spins[i];
    var span = spin.querySelectorAll(".spn");
    var input = spin.querySelectorAll("#numbers")[0];

    input.onchange = function() { input.value = +input.value || 0; };
    span[0].onclick = function() { input.value = Math.max(0, input.value - 1); };
    span[1].onclick = function() { input.value -= -1; };
}


// code end
// ye code counter k liye ha jo yellow color main ha....


    // var submitfun = document.getElementById("sub");
    // submitfun.addEventListener('click', sub);
      function sub(){
    event.preventDefault();

    var first = document.querySelectorAll(".rad1");
    var second = document.querySelectorAll(".rad2");
    var third =  document.querySelectorAll(".rad3");
    var fourth = document.querySelectorAll(".rad4");
    var chkfirst = document.querySelectorAll(".chk1");
    var chksecond = document.querySelectorAll(".chk2");
    var chkthird = document.querySelectorAll(".chk3");
    var chkfourth = document.querySelectorAll(".chk4");
    var radoutput = ''
    var chkoutput = ''

    first.forEach(function(rad){
       if(rad.checked){
          radoutput += rad.value + " and ";
       }
    });
    second.forEach(function(rad){
      if(rad.checked){
        radoutput += rad.value + " and ";
      }
    });
    third.forEach(function(rad){
     if(rad.checked){
       radoutput += rad.value + " and ";
     }
    });
    fourth.forEach(function(rad){
     if(rad.checked){
       radoutput += rad.vlaue + " ";
     }
    });
    chkfirst.forEach(function(chek){
     if(chek.checked){
       chkoutput += chek.value + " and ";
     }
    });
    chksecond.forEach(function(chek){
     if(chek.checked){
       chkoutput += chek.value + " and ";
     }
    });
    chkthird.forEach(function(chek){
     if(chek.checked){
       chkoutput += chek.value + " and ";
     }
    });
    chkfourth.forEach(function(chek){
     if(chek.checked){
       chkoutput += chek.value + " ";
     }
    });
    var inptxt = document.getElementsByClassName("inp")[0].value;
    var rst = document.getElementsByClassName("result")[0];
      rst.innerHTML = radoutput + "<br>";
      rst.innerHTML += chkoutput + "<br>";
      rst.innerHTML += inptxt + "<br>";

      }


  </script>


</head><body>
  <div class="main">
    <input class="rad1 rad" type="radio" value="sugar free" name="same">sugar free<br><br>
    <input class="rad2 rad" type="radio" value="sweet" name="same"> sweet<br><br>
    <input class="rad3 rad" type="radio" value="little sugar" name="same"> little sugar<br><br>
    <input class="rad4 rad" type="radio" value="stevia" name="same"> stevia<br><br>
    <hr>
    <input class="chk1 chk" type="checkbox" value="milk" name="milk"> milk<br><br>
    <input class="chk2 chk" type="checkbox" value="milk with fat" name="fat"> milk with fat<br><br>
    <input class="chk3 chk" type="checkbox" value="milk without fat" name="nofat">milk without fat<br><br>
    <input class="chk4 chk" type="checkbox" value="fat 3%" name="fat3"> fat3%<br><br>
    <input class="inp" type="text" value="" name="txt" placeholder="input text"><br><br>
    <div class="spin">
        <span class="spn">&ndash;</span>
        <input id="numbers" value="0" />
        <span class="spn">+</span>
    </div> <br> <br>
    <input type="submit" value="submit" onclick="sub();" id="sub" name=""></div>
    <div class="result"></div>

</body>
</html>