Skip to content

Instantly share code, notes, and snippets.

@mdang
Last active February 17, 2016 16:55
Show Gist options
  • Save mdang/16071a7acb1ac354c38a to your computer and use it in GitHub Desktop.
Save mdang/16071a7acb1ac354c38a to your computer and use it in GitHub Desktop.
No X's

No X's

Pair Programming - 20 min

You have a new client that despises the letter "x" with a passion. Make sure this text input prevents users from typing in the letter "x" as they type.

Tips:

  • Look through the list of DOM events and find one that will work for this situation
  • Remember the event object that's passed as the first argument into event handlers
  • Search for the list of key codes reported when a user presses a key on the webpage
  • Don't believe everything you see on the web. You might have to do some debugging with console.log()
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>No X's</title>
  <style type="text/css">
    h1 {
      text-align: center;
      font-family: Helvetica, sans-serif;
      margin-top: 5%;
    }

    #filtered-input {
      width: 90%;
      font-size: 175%;
      margin: 2% 5% 15% 7%;
      padding: 8px;
    }
  </style>
</head>
<body>
  <h1>No X's</h1>
  <form name="no-x-form" id="no-x-form">
    <input type="text" name="filtered-input" id="filtered-input">
  </form>
  
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
  <script type="text/javascript">

  // Wait until the DOM is ready before proceeding
  $(function() {
  
    // Write your event handling code here


  });

  </script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment