JSFiddle - React, Tailwind, and code Playground

by techydude

HTML

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <title>Counters-1</title>
    <script src="http://code.jquery.com/jquery-latest.min.js"></script>
    
    <script src="https://raw.github.com/janl/mustache.js/master/mustache.js"></script>
    
  </head>
  <body>
    
    
    
    <form id="create-counter">
      <button>+</button>
    </form>
    
    <div id="CounterContainer"></div>
    
    
    <script id="counter-template" type="text/html">
      <div class="counter">
       <div class="valueCount">{{txt}}</div>
      <button class="add">add</button>
      <button class="removeCounter">x</button>
      <input type="text" class="title" id="title" placeholder="[ enter title ]" autocomplete="off">
    </div>
    </script>
    
  </body>
</html>

CSS

html, body {
  margin: 0;
  padding:0; 
}

.counter {
  width:300px;
  height:200px;
  position:relative;
  float:left;
  margin:25px;
  border:1px dashed gray;
}

.valueCount {
  font-size:100px;
  position:absolute;
  top:10px;
  left:25px;
  text-align:left;
}

.add {
  position:absolute;
  right:50px;
  top:35px;
  padding:25px; 
  border:none;
  Text-transform:uppercase;
  font-size:25px;
  cursor:pointer;
}

.add:hover {
  background-color:#aeaeae;
  color:#fff; 
}

.title {
  position: absolute;
  bottom: 18px;
  left: 22px;
  font-size: 23px;
  text-transform: uppercase;
  width: 250px;
  border:none;
  text-align:center;
}

#add-new {
  width:150px;
  height:150px;
  position:relative; 
}

#create-counter button {
  border: none;
  font-size: 90px;
  padding: 0px 16px;
  margin: 0;
  line-height: 80px;
        margin-bottom:50px;

}

#create-counter button:hover {
  background-color:#000;
  color:#fff;
  cursor:pointer;
}

title#input {
  
  width: 250px;
  position: relative;
  margin: 0 auto;
}

button.removeCounter {
  position:absolute;
  right:5px;
  top:5px;
  background-color:#f6f6f6;
  border-radius:20px;
  border:none;
  cursor:pointer;
  -webkit-box-shadow:  1px 1px 3px 0px rgba(0, 0, 0, .25);
  box-shadow:  1px 1px 3px 0px rgba(0, 0, 0, .25);
  font-weight:normal;
  font-size:12px;
}

button.removeCounter:hover {
  background-color:#aeaeae;
  color:#fff; 
}

JavaScript

$(function() {
  var doc = $(document),
      CounterContainer = $("#CounterContainer"),
       //Container for all Counters
      container = $(".counter"),
       //Individual Conter Counters
      counter = $(".valueCount"),
      addBtn = $(".add"),
      valueCount = $(".valueCount").html(),
      addCounter = $("#create-counter"),
      counterTemplate = Mustache.compile($("#counter-template").html());

  if (localStorage.counterSave) {
    CounterContainer.html(localStorage.counterSave);
  }

  function save() {
    localStorage.counterSave = CounterContainer.html();
  }


  addCounter.submit(function(e) {

    // prevent page from refresing
    e.preventDefault();
    var value = 5;
    makeCounter(value);
    save();
  });

  function makeCounter(value) {
    $(counterTemplate({
      txt: value
    })).appendTo(CounterContainer);
  }



  CounterContainer.on("click", addBtn, function(valueCount) {
    var EachContainer = $("div.valueCount"),
        EachContainerValue = $("div.valueCount").html();
    
    EachContainer.html(++EachContainerValue);
    
    console.log("test");
    
    save();
  });
  
  doc.on("click", "button.removeCounter", function() {
    $(this).parent().remove();
    save();
  });

});