title: Single like count per user
body: <p>I'm trying to achieve a custom like button with an output of the number of 'likes' to display once the user has clicked the button.</p>
  
  <p><strong>Ideal User Case flow:</strong></p>
  
  <p>Step 1: [USER] - User clicks on 'custom' like button <br>
  Step 2: [SYSTEM] - System displays the number of current likes. <br>
  Step 3: [USER] - User attempts to like button again in the one sitting. <br>
  Step 4: [SYSTEM] - System will not take affect. </p>
  
  <p><strong>Problem:</strong></p>
  
  <p>Unfortunately, at this current time, this is actionable as many times as the user likes. A single user can like a page 10 times if they wanted during a single visit. </p>
  
  <p><strong>Current code:</strong></p>
  
  <p>HTML
  </p>
  
  <pre><code>&lt;div id="like"&gt;
  
      &lt;input type="image" src="images/love.png" alt="Like" title="Like" width= "34" height="33" id="heart" onClick="onClick()"&gt;
      &lt;div&gt;
          &lt;span id="output"&gt;&lt;/span&gt;
      &lt;/div&gt;  
  </code></pre>
  
  <p>CSS
  </p>
  
  <pre><code>#like {
      margin: 26px 30px 0px 0px;
  }
  
  @-webkit-keyframes pulse 
  {
      from {
          -webkit-transform: scale(1.0);
          opacity: 1.0;
      }
      50% {
          -webkit-transform: scale(1.2);
          opacity: 1.0;
      }
      to { 
          -webkit-transform: scale(1.0);
          opacity: 1.0;
      }
  }
  
  #heart:hover 
  { 
      -webkit-animation-name: pulse; 
      -webkit-animation-duration: 0.5s; 
      -webkit-animation-iteration-count: 2; 
  }
  
  #output
  {
      font-family: 'Open Sans', sans-serif;
      font-size: 10pt;
      font-weight: bold;
      color: white;
      margin-right: 7px;
      margin-left: 7px;
      float: right;
      align-content: center;          
  }
  </code></pre>
  
  <p>Javascript
  </p>
  
  <pre><code>// Heart Like counts
  var clicks = 50;
  function onClick() 
  {
      clicks += 1;
      document.getElementById("output").innerHTML = clicks;
  };
  </code></pre>