<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title></title>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" integrity="sha384-WskhaSGFgHYWDcbwN70/dfYBj47jz9qbsMId/iRN3ewGhXQFZCSftd1LZCfmhktB" crossorigin="anonymous">
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
    <link rel="stylesheet" href="https://v40.pingendo.com/assets/4.0.0/default/theme.css" type="text/css">
  </head>
  <style media="screen">
    body{
    background: #000000 ;
    }
    h1 ,h3{
      color: white;
    }
    textarea{
      font-size:20px;
      height:395px;
      width:510px;
    }
    table{

      border-collapse: collapse;
      text-align: center;
      font-size: 20px;
      height: 200px;
      width: 100px

      ;
    }
    button {
     height:50px ;
     width:300px;
     background-color: #4CAF50;
     border: none;
     color: white;
     padding: 15px 32px;
     text-align: center;
     text-decoration: none;
     display: inline-block;
     font-size: 16px;
     margin: 4px 2px;
     cursor: pointer;
 }

.funt {
  height:50px ;
  width:300px;
  font-size: 16px;
  display: inline-block;
  padding: 15px 25px;
  background-color: #4CAF50;
  border: none;
  cursor: pointer;
  text-align: center;
  text-decoration: none;
  outline: none;
  color: #fff;

  border: none;
  border-radius: 15px;
  box-shadow: 0 3px #000000;
}

 .funt:active {
  background-color: #3e8e41;
  box-shadow: 0 5px #666;
  transform: translateY(4px);
}




  </style>

  <body>

   <nav class="navbar navbar-expand-md navbar-dark bg-dark fixed-top">
     <br>
     <br>
      <a class="navbar-brand" href="#">DNA TRANSLATION</a>
      <br>
      <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarsExampleDefault" aria-controls="navbarsExampleDefault" aria-expanded="false" aria-label="Toggle navigation">
      </button>

      <div class="collapse navbar-collapse" id="navbarsExampleDefault">
        <ul class="navbar-nav mr-auto" >

          <li class="nav-item mx-2">
            <a class="nav-link" href="#link2">FUNCTION</a>
          </li>
          <li class="nav-item">
            <a class="nav-link " href="#link1">RNA GENETIC CODE</a>
          </li>

        </ul>

      </div>
    </nav>


<div class="head">
  <center>
  <h1>DNA TRANSLATION</h1>
</center>
</div>
<br>

<div class="intro">
<center>
  <h1>WHAT IS DNA ?</h1>
  <iframe width="1280" height="500" src="https://www.youtube.com/embed/zwibgNGe4aY" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>
</center>
</div>
<br>

<a name="link2"><div class="fn" style="background-color:black;"></a>


<center>
  <div style="background-color:#666633;">
  <table class="dnarc" style="background-color:#666633; style=" height:50px ; width:100px;"">
    <tr>
    <br>
    <br>
    <br><br>
    <center><h1><a  style="background-color:#666633;color:#ffffff;">-FUNCTION-</a><h1></center>
    <br>
      <td><textarea name="input" id="ip" class="inputf" autofocus="autofocus" spellcheck="false" onpaste="autoresize_delayed()"></textarea></td>
      <td>
      <button class="funt"type="button" name="button" onclick="uppercase()" style="background-color:#4d9900;">UPPER CASE </button>
      <button class="funt"type="button" name="button" onclick="lowercase()"style="background-color:#59b300;">lower case</button>
      <button class="funt"type="button" name="button" onclick="revers()"style="background-color:#66cc00;">Revers</button>
      <button class="funt"type="button" name="button" onclick="comp()"style="background-color:#73e600;">Complementary</button>
      <button class="funt"type="button" name="button" onclick="recomp()" style="background-color:#6699CC;">Complementary & Reverse</button>
      <button class="funt"type="button" name="button" onclick="protein()"style="background-color:#80ff00;">Translation Into Protein</button>
      <button class="funt"type="button" name="button" onclick="document.getElementById('ip').value = '',document.getElementById('op').value = ''"  style="background-color:Red;">Clear</button>
    </td>
      <td><textarea name="output" id="op" class="outputf" autofocus="autofocus" spellcheck="false" onpaste="autoresize_delayed()"></textarea></td>
    </tr>

  </table>
  <tr>
    <br>
    <br>
    <br><br>
  </div>
</center>

<br>
<br>
<br>



<p id="demo"></p>

<br>
<br>
<center><h1><a name="link1" style="background-color:#000000;color:#ffffff;">RNA GENETIC CODE</a></h1></center>
<br>
<br>


<table align="center" class="table2" border="1px" style="background-color:#FFFFFF">
<tr>
<th></th><th colspan="2">U</th><th colspan="2">C</th><th colspan="2" >A</th><th colspan="2" >G</th><th></th>
</tr>
<!-- U -->
<tr>
<th rowspan="4">U</th>

<td>UUU</td><td rowspan="2" style="background-color:#FFFF33 ;">
  <?php $abc = "F";?>
  <a href="#" onClick="MyWindow=window.open('connect.php?abc=<?=$abc;?>','MyWindow','width=400,height=300'); return false;">(Phe/F) Phenylalanine</a>
  </td>


<td>UCU</td><td rowspan="4" style="background-color:#99CCCC">
  <?php $abc = "S";?>
  <a href="#" onClick="MyWindow=window.open('connect.php?abc=<?=$abc;?>','MyWindow','width=400,height=300'); return false;">(Ser/S) Serine</a>
</td>


<td>UAU</td><td rowspan="2" style="background-color:#99CCCC">
  <?php $abc = "Y";?>
  <a href="#" onClick="MyWindow=window.open('connect.php?abc=<?=$abc;?>','MyWindow','width=400,height=300'); return false;">(Tyr/Y) Tyrosine</a>
</td>

<td>UGU</td><td rowspan="2" style="background-color:#99CCCC">
  <?php $abc = "C";?>
  <a href="#" onClick="MyWindow=window.open('connect.php?abc=<?=$abc;?>','MyWindow','width=400,height=300'); return false;">(Cys/C) Cysteine</a>
</td>

<td>U</td>
</tr>
<tr>
<td>UUC</td> <td>UCC</td> <td>UAC</td> <td>UGC</td>
<td >C</td>
</tr>
<tr>

<td>UUA</td><td rowspan="2" style="background-color:#FFFF33 ;">
    <?php $abc = "L";?>
    <a href="#" onClick="MyWindow=window.open('connect.php?abc=<?=$abc;?>','MyWindow','width=400,height=300'); return false;">(Leu/L) Leucine</a>
</td>

<td>UCA</td>
<td>UAA</td><td rowspan="2" style="background-color:#CCCCCC;">STOP</td>
<td>UGA</td><td style="background-color:#CCCCCC;">STOP</td>
<td >A</td>
</tr>
<tr>
<td>UUG</td> <td>UCG</td> <td>UAG</td> <td>UGG</td>

<td style="background-color:#FFFF33;">
  <?php $abc = "W";?>
  <a href="#" onClick="MyWindow=window.open('connect.php?abc=<?=$abc;?>','MyWindow','width=400,height=300'); return false;">(Trp/W) Tryptophan</a>
</td>

<td>G</td>
</tr>
<!-- C -->
<tr>
<th rowspan="4" >C</th>
<td>CUU</td><td rowspan="4" style="background-color:#FFFF33 ;">
  <?php $abc = "L";?>
  <a href="#" onClick="MyWindow=window.open('connect.php?abc=<?=$abc;?>','MyWindow','width=400,height=300'); return false;">Leucine(Leu/L)</a>
</td>

<td>CCU</td><td rowspan="4" style="background-color:#FFFF33;">
  <?php $abc = "P";?>
  <a href="#" onClick="MyWindow=window.open('connect.php?abc=<?=$abc;?>','MyWindow','width=400,height=300'); return false;">Proline(Pro/P)</a>
</td>

<td>CAU</td><td rowspan="2"  style="background-color:#99CCFF">
  <?php $abc = "H";?>
  <a href="#" onClick="MyWindow=window.open('connect.php?abc=<?=$abc;?>','MyWindow','width=400,height=300'); return false;">Histidine(His/H)</a>
</td>

<td>CGU</td><td rowspan="4" style="background-color:#99CCFF">
  <?php $abc = "R";?>
  <a href="#" onClick="MyWindow=window.open('connect.php?abc=<?=$abc;?>','MyWindow','width=400,height=300'); return false;">Arginine(Arg/R)</a>
</td>

<td >U</td>
</tr>
<tr>
<td>CUC</td> <td>CCC</td> <td>CAC</td> <td>CGC</td>
<td >C</td>
</tr>
<tr>
<td>CUA</td> <td>CCA</td>
<td>CAA</td><td rowspan="2" style="background-color:#99CCCC">
  <?php $abc = "Q";?>
  <a href="#" onClick="MyWindow=window.open('connect.php?abc=<?=$abc;?>','MyWindow','width=400,height=300'); return false;">Glutamine(Glu/Q)</a>
  </td>
<td>CGA</td>

<td >A</td>
</tr>
<tr>
<td>CUG</td> <td>CCG</td> <td>CAG</td> <td>CGG</td>
 <td >G</td>
</tr>
<!-- A -->
<tr>
<th rowspan="4"  >A</th>
<td>AUU</td><td rowspan="3" style="background-color:#FFFF33 ;">
  <?php $abc = "I";?>
  <a href="#" onClick="MyWindow=window.open('connect.php?abc=<?=$abc;?>','MyWindow','width=400,height=300'); return false;">Isoleucine(Ile/I)</a>
</td>

<td>ACU</td><td rowspan="4" style="background-color:#99CCCC">
  <?php $abc = "T";?>
  <a href="#" onClick="MyWindow=window.open('connect.php?abc=<?=$abc;?>','MyWindow','width=400,height=300'); return false;">Threonine(Thr/T)</a>
</td>

<td>AAU</td><td rowspan="2" style="background-color:#99CCCC">
  <?php $abc = "N";?>
  <a href="#" onClick="MyWindow=window.open('connect.php?abc=<?=$abc;?>','MyWindow','width=400,height=300'); return false;">Asparagine(Asn/N)</a>
</td>

<td>AGU</td><td rowspan="2" style="background-color:#99CCCC">
  <?php $abc = "S";?>
  <a href="#" onClick="MyWindow=window.open('connect.php?abc=<?=$abc;?>','MyWindow','width=400,height=300'); return false;">Serine(Ser/S)</a>
</td>

<td>U</td>
</tr>
<tr>
<td>AUC</td> <td>ACC</td> <td>AAC</td> <td>AGC</td>
<td >C</td>
</tr>

<tr>
<td>AUA</td>
<td>ACA</td>
<td>AAA</td><td rowspan="2" style="background-color:#99CCFF">
  <?php $abc = "K";?>
  <a href="#" onClick="MyWindow=window.open('connect.php?abc=<?=$abc;?>','MyWindow','width=400,height=300'); return false;">Lysine(Lys/K)</a>
</td>

<td>AGA</td><td rowspan="2" style="background-color:#99CCFF">
  <?php $abc = "R";?>
  <a href="#" onClick="MyWindow=window.open('connect.php?abc=<?=$abc;?>','MyWindow','width=400,height=300'); return false;">Arginine(Arg/R)</a>
</td>

<td >A</td>
</tr>
<tr>
<td>AUG</td>
<td style="background-color:#FFFF33 ;">
  <?php $abc = "M";?>
  <a href="#" onClick="MyWindow=window.open('connect.php?abc=<?=$abc;?>','MyWindow','width=400,height=300'); return false;">Methionine(Met/M)</a>
</td>

<td>ACG</td> <td>AAG</td> <td>AGG</td>
<td >G</td>
</tr>
<!-- G -->
<tr>
<th rowspan="4" >G</th>
<td>GUU</td><td rowspan="4" style="background-color:#FFFF33;">
  <?php $abc = "V";?>
  <a href="#" onClick="MyWindow=window.open('connect.php?abc=<?=$abc;?>','MyWindow','width=400,height=300'); return false;">Valine(Val/V)</a>
</td>

<td>GCU</td><td rowspan="4" style="background-color:#FFFF33;">
  <?php $abc = "A";?>
  <a href="#" onClick="MyWindow=window.open('connect.php?abc=<?=$abc;?>','MyWindow','width=400,height=300'); return false;">Alanine(Ala/A)</a>
</td>

<td>GAU</td><td rowspan="2" style="background-color:#FF99CC	;">
  <?php $abc = "D";?>
  <a href="#" onClick="MyWindow=window.open('connect.php?abc=<?=$abc;?>','MyWindow','width=400,height=300'); return false;">Aspartic acid(Asp/D)</a>
</td>

<td>GGU</td><td rowspan="4" style="background-color:#99CCCC">
  <?php $abc = "G";?>
  <a href="#" onClick="MyWindow=window.open('connect.php?abc=<?=$abc;?>','MyWindow','width=400,height=300'); return false;">Glycine(Gly/G)</a>
</td>

<td >U</td>
</tr>
<tr>
<td>GUC</td> <td>GCC</td> <td>GAC</td> <td>GGC</td>
<td >C</td>
</tr>
<tr>
<td>GUA</td> <td>GCA</td> <td>GAA</td>
<td rowspan="2" style="background-color:#FF99CC	">
  <?php $abc = "Q";?>
  <a href="#" onClick="MyWindow=window.open('connect.php?abc=<?=$abc;?>','MyWindow','width=400,height=300'); return false;">Glutamine(Glu/Q)</a>
</td>

<td>GGA</td>

 <td >A</td>
</tr>
<tr>
<td>GUG</td> <td>GCG</td> <td>GAG</td> <td>GGG</td>
 <td >G</td>
</tr>
</table>

<br>

<center>
<table id="type" border="1px" style="font-size:18px; width:40%; height:20% ;" >
  <tr>
<td style="background-color:#e6e600;">มีขั้ว</td>
<td style="background-color:#99CCCC;">ไม่มีขั้ว</td>
<td style="background-color:#FF99CC;">กรด</td>
<td style="background-color:#99CCFF;">เบส</td>
<td style="background-color:#CCCCCC;">รหัสหยุดพันธุกรรม</td>
  </tr>
</table>
</center>
<br>
<br>
</div>


<script type="text/javascript">

//ฟังก์ชั่นแปลงเป็นอักษรตัวใหญ่
function uppercase(){
 var str = document.getElementById("ip").value;
 if(str == ''){
   alert("กรุณากรอกข้อมูล");
 }else {
   var res = str.toUpperCase();
   document.getElementById("op").value = res;
 }

}


//ฟังก์ชั่นแปลงตัวอักษรเล็ก
function lowercase(){
 var str = document.getElementById("ip").value;
 if(str == ''){
   alert("กรุณากรอกข้อมูล");
 }else {
 var res = str.toLowerCase();
 document.getElementById("op").value = res;
}
}


//ฟังก์ชั่นแปลงกลับ
function revers(){
  var str = document.getElementById("ip").value;
  if(str == ''){
    alert("กรุณากรอกข้อมูล");
  }else {
  document.getElementById("op").value = str.split("").reverse().join("");
}
}



function comp(){
    var dna = document.getElementById("ip").value
    if(dna == ''){
      alert("กรุณากรอกข้อมูล");
    }else {
    var complement = '';
    for (var i = 0; i < dna.length; i++) {
    switch (dna[i]) {
      case 'A':
        complement += 'T';
        break;
      case 'T':
        complement += 'A';
        break;
      case 'C':
        complement += 'G';
        break;
      case 'G':
        complement += 'C';
        break;
      case 'a':
        complement += 't';
        break;
      case 't':
        complement += 'a';
        break;
      case 'g':
        complement += 'c';
        break;
      case 'c':
        complement += 'g';
        break;
    }
  }
  document.getElementById("op").value = complement;
}
}

function recomp(){
var str = document.getElementById("ip").value
 //แปลงกลับ


 if(str == ''){
   alert("กรุณากรอกข้อมูล");
 }else {

var dna = document.getElementById("ip").value
complement = '';
  for (var i = 0; i < dna.length; i++) {
    switch (dna[i]) {
      case 'A':
        complement += 'T';
        break;
      case 'T':
        complement += 'A';
        break;
      case 'C':
        complement += 'G';
        break;
      case 'G':
        complement += 'C';
        break;
      case 'a':
        complement += 'T';
        break;
      case 't':
        complement += 'A';
        break;
      case 'g':
        complement += 'C';
        break;
      case 'c':
        complement += 'G';
        break;
    }
  }

  document.getElementById("op").value = complement.split("").reverse().join("");
}
}


  var dict = {

    //อักษรตัวใหญ่
    // Phenylalanine

    'TTC':'F', 'TTT':'F',
    // LeTcine
    'TTA':'L', 'TTG':'L', 'CTT':'L', 'CTC':'L','CTA':'L','CTG':'L',
    // IsoleTcine
    'ATT':'I', 'ATC':'I', 'ATA':'I',
    // Methionine
    'ATG':'M',
    // Valine
    'GTT':'V', 'GTC':'V', 'GTA':'V', 'GTG':'V',
    // Serine
    'TCT':'S', 'TCC':'S', 'TCA':'S', 'TCG':'S', 'AGT':'S', 'AGC':'S',
    // Proline
    'CCT':'P', 'CCC':'P', 'CCA':'P', 'CCG':'P',
    // Threonine
    'ACT':'T', 'ACC':'T', 'ACA':'T', 'ACG':'T',
    // Alanine
    'GCT':'A', 'GCC':'A', 'GCA':'A', 'GCG':'A',
    // Tyrosine
    'TAT':'Y', 'TAC':'Y',
    // Histidine
    'CAT':'H', 'CAC':'H',
    // GlTtamine
    'CAA':'Q', 'CAG':'Q',
    // Asparagine
    'AAT':'N', 'AAC':'N',
    // Lysine
    'AAA':'K', 'AAG':'K',
    // Aspartic Acid
    'GAT':'D', 'GAC':'D',
    // GlTtamic Acid
    'GAA':'E', 'GAG':'E',
    // Cystine
    'TGT':'C', 'TGC':'C',
    // Tryptophan
    'TGG':'W',
    // Arginine
    'CGT':'R', 'CGC':'R', 'CGA':'R', 'CGG':'R', 'AGA':'R', 'AGG':'R',
    // Glycine
    'GGT':'G',  'GGC':'G', 'GGA':'G', 'GGG':'G',
    // Stop codon
    'TAA':'', 'TGA':'', 'TAG':'',

  //อักศรตัวเเล็ก
    // phenylalanine
        'ttc':'F', 'ttt':'F',
        // letcine
        'tta':'L', 'ttg':'L', 'ctt':'L', 'ctc':'L','cta':'L','ctg':'L',
        // isoletcine
        'att':'I', 'atc':'I', 'ata':'I',
        // methionine
        'atg':'M',
        // valine
        'gtt':'v', 'gtc':'v', 'gta':'v', 'gtg':'v',
        // serine
        'tct':'s', 'tcc':'s', 'tca':'s', 'tcg':'s', 'agt':'s', 'agc':'s',
        // proline
        'cct':'p', 'ccc':'p', 'cca':'p', 'ccg':'p',
        // threonine
        'act':'t', 'acc':'t', 'aca':'t', 'acg':'t',
        // alanine
        'gct':'a', 'gcc':'a', 'gca':'a', 'gcg':'a',
        // tyrosine
        'tat':'y', 'tac':'y',
        // histidine
        'cat':'h', 'cac':'h',
        // glttamine
        'caa':'q', 'cag':'q',
        // asparagine
        'aat':'n', 'aac':'n',
        // lysine
        'aaa':'k', 'aag':'k',
        // aspartic acid
        'gat':'d', 'gac':'d',
        // glttamic acid
        'gaa':'e', 'gag':'e',
        // cystine
        'tgt':'c', 'tgc':'c',
        // tryptophan
        'tgg':'w',
        // arginine
        'cgt':'r', 'cgc':'r', 'cga':'r', 'cgg':'r', 'aga':'r', 'agg':'r',
        // glycine
        'ggt':'g',  'ggc':'g', 'gga':'g', 'ggg':'g',
        // stop codon
        'taa':'', 'tga':'', 'tag':'',

        //อักษรตัวใหญ่
    // Phenylalanine
    'UUC':'F', 'UUU':'F',
    // LeUcine
    'UUA':'L', 'UUG':'L', 'CUU':'L', 'CUC':'L','CUA':'L','CUG':'L',
    // IsoleUcine
    'AUU':'I', 'AUC':'I', 'AUA':'I',
    // MeUhionine
    'AUG':'M',
    // Valine
    'GUU':'V', 'GUC':'V', 'GUA':'V', 'GUG':'V',
    // Serine
    'UCU':'S', 'UCC':'S', 'UCA':'S', 'UCG':'S', 'AGU':'S', 'AGC':'S',
    // Proline
    'CCU':'P', 'CCC':'P', 'CCA':'P', 'CCG':'P',
    // Uhreonine
    'ACU':'U', 'ACC':'U', 'ACA':'U', 'ACG':'U',
    // Alanine
    'GCU':'A', 'GCC':'A', 'GCA':'A', 'GCG':'A',
    // Uyrosine
    'UAU':'Y', 'UAC':'Y',
    // HisUidine
    'CAU':'H', 'CAC':'H',
    // GlUUamine
    'CAA':'Q', 'CAG':'Q',
    // Asparagine
    'AAU':'N', 'AAC':'N',
    // Lysine
    'AAA':'K', 'AAG':'K',
    // AsparUic Acid
    'GAU':'D', 'GAC':'D',
    // GlUUamic Acid
    'GAA':'E', 'GAG':'E',
    // CysUine
    'UGU':'C', 'UGC':'C',
    // UrypUophan
    'UGG':'W',
    // Arginine
    'CGU':'R', 'CGC':'R', 'CGA':'R', 'CGG':'R', 'AGA':'R', 'AGG':'R',
    // Glycine
    'GGU':'G',  'GGC':'G', 'GGA':'G', 'GGG':'G',
    // SUop codon
    'UAA':'', 'UGA':'', 'UAG':'',
    //อักศรตัวเเล็ก
       // phenylalanine
           'uuc':'f', 'uuu':'f',
           // leucine
           'uua':'l', 'uug':'l', 'cuu':'l', 'cuc':'l','cua':'l','cug':'l',
           // isoleucine
           'auu':'i', 'auc':'i', 'aua':'i',
           // meuhionine
           'aug':'m',
           // valine
           'guu':'v', 'guc':'v', 'gua':'v', 'gug':'v',
           // serine
           'ucu':'s', 'ucc':'s', 'uca':'s', 'ucg':'s', 'agu':'s', 'agc':'s',
           // proline
           'ccu':'p', 'ccc':'p', 'cca':'p', 'ccg':'p',
           // uhreonine
           'acu':'u', 'acc':'u', 'aca':'u', 'acg':'u',
           // alanine
           'gcu':'a', 'gcc':'a', 'gca':'a', 'gcg':'a',
           // uyrosine
           'uau':'y', 'uac':'y',
           // hisuidine
           'cau':'h', 'cac':'h',
           // gluuamine
           'caa':'q', 'cag':'q',
           // asparagine
           'aau':'n', 'aac':'n',
           // lysine
           'aaa':'k', 'aag':'k',
           // asparuic acid
           'gau':'d', 'gac':'d',
           // gluuamic acid
           'gaa':'e', 'gag':'e',
           // cysuine
           'ugu':'c', 'ugc':'c',
           // urypuophan
           'ugg':'w',
           // arginine
           'cgu':'r', 'cgc':'r', 'cga':'r', 'cgg':'r', 'aga':'r', 'agg':'r',
           // glycine
           'ggu':'g',  'ggc':'g', 'gga':'g', 'ggg':'g',
           // suop codon
           'uaa':'', 'uga':'', 'uag':'',



};



function protein() {
  var dna = document.getElementById("ip").value.replace(/\s/g, '');
  if(dna == ''){
    alert("กรุณากรอกข้อมูล");
  }else {
  var f1 ='';
  var f2 ='';
  var f3 ='';
  var f4 ='';
  var f5 ='';
  var f6 ='';


  //5'->3'
  for (var i=0; i<dna.length; i+=3) {
    f1 += dict[dna.substr(i,3)]+" ";
  }
  for (var i=1; i<dna.length-2; i+=3) {
    f2 += dict[dna.substr(i,3)]+" ";
  }
  for (var i=2; i<dna.length-3; i+=3) {
    f3 += dict[dna.substr(i,3)]+" ";
  }


  var complement = '';
  for (var i = 0; i < dna.length; i++) {
  switch (dna[i]) {
    case 'A':
      complement += 'T';
      break;
    case 'T':
      complement += 'A';
      break;
    case 'C':
      complement += 'G';
      break;
    case 'G':
      complement += 'C';
      break;
    case 'a':
      complement += 'T';
      break;
    case 't':
      complement += 'A';
      break;
    case 'g':
      complement += 'C';
      break;
    case 'c':
      complement += 'G';
      break;
  }

}
  //3'->5'
  var redna =  complement.replace(/\s/g, '').split("").reverse().join("");
  for (var i=0; i<redna.length; i+=3) {
    f4 += dict[redna.substr(i,3)]+" ";
  }
  for (var i=1; i<redna.length-2; i+=3) {
    f5 += dict[redna.substr(i,3)]+" ";
  }
  for (var i=2; i<redna.length-3; i+=3) {
    f6 += dict[redna.substr(i,3)]+" ";
  }


  document.getElementById("op").value = "Frame1 : 5' "+f1+" 3' "+"\n"+
  "Frame2 : 5' "+f2+" 3'"+"\n"+
  "Frame3 : 5' "+f3+" 3'"+"\n"+
  "Frame4 : 3' "+f4+" 5'"+"\n"+
  "Frame5 : 3' "+f5+" 5'"+"\n"+
  "Frame6 : 3' "+f6+" 5'";


}
}


</script>


  </body>

</html>