Code for Ext

by Gayatri Rajan

HTML

<body>
  <textarea name="styled-textarea" class="textarea" id="styled"> </textarea>
  <div id="shover">
    Your words mean a lot. Be careful.
  </div>


  <form id="usual" class="norm">
    <input id="sendButton" type="submit" value="Submit Your Comment!">
  </form>
  <form id="trigger" class="noshow" onsubmit="return confirm('Your words could deeply hurt someone. Are you sure you want to post?');">
    <input id="sendButton" type="submit" value="Submit Your Comment!">
  </form>

</body>

CSS

.mystyle {
  text-decoration: line-through;
  color: #ED5454;
}

textarea {
  outline: 10px solid #FEFBFB;
  display: block;
  margin: 20px;
  width: 420px;
  overflow: auto;
  color: #444;
  text-shadow: 0 0 2px #ddd;
  padding: 20px 10px 10px 0;
  font-family: Tahoma, sans-serif;
}

textarea {
  float: right;
  width: 200px;
  border: 2px solid #dadada;
  border-radius: 7px;
  font-size: 15px;
  padding: 5px;
  margin-top: 0px;
  background: white;
}

textarea:focus {
  outline: 1px solid #C08686;
  box-shadow: 0 0 10px #C08686;
}

.norm {
  display: inline-block;
}

.noshow {
  display: none;
}

.floater {
  float: right;
}

#sendButton {
  background-color: #756161;
  border: none;
  color: white;
  opacity: 0.7;
  transition: opacity 2s;
  padding: 15px 32px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
  position: absolute;
  left: 2em;
  top: 15.5em;
}

#sendButton:hover {
  opacity: 1;
}

div {
  background-color: #ED5454;
  padding: 15px;
  opacity: 0;
  transition: opacity 1s;
  width: 360px;
}

.mason {
  position: absolute;
  top: 40px;
  left: 35px;
  border-radius: 5px;
  box-shadow: 7px 7px 5px #C08686;
}

textarea:hover + div.mason {
  display: block;
  color: white;
  opacity: 1;
}

textarea#styled {
  position: absolute;
  width: 400px;
  height: 220px;
  border: 3px solid #FBF1EE;
  padding: 5px;
  font-family: Tahoma, sans-serif;
  background-position: bottom right;
  background-repeat: no-repeat;
  resize: none;
  color: #4D0000;
}

textarea:focus {
  outline: 1px solid #ED5454;
}

.close-icon {
  border: 1px solid transparent;
  background-color: transparent;
  display: inline-block;
  vertical-align: middle;
  outline: 0;
  cursor: pointer;
}

.close-icon:after {
  content: "X";
  display: block;
  width: 15px;
  height: 15px;
  position: absolute;
  background-color: #FA9595;
  z-index: 1;
  right: 165px;
  top: 0;
  bottom: 0;
  margin: auto;
  padding: 2px;
  border-radius: 50%;
  text-align:...

JavaScript

$(document).ready(function() {
  var triggerWords = ["stupid",
    "ugly",
    "fat",
    "kill",
    "dumb",
    "idiot",
    "moron",
    "no future",
    "nerd",
    "smelly",
    "stinks",
    "stink",
    "fatso",
    "freak",
    "weirdo",
    "crazy",
    "ass",
    "asshole",
    "bitch",
    "abortion",
    "disgusting",
    "loser",
    "lame",
    "failure",
    "unlovable",
    "shit",
    "fuck",
    "worthless",
    "douchebag",
    "douche",
    "I hate you",
    "retard",
    "retarded",
    "pervert",
    "overdramatic",
    "prick",
    "hater",
    "hate",
    "disgrace",
    "obese",
    "lazy",
    "unloved",
    "geek",
    "unwanted",
    "emo",
    "annoying",
    "untalented",
    "whore",
    "obnoxious",
    "slut",
    "homo",
    "useless",
    "psycho",
    "pathetic",
    "selfish",
    "monster",
    "coward",
    "naive",
    "gullible",
    "crybaby",
    "unqualified",
    "hopeless",
    "sleazy",

  ];
  $(document).on('keyup', 'textarea', function() {
    for (var i = 0; i < triggerWords.length; i++) {
      if ($(this).val().toLowerCase().indexOf(triggerWords[i]) != -1) {

        document.getElementById("styled").className = "mystyle";
        document.getElementById("shover").className = "mason";
        const messages = ['<img src="https://lh3.googleusercontent.com/TzOBj6xt9unc8n41fMyUZ46FG4MRXBK6wkdOtzmKJPoLa9gBYNwZYQkRB8fsboqM1LHh3ahxOLOlyKsH1zG1qmGHgbS6IK-yZtv6Duo6_thwIKEVRY7BZNr2JJzAkYviyKp_q7SPWnp1"width="200px" class="floater" onclick="javascript:eraseText();">Words mean a lot. Their echoes can brighten someone\'s day. Or they can make a bad day worse. Consider the person behind the screen.', '<img src="https://lh3.googleusercontent.com/TzOBj6xt9unc8n41fMyUZ46FG4MRXBK6wkdOtzmKJPoLa9gBYNwZYQkRB8fsboqM1LHh3ahxOLOlyKsH1zG1qmGHgbS6IK-yZtv6Duo6_thwIKEVRY7BZNr2JJzAkYviyKp_q7SPWnp1"width="200px" class="floater" onclick="javascript:eraseText();">Your words can be a force for happiness or dejection. Choose carefully.', 'Be...