jQuery addClass example

Change class name on click in jQuery

by GuNN

HTML

<!DOCTYPE html>
<html lang="en" dir="ltr">

<head>
  <meta charset="utf-8">
  <script src="./js/jquery-3.3.1.min.js"></script>
  <script src="./js/index.js"></script>
  <link rel="stylesheet" type="text/css" href="./css/index.css">
  <title>postit</title>
</head>

<body>
  <section id="board">
    <header class="">
      <button id="new">new</button>
    </header>
  </section>
</body>

</html>

SCSS

#board {
  width: 100%;
  height: 100%;
  background: #fff;
}

section header {
  height: 30px;
}

header button {
  width: auto;
  height: 24px;
}

.postIt {
  width: auto;
  height:auto;
  border: 1px solid #9d9d6b;
  position: absolute;
  margin:0;
  padding:0;
}

.postHead {
  background: rgb(218, 215, 0);
  width: 100%;
  height: 15px;
  position: relative;
}

.postBody {
  width: 100%;
  height: 100%;
}
textarea{
  position: relative;
  width:230px;
  height:175px;
  border:none;
  background: yellow;
  padding:0;
  margin:0;

}

JavaScript

$(function() {
  'use strict';
  var cnt = 0;
  $('#new').click(function() {
    cnt = makePostIt(cnt);
  });
});
var makePostIt = function(cnt) {
  cnt++;
  console.log(cnt);
  var postItBoard = $('<div class=\'postIt\'></div>');
  var postHeader = $('<div class=\'postHead\'></div>');
  // var postBody = $('<div class=\'postBody\'></div>');

  var postBody = $('<textarea id=\'d'+cnt+'\'></textarea>');

  postItBoard.append(postHeader);
  postItBoard.append(postBody);
  $('#board').append(postItBoard);
  postItBoard.css({
    'left': (cnt * 10) + 'px',
    'top': (cnt * 10) + 30 + 'px'
  });
  // postItBoard.draggable();
  postHeader.attr({'draggable':'true','ondragstart':'drag(event)'});
  return cnt;
};

function allowDrop(ev) {
    ev.preventDefault();
}

function drag(ev) {
    ev.dataTransfer.setData("text", ev.target.id);
}

function drop(ev) {
    ev.preventDefault();
    var data = ev.dataTransfer.getData("text");
    ev.target.appendChild(document.getElementById(data));
}