API tools faq
paste
Advertisement
Cerulan

Interactive Codon Chart

Cerulan
Dec 9th, 2013
49
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 10.07 KB | None | 0 0
raw download clone embed print report
  1. <!DOCTYPE HTML>
  2. <html>
  3. <head>
  4.     <meta charset="utf-8">
  5.     <title>
  6.         Codon Table
  7.     </title>
  8.     <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js">
  9.     </script>
  10.     <script>
  11.         $(document).ready(function(){
  12.             $("#aminoin").keyup(function(event) {
  13.                 var cod = $("#aminoin").val()
  14.                 if (cod.length > 0) {
  15.                     var all = document.getElementsByTagName("td");
  16.                     var codons = new Array()
  17.                     for (var i=0, max=all.length; i < max; i++) {                      
  18.                         if (all[i].innerHTML.indexOf("td") != -1) {continue}
  19.                         if (all[i].innerHTML.indexOf(" - ") == -1) {continue}
  20.                         var intable = all[i].innerHTML.substring(6).toLowerCase()                      
  21.                         var amino = cod.toLowerCase()                      
  22.                         var chare = true;
  23.                         for (var xv=0, mc=amino.length; xv<mc; xv++) {
  24.                             if (intable.charAt(xv) != amino.charAt(xv)) {
  25.                                 chare = false
  26.                             }
  27.                         }
  28.                         if (chare) {
  29.                             all[i].setAttribute("style","background-color: #A3FFA3")
  30.                             codons.push(all[i].innerHTML.substring(0,3))
  31.                         }
  32.                         else {
  33.                             all[i].setAttribute("style","background-color: #FFFFFF")
  34.                         }                      
  35.                     }
  36.                     //Codon Out
  37.                     var htmlout = ""
  38.                     for (c=0, mxc=codons.length; c<mxc; c++) {
  39.                         htmlout += codons[c]
  40.                         if (c < mxc-1) {
  41.                             htmlout = htmlout + ", "
  42.                         }
  43.                     }
  44.                     $("#codonout").html("Codons: " + htmlout)
  45.                 }
  46.                 else {
  47.                     $("#codonout").html("")
  48.                     var all = document.getElementsByTagName("td");
  49.                     for (var i=0, max=all.length; i < max; i++) {
  50.                         if (all[i].innerHTML.indexOf(" - ") != -1) {
  51.                             if (all[i].innerHTML.indexOf("td") == -1) {
  52.                                 all[i].setAttribute("style","background-color: #FFFFFF")                               
  53.                             }
  54.                         }
  55.                     }
  56.                 }
  57.             })
  58.             $("#codon").keydown(function(event){
  59.                 if ((event.which == 85) || (event.which == 67) || (event.which == 65) || (event.which == 71) || (event.which == 8)) {                  
  60.                 }
  61.                 else {
  62.                     event.preventDefault()
  63.                 }
  64.             });
  65.             $("#codon").keyup(function(event) {
  66.                 var cod = $("#codon").val()
  67.                 var char = cod.toLowerCase().charAt(0)
  68.                 if (char == 'u') {
  69.                     $("#ut").css("background-color","#A3A3FF")
  70.                 }
  71.                 else {
  72.                     $("#ut").css("background-color","#FFFFFF")
  73.                 }
  74.                
  75.                 if (char == 'c') {
  76.                     $("#ct").css("background-color","#A3A3FF")
  77.                 }
  78.                 else {
  79.                     $("#ct").css("background-color","#FFFFFF")
  80.                 }
  81.                
  82.                 if (char == 'a') {
  83.                     $("#at").css("background-color","#A3A3FF")
  84.                 }
  85.                 else {
  86.                     $("#at").css("background-color","#FFFFFF")
  87.                 }
  88.                
  89.                 if (char == 'g') {
  90.                     $("#gt").css("background-color","#A3A3FF")
  91.                 }
  92.                 else {
  93.                     $("#gt").css("background-color","#FFFFFF")
  94.                 }
  95.                
  96.                     /** SECOND LETTER */
  97.                 /** SECOND LETTER */
  98.                 /** SECOND LETTER */
  99.                 cs = cod.toLowerCase().charAt(1)
  100.                 if (cs == 'u') {
  101.                     $("#uc").css("background-color","#FFA3A3")
  102.                 }
  103.                 else {
  104.                     $("#uc").css("background-color","#FFFFFF")
  105.                 }
  106.                
  107.                 if (cs == 'c') {
  108.                     $("#cc").css("background-color","#FFA3A3")
  109.                 }
  110.                 else {
  111.                     $("#cc").css("background-color","#FFFFFF")
  112.                 }
  113.                
  114.                 if (cs == 'a') {
  115.                     $("#ac").css("background-color","#FFA3A3")
  116.                 }
  117.                 else {
  118.                     $("#ac").css("background-color","#FFFFFF")
  119.                 }
  120.                
  121.                 if (cs == 'g') {
  122.                     $("#gc").css("background-color","#FFA3A3")
  123.                 }
  124.                 else {
  125.                     $("#gc").css("background-color","#FFFFFF")
  126.                 }
  127.  
  128.                     /** THIRD LETTER */
  129.                 /** THIRD LETTER */
  130.                 /** THIRD LETTER */
  131.                 df = cod.toLowerCase().charAt(2)
  132.                 if (df == 'u') {
  133.                     $("#uj" + char).css("background-color","#FFFFA3")
  134.                 }
  135.                 else {
  136.                     $("#uj" + char).css("background-color","#FFFFFF")
  137.                 }
  138.                
  139.                 if (df == 'c') {
  140.                     $("#cj" + char).css("background-color","#FFFFA3")
  141.                 }
  142.                 else {
  143.                     $("#cj" + char).css("background-color","#FFFFFF")
  144.                 }
  145.                
  146.                 if (df == 'a') {
  147.                     $("#aj" + char).css("background-color","#FFFFA3")
  148.                 }
  149.                 else {
  150.                     $("#aj" + char).css("background-color","#FFFFFF")
  151.                 }
  152.                
  153.                 if (df == 'g') {
  154.                     $("#gj" + char).css("background-color","#FFFFA3")
  155.                 }
  156.                 else {
  157.                     $("#gj" + char).css("background-color","#FFFFFF")
  158.                 }
  159.                
  160.                 if (cod.length == 3) {
  161.                     var all = document.getElementsByTagName("td");
  162.                     for (var i=0, max=all.length; i < max; i++) {
  163.                         if (all[i].innerHTML.indexOf(cod.toUpperCase()) != -1) {
  164.                             if (all[i].innerHTML.indexOf("td") == -1) {
  165.                                 all[i].setAttribute("style","background-color: #A3FFA3")
  166.                                 document.getElementById("amino").innerHTML = ("Amino Acid: " + all[i].innerHTML.substring(6))
  167.                             }
  168.                         }
  169.                     }
  170.                 }
  171.                 else {
  172.                     var all = document.getElementsByTagName("td");
  173.                     for (var i=0, max=all.length; i < max; i++) {
  174.                         if (all[i].innerHTML.indexOf(" - ") != -1) {
  175.                             if (all[i].innerHTML.indexOf("td") == -1) {
  176.                                 all[i].setAttribute("style","background-color: #FFFFFF")                               
  177.                             }
  178.                         }
  179.                     }
  180.                     $("#amino").html("")
  181.                 }
  182.                
  183.             });
  184.         });
  185.     </script>
  186. </head>
  187. <body>
  188.     <h2 style="margin: 2px; display: inline">Interactive Codon Chart</h2>
  189.     <i>By Kevin Vandermolen - Moore 2<sup>nd</sup> Period Fall 2013</i>
  190.     <table border="1">
  191.         <tr>
  192.             <td>
  193.                 &nbsp;
  194.             </td>
  195.             <td id="uc"><b>U</b></td>
  196.             <td id="cc"><b>C</b></td>
  197.             <td id="ac"><b>A</b></td>
  198.             <td id="gc"><b>G</b></td>
  199.         </tr>
  200.         <tr>
  201.             <td id="ut"><b>U</b></td>
  202.             <td>
  203.                 <table>
  204.                     <tr><td>UUU - Phenylalanine</td></tr>
  205.                     <tr><td>UUC - Phenylalanine</td></tr>
  206.                     <tr><td>UUA - Leucine</td></tr>
  207.                     <tr><td>UUG - Leucine</td></tr>
  208.                 </table>
  209.             </td>
  210.             <td>
  211.                 <table>
  212.                     <tr><td>UCU - Serine</td></tr>
  213.                     <tr><td>UCC - Serine</td></tr>
  214.                     <tr><td>UCA - Serine</td></tr>
  215.                     <tr><td>UCG - Serine</td></tr>
  216.                 </table>
  217.             </td>
  218.             <td>
  219.                 <table>
  220.                     <tr><td>UAU - Tyrosine</td></tr>
  221.                     <tr><td>UAC - Tyrosine</td></tr>
  222.                     <tr><td>UAA - STOP</td></tr>
  223.                     <tr><td>UAG - STOP</td></tr>
  224.                 </table>
  225.             </td>
  226.             <td>
  227.                 <table>
  228.                     <tr><td>UGU - Cysteine</td></tr>
  229.                     <tr><td>UGC - Cysteine</td></tr>
  230.                     <tr><td>UGA - STOP</td></tr>
  231.                     <tr><td>UGG - Tryptophan</td></tr>
  232.                 </table>
  233.             </td>
  234.             <td>
  235.                 <table border="1">
  236.                     <tr><td id="uju"><b>U</b></td></tr>
  237.                     <tr><td id="cju"><b>C</b></td></tr>
  238.                     <tr><td id="aju"><b>A</b></td></tr>
  239.                     <tr><td id="gju"><b>G</b></td></tr>
  240.                 </table>
  241.             </td>
  242.         </tr>
  243.         <tr>
  244.             <td id="ct"><b>C</b></td>
  245.             <td>
  246.                 <table>
  247.                     <tr><td>CUU - Leucine</td></tr>
  248.                     <tr><td>CUC - Leucine</td></tr>
  249.                     <tr><td>CUA - Leucine</td></tr>
  250.                     <tr><td>CUG - Leucine</td></tr>
  251.                 </table>
  252.             </td>
  253.             <td>
  254.                 <table>
  255.                     <tr><td>CCU - Proline</td></tr>
  256.                     <tr><td>CCC - Proline</td></tr>
  257.                     <tr><td>CCA - Proline</td></tr>
  258.                     <tr><td>CCG - Proline</td></tr>
  259.                 </table>
  260.             </td>
  261.             <td>
  262.                 <table>
  263.                     <tr><td>CAU - Histidine</td></tr>
  264.                     <tr><td>CAC - Histidine</td></tr>
  265.                     <tr><td>CAA - Glutamine</td></tr>
  266.                     <tr><td>CAG - Glutamine</td></tr>
  267.                 </table>
  268.             </td>
  269.             <td>
  270.                 <table>
  271.                     <tr><td>CGU - Arginine</td></tr>
  272.                     <tr><td>CGC - Arginine</td></tr>
  273.                     <tr><td>CGA - Arginine</td></tr>
  274.                     <tr><td>CGG - Arginine</td></tr>
  275.                 </table>
  276.             </td>
  277.             <td>
  278.                 <table border="1">
  279.                     <tr><td id="ujc"><b>U</b></td></tr>
  280.                     <tr><td id="cjc"><b>C</b></td></tr>
  281.                     <tr><td id="ajc"><b>A</b></td></tr>
  282.                     <tr><td id="gjc"><b>G</b></td></tr>
  283.                 </table>
  284.             </td>
  285.         </tr>
  286.         <tr>
  287.             <td id="at"><b>A</b></td>
  288.             <td>
  289.                 <table>
  290.                     <tr><td>AUU - Isoleucine</td></tr>
  291.                     <tr><td>AUC - Isoleucine</td></tr>
  292.                     <tr><td>AUA - Isoleucine</td></tr>
  293.                     <tr><td>AUG - Methionine</td></tr>
  294.                 </table>
  295.             </td>
  296.             <td>
  297.                 <table>
  298.                     <tr><td>ACU - Threonine</td></tr>
  299.                     <tr><td>ACC - Threonine</td></tr>
  300.                     <tr><td>ACA - Threonine</td></tr>
  301.                     <tr><td>ACG - Threonine</td></tr>
  302.                 </table>
  303.             </td>
  304.             <td>
  305.                 <table>
  306.                     <tr><td>AAU - Asparagine</td></tr>
  307.                     <tr><td>AAC - Asparagine</td></tr>
  308.                     <tr><td>AAA - Lysine</td></tr>
  309.                     <tr><td>AAG - Lysine</td></tr>
  310.                 </table>
  311.             </td>
  312.             <td>
  313.                 <table>
  314.                     <tr><td>AGU - Serine</td></tr>
  315.                     <tr><td>AGC - Serine</td></tr>
  316.                     <tr><td>AGA - Arginine</td></tr>
  317.                     <tr><td>AGG - Arginine</td></tr>
  318.                 </table>
  319.             </td>
  320.             <td>
  321.                 <table border="1">
  322.                     <tr><td id="uja"><b>U</b></td></tr>
  323.                     <tr><td id="cja"><b>C</b></td></tr>
  324.                     <tr><td id="aja"><b>A</b></td></tr>
  325.                     <tr><td id="gja"><b>G</b></td></tr>
  326.                 </table>
  327.             </td>
  328.         </tr>
  329.         <tr>
  330.             <td id="gt"><b>G</b></td>
  331.             <td>
  332.                 <table>
  333.                     <tr><td>GUU - Valine</td></tr>
  334.                     <tr><td>GUC - Valine</td></tr>
  335.                     <tr><td>GUA - Valine</td></tr>
  336.                     <tr><td>GUG - Valine</td></tr>
  337.                 </table>
  338.             </td>
  339.             <td>
  340.                 <table>
  341.                     <tr><td>GCU - Alanine</td></tr>
  342.                     <tr><td>GCC - Alanine</td></tr>
  343.                     <tr><td>GCA - Alanine</td></tr>
  344.                     <tr><td>GCG - Alanine</td></tr>
  345.                 </table>
  346.             </td>
  347.             <td>
  348.                 <table>
  349.                     <tr><td>GAU - Aspartic Acid</td></tr>
  350.                     <tr><td>GAC - Aspartic Acid</td></tr>
  351.                     <tr><td>GAA - Glutamic Acid</td></tr>
  352.                     <tr><td>GAG - Glutamic Acid</td></tr>
  353.                 </table>
  354.             </td>
  355.             <td>
  356.                 <table>
  357.                     <tr><td>GGU - Glycine</td></tr>
  358.                     <tr><td>GGC - Glycine</td></tr>
  359.                     <tr><td>GGA - Glycine</td></tr>
  360.                     <tr><td>GGG - Glycine</td></tr>
  361.                 </table>
  362.             </td>
  363.             <td>
  364.                 <table border="1">
  365.                     <tr><td id="ujg"><b>U</b></td></tr>
  366.                     <tr><td id="cjg"><b>C</b></td></tr>
  367.                     <tr><td id="ajg"><b>A</b></td></tr>
  368.                     <tr><td id="gjg"><b>G</b></td></tr>
  369.                 </table>
  370.             </td>
  371.         </tr>
  372.     </table>
  373.    
  374.     RNA CODON : <input type="text" id="codon" maxlength="3" size="3">
  375.     <div id="amino" style="display: inline"></div>
  376.     <br>
  377.     AMINO ACID : <input type="text" id="aminoin">
  378.     <div id="codonout" style="display: inline"></div>
  379. </body>
  380. </html>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement
Public Pastes
Advertisement
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy.  OK, I Understand
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!