jQuery addClass example

Change class name on click in jQuery

by Bintang Anandhiya

HTML

<!DOCTYPE HTML>
<html>

  <head>
    <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap" rel="stylesheet">
  </head>

  <body>
    <textarea class="txa" id="txa_input"></textarea>
    <textarea class="txa" id="txa_output"></textarea>
    <div class="button" id="btn_ubah"></div>
    <div class="button" id="btn_ubahbalik"></div>
  </body>

</html>

CSS

.txa{
  box-sizing: border-box;
  width: 100%;
}
.button{
  width: 100%;
  height: 50px;
  
  background-color: grey;
  transition-duration: 0.4s;
}
.button:active{
  transform: translate(0, 7px);
}

JavaScript

var alpha = ["Gita", "Adit", "Cistya", "Regituy", "Rachman", "Yolanda", "Bimo", "Tyrex", "Bintang", "Obin", "Kaisar", "Ica", "Bita", "Tatuy", "Hanif", "Umar", "Figo", "Mora", "Devina", "Regi", "Fathi", "Bagas", "Bagus", "PakSp", "Pakkarji", "PakRamzi", "Tata"];

var beta = ["temenan sama", "ngetawain", "mencintai", "ngajarin", "nyanyi bareng", "tidur bareng", "nobar bareng", "jalan bareng", "belajar bareng", "nyanyi sama", "pacaran sama", "nobar sama", "jalan sama", "belajar sama", "bobo bareng", "nampol", "nonjok", "ngegodain", "digodain", "diketawain", "digombalin", "ngegombalin", "dirayu sama", "ngerayu", "ditembak", "nembak", "jadian sama"];

var gamma = ["siangnya", "terus", "habisitu", "teroos", "lah sorenya", "eh taunya", "dan", "besoknya", "tapi", "karena", "gara2", "soalnya", "supaya", "lah besoknya", "teruss", "lusanya", "mingdepnya", "terusss", "eh terus", "eh lusanya", "eh besoknya", "eh paginya", "eh habisitu", "lah terus", "esoknya", "nanti", "lah teroos"];
   
$(document).ready(function(){
	$("#btn_ubah").click(function(){
  	var str = $("#txa_input").val();
    $("#txa_output").text("");
    
    for(var i = 0; i < str.length; i++){
    	var tmpltr = str.charCodeAt(i);
      var ltr;
    	if(tmpltr == 42) ltr = 26;
    	else ltr = tmpltr - 97;
    
    	var tmp = i % 4;
      if(tmp == 0 || tmp == 2){
      	$("#txa_output").append(alpha[ltr]+" ");
      }else if(tmp == 1){
      	$("#txa_output").append(beta[ltr]+" ");
      }
      
    	
    }
  
  });
  
  $("#btn_ubahbalik").click(function(){
  	var str2 = $("#txa_output").val();
    $("#txa_input").text("");
    
    str2 = str2.split("Pak ").join("P_");
    str2 = str2.split("lah ").join("l_");
    str2 = str2.split("eh ").join("e_");
    str2 = str2.split(" sama").join("_s");
    str2 = str2.split(" bareng").join("_b");
    
    //alert(str2);
    for(var i = 0; i < str.length; i++){
    	var ltr = str.charCodeAt(i) - 97;
    
    	var tmp = i % 4;
      //if(tmp == 2) tmp = 0;
     ...