Skip welcome & menu and move to editor
Welcome to JS Bin
File
Add library
Share
Login or Register
Blog
Help
Load cached copy from
  • Run with JS
  • Save
  • Share
  • …
 
<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<meta charset=utf-8 />
<title>Complete Example</title>
  <style>
    .response {
      cursor: pointer;
    }
  </style>
</head>
<body>
  <div id="container"></div>
  <input type="text" id="responseInput">
  <input type="button" id="addResponse" value="Add">
  <script>
    (function() {
      // Get the responses (if any) or an empty array
      var responses = loadResponses();
      
      // Show the existing responses
      var container = $("#container");
      $.each(responses, function(index, response) {
        showResponse(response);
      });
      
      // Wait for user to add new ones
      var responseInput = $("#responseInput");
      responseInput.focus();
      $("#addResponse").click(function() {
        var text = $.trim(responseInput.val()),
            response = {
              text: text,
              id:   +new Date()
            };
        if (text) {
          responses.push(response);
          showResponse(response);
          saveResponses();
          responseInput.val("").focus();
        }
      });
      
      // Delete responses on click
      container.on("click", ".response", function() {
        var $this = $(this),
            id = parseInt($this.attr("data-id"), 10),
            index;
        $this.remove();
        if (id) {
          for (index = 0; index < responses.length; ++index) {
            if (responses[index].id === id) {
              responses.splice(index, 1);
              saveResponses();
              break;
            }
          }
        }
      });
      
      function loadResponses() {
        return JSON.parse(localStorage.responses || "null") || [];
      }
      
      function saveResponses() {
        localStorage.responses = JSON.stringify(responses);
      }
      
      function showResponse(response) {
        $("<div>")
          .addClass("response")
          .text(response.text)
          .attr("data-id", response.id)
          .appendTo(container);
      };
    })();
  </script>
</body>
</html>
 
​
Output

You can jump to the latest bin by adding /latest to your URL

Dismiss x
public
Bin info
anonymouspro
0viewers