<!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>