Add counter

ipsum/css/main.css

@@ -510,3 +510,11 @@ a[href="#"].running {
   background-color: rgba(255, 255, 255, 0.2);
   color: white;
 }
+
+.counter {
+  position: absolute;
+  left: 1rem;
+  bottom: 1rem;
+  padding: 1.5rem;
+  font-size: 2rem;
+}

ipsum/css/main.less

@@ -191,3 +191,12 @@ a[href="#"].running {
   background-color: rgba(255, 255, 255, 0.2);
   color: white;
 }
+
+.counter {
+  position: absolute;
+  left: 1rem;
+  bottom: 1rem;
+  padding: 1.5rem;
+  font-size: 2rem;
+}
+

ipsum/index.html

@@ -51,9 +51,14 @@
 
     </div>
 
+    <div class="counter">
+      تا حالا <span id="counter"></span> ساختم
+    </div>
+
     <a href="https://github.com/mdibaiee/ipsum"><img style="position: absolute; top: 0; right: 0; border: 0;" src="https://camo.githubusercontent.com/52760788cde945287fbb584134c4cbc2bc36f904/68747470733a2f2f73332e616d617a6f6e6177732e636f6d2f6769746875622f726962626f6e732f666f726b6d655f72696768745f77686974655f6666666666662e706e67" alt="Fork me on GitHub" data-canonical-src="https://s3.amazonaws.com/github/ribbons/forkme_right_white_ffffff.png"></a>
 
     <script src='js/libs/zepto.js'></script>
+    <script src="js/libs/socket.io.js"></script>
     <script src='js/main.js'></script>
   </body>
 

ipsum/js/main.js

@@ -1,3 +1,5 @@
+var socket = io();
+
 var $run = $('h1, h3, .options, a');
 
 $('li[contenteditable]').click(function(e) {
@@ -39,3 +41,9 @@ function success(ipsum) {
   selection.removeAllRanges();
   selection.addRange(range);
 }
+
+var counterElement = $('#counter');
+socket.on('counter', function(data) {
+  console.log(data);
+  counterElement.html(data);
+});