jQuery addClass example

Change class name on click in jQuery

by Dhanck

HTML

<link href="https://fonts.googleapis.com/css?family=Montserrat&display=swap" rel="stylesheet">

<div class="header">Scrabble</div>

<div id="Players">
  <div class="num_players_title">Number of Players</div>
  <div class="num_players_group">
    <span class="num_players">1</span>
    <span class="num_players">2</span>
    <span class="num_players">3</span>
    <span class="num_players">4</span>
  </div>
</div>

<div id="board"></div>

CSS

* {
  font-family: 'Montserrat', sans-serif;
}

body {
  background: #3ec57f;
}

.header {
  text-transform: uppercase;
  color: #fff;
  font-weight: 600;
  font-size: 22px;
}

.card {
  width: calc(50% - 32px);
  border: 1px solid #b7b7b7;
  float: left;
  padding: 10px;
  margin: 5px;
  background: #f6f7cf;
}

.score {
    height: 34px;
    width: calc(100% - 90px);
    margin-right: 10px;
    border-radius: 8px;
    border: 1px solid #3ec57f;
    padding-left: 10px;
}
.new-score {
    display: flex;
    justify-content: space-between;
}

.points {
  width: 100%;
  height: 250px;
  overflow: auto;
}

.total {
  float: right;
  margin-top: -35px;
  margin-right: -20px;
  background: #2795ee;
  padding-top: 15px;
  border-radius: 50%;
  width: 50px;
  height: 35px;
  text-align: center;
  color: #fff;
  font-weight: 600;
}

.add {
  background: red;
}

.btn {
  background: #ece1a7;
  display: inline-block;
  padding: 10px;
  border-radius: 8px;
  cursor: pointer;
}

.num_players_group {
  display: flex;
  justify-content: space-around;
  margin: 20% 0px;
}

.num_players {
  background: #0084ff;
  text-align: center;
  padding: 10px 10%;
  border-radius: 8px;
  color: #fff;
  font-weight: 600;
}

.num_players_title {
  text-align: center;
  color: #fff;
  font-weight: 600;
  margin-top: 20%;
}

JavaScript

$('.num_players').click(function() {
  var counts = $(this).text();
  //alert(counts);
  for (var i = 0; i < counts; i++) {
    $("#board").append("<div class='card'><div contenteditable='true'>Name</div><span class='total'>0</span><div class='points'></div><input type='number' class='score' name='score'><span class='add btn'>+ Add</span> </div>");
  }
  $('#Players').hide();
});

$(document).on('click', '.add', function() {
  var totalScore = $(this).closest("div.card").find(".total").text();
  var score = $(this).closest("div.card").find("input[name='score']").val();
  var newTotal = parseFloat(totalScore) + parseFloat(score);
  $(this).closest("div.card").find(".total").text(newTotal);
  $(this).closest("div.card").find(".points").append('<div class="new-score">' + score + '<span class="remove">x</span></div>');
  $(this).closest("div.card").find("input[name='score']").val("");
});

$(document).on('click', '.remove', function() {
	var totalScore = $(this).closest("div.card").find(".total").text();
  var score = $(this).parent().text().slice(0,-1);
  var newTotal = parseFloat(totalScore) - parseFloat(score);
  $(this).closest("div.card").find(".total").text(newTotal);
  $(this).parent().remove();
});