A Pen by Hürkan AKBIYIK

Thumbnail
This awesome code was written by hurkanakbiyik, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright hurkanakbiyik ©

Technologies

  • HTML
  • CSS
  • JavaScript
<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  <title>A Pen by  H├╝rkan AKBIYIK</title>
  
  
  
      <link rel="stylesheet" href="css/style.css">

  
</head>

<body>

  
  <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js'></script>

  

    <script  src="js/index.js"></script>




</body>

</html>

/*Downloaded from https://www.codeseek.co/hurkanakbiyik/a-pen-by-handxfcrkan-akbiyik-VbLoLv */
.myButton{
  margin : 8px;
  padding : 8px;
  background : #fff;
  border : 1px solid grey;
  border-radius  : 5px;
}

.myButton.selected{
  color : red;
  font-weight : bold;
}

.myButton.unSelected{
  color : green;
  font-weight : bold;
}

/*Downloaded from https://www.codeseek.co/hurkanakbiyik/a-pen-by-handxfcrkan-akbiyik-VbLoLv */
var selectedArray = [];

var myArray = [];
var num = 1000;
for(var i=0;i<50;i++){
  var num = num+3;
  myArray.push({
    name : num,
    selected : true
  });
  createButton(num);
}
$('.myButton').on('click',function(){
  var value = $(this).attr('db-data');
  var dbId = $(this).attr('db-id');
  if(value === 'unSelected'){
     if(selectedArray.length === 14){
        alert('mal');
     }else{
       selectedArray.push(dbId);
       $(this).attr('db-data','selected');
       $(this).attr('class','myButton selected');
     }
  }
  
  if(value === 'selected'){
    var ind = selectedArray.indexOf(dbId);
    if(ind > -1){
        selectedArray.splice(ind, 1);
    } 
    
     $(this).attr('db-data','unSelected');
     $(this).attr('class','myButton unSelected');
  }
});


////////////////////////////
function createButton(name){
  $('body').append('<button class="myButton unSelected" db-data ="unSelected" db-id="'+name+'">'+name+'</button>');
}

Comments