Team:Aberdeen Scotland/DNA
From 2014.igem.org
(Difference between revisions)
Line 1: | Line 1: | ||
- | + | <html> | |
+ | <head> | ||
- | + | <!-- Charset --> | |
- | + | <meta charset="UTF-8"> | |
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | <title>Team:Aberdeen Scotland - 2014.ogem.org</title> | |
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | <!-- JavaScript --> | |
- | + | <script src="https://2014.igem.org/Template:Team:Aberdeen_Scotland/JS?action=raw&ctype=text/js"></script> | |
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | <!-- Include CSS --> | |
- | + | <link rel="stylesheet" type="text/css" href="https://2014.igem.org/Template:Team:Aberdeen_Scotland/CSS?action=raw&ctype=text/css"> | |
- | + | ||
- | + | <!-- Include jQuery --> | |
- | + | <script src="http://code.jquery.com/jquery-1.11.0.min.js"></script> | |
- | + | <script src="http://code.jquery.com/jquery-migrate-1.2.1.min.js"></script> | |
- | + | ||
- | + | <!-- DNA Translator --> | |
- | + | <script src="https://2014.igem.org/Team:Aberdeen_Scotland/DNA/JS?action=raw&ctype=text/js"></script> | |
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | <!-- DNA CSS --> | |
- | + | <link rel="stylesheet" type="text/css" href="https://2014.igem.org/Team:Aberdeen_Scotland/DNA/CSS?action=raw&ctype=text/css"> | |
- | + | ||
- | + | ||
- | + | ||
- | + | <!-- Manual scripting --> | |
- | + | <script type="text/javascript"> | |
- | } | + | function update() { |
+ | dna = translate.toDNA({ text: $("#text_in").val() }); | ||
+ | $("#dna_out").val(dna); | ||
+ | $("#color_dna").html(""); | ||
+ | } | ||
- | + | function colors() { | |
- | + | dna = $("#dna_out").val(); | |
- | + | ||
+ | if(dna == "") { // check for dna sequence | ||
+ | return; | ||
+ | } | ||
- | # | + | canvas = translate.colorDNA({ text: $("#dna_out").val() }); |
+ | $("#color_dna").html(canvas); | ||
+ | } | ||
- | + | $(document).ready( | |
+ | function() { | ||
+ | $("#dna_out").val(""); | ||
+ | translate = new dna({}); | ||
- | # | + | $("#to_dna").click(update); // update DNA on button click |
- | + | $("#text_in").keypress( function() { // update DNA on Enter key | |
- | } | + | var kcode = event.keyCode || event.which; |
+ | if(kcode == 13) { //Enter keycode | ||
+ | update(); | ||
+ | } | ||
+ | }); | ||
- | + | $("#to_color").click(colors); // create color DNA canvas | |
- | + | } | |
- | + | ); | |
- | + | </script> | |
- | + | ||
- | + | </head> | |
- | + | <body> | |
- | + | <div id="wrapper"> | |
- | + | <div id="header"> | |
+ | <div class="logo"> | ||
+ | <a href="http://abdn.ac.uk" title="University of Aberdeen"></a> | ||
+ | </div> | ||
+ | <div id="navbar"> | ||
+ | <ul class="navbar"> | ||
+ | <li><a class="Act" href="https://2014.igem.org/Team:Aberdeen_Scotland">Home</a></li> | ||
+ | <li><a href="https://2014.igem.org/Team:Aberdeen_Scotland/Team">Team</a></li> | ||
+ | <li><a href="https://2014.igem.org/Team:Aberdeen_Scotland/Project">Project</a></li> | ||
+ | <li><a href="https://2014.igem.org/Team:Aberdeen_Scotland/Parts">Parts</a></li> | ||
+ | <li><a href="https://2014.igem.org/Team:Aberdeen_Scotland/Modeling">Modelling</a></li> | ||
+ | <li><a href="https://2014.igem.org/Team:Aberdeen_Scotland/Notebook">Notebook</a></li> | ||
+ | <li><a href="https://2014.igem.org/Team:Aberdeen_Scotland/Safety">Safety</a></li> | ||
+ | <li><a href="https://2014.igem.org/Team:Aberdeen_Scotland/Attributions">Attributions</a></li> | ||
+ | </ul> | ||
+ | <div id="social"> | ||
+ | <ul class="social"> | ||
+ | <li><a href="http://twitter.com/iGEM2014ABDN" title="Twitter"><img src="https://static.igem.org/mediawiki/2014/7/78/Tw_inv_22.png"></a></li> | ||
+ | <li><a href="http://plus.google.com/106825238674841642988" rel="publisher" title="Google+"><img src="https://static.igem.org/mediawiki/2014/4/45/G%2B22.png"></a></li> | ||
+ | <li><a href="http://www.facebook.com/iGEM2014ABDN" title="Facebook"><img src="https://static.igem.org/mediawiki/2014/3/35/Fb_icon_22.png"></a></li> | ||
+ | </ul> | ||
+ | </div> | ||
+ | </div> | ||
- | + | </div> <br class="clear"> <!-- END OF HEADER --> | |
- | + | ||
- | + | <div id="pcontent"> | |
- | + | <br class="clear"> | |
+ | <!-- SIDEBAR --> | ||
+ | <div id="sidebar"> | ||
+ | <ul class="sidebar"> | ||
+ | <li><a href="https://2014.igem.org/Team:Aberdeen_Scotland">Overview</a></li> | ||
+ | <li><a href="#">Blank</a></li> | ||
+ | <li><a href="#">DNA</a></li> | ||
+ | </ul> | ||
+ | </div> | ||
- | + | <div id="container"> | |
- | + | ||
- | + | ||
- | + | ||
- | + | <!-- SECTION HEAD --> | |
- | + | <div class="t_overview"> | |
- | + | <h1>Overview</h1> | |
- | + | <p>This app will let you transcode text to DNA. The mapping alphabet is using the E. Coli codon bias and can translate the following characters:</p> | |
- | + | <p class="list_chars">Letters [a to z] and [A to Z], Digits [0 to 9],<br>Spaces [ ] and the Full-Stop[.]</p> | |
+ | </div> <br class="clear"> <!-- END OF HEAD --> | ||
+ | |||
+ | <!-- INPUT --> | ||
+ | <div class="input_text"> | ||
+ | <p>Type in the text you wish translated to DNA in the following box:</p> | ||
+ | <textarea id="text_in" rows="2" cols="70" placeholder="Type your text here"></textarea> | ||
+ | <input id="to_dna" type="button" name="to_dna" value="Translate"> | ||
+ | <br class="clear"> | ||
+ | <p class="color_black"><sub>*You can try entering your name for instance</sub></p> | ||
+ | </div> | ||
- | + | <!-- OUTPUT --> | |
- | + | <div class="output_dna"> | |
- | + | <p>The translation of your text will appear here:</p> | |
- | + | <textarea id="dna_out" rows="5" cols="70" placeholder="DNA will appear here" readonly></textarea> | |
- | + | <input id="to_color" type="button" name="to_color" value="Color Code DNA"> | |
+ | <div id="color_dna"></div> | ||
+ | </div> | ||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | + | </div> <!-- END OF CONTAINER --> | |
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | </div> <br class="clear"> <!-- END OF PAGE CONTENT --> | |
- | + | ||
- | + | ||
- | + | ||
- | . | + | <div id="footer"> |
- | + | ||
- | + | <ul class="sponsors"> | |
- | + | <li><a href="http://www.abdn.ac.uk/" title="University of Aberdeen"><img src="https://static.igem.org/mediawiki/2014/c/c6/Uni_of_ab.png"></a></li> | |
- | + | <li><a href="http://www.bbsrc.ac.uk/" title="BBSRC"><img src="https://static.igem.org/mediawiki/2014/a/a9/Bbsrc.png"></a></li> | |
- | + | <li><a href="http://www.biochemistry.org" title="Biochemical Society"><img src="https://static.igem.org/mediawiki/2014/7/7c/Biochem_soc.png"></a></li> | |
- | + | <li><a href="http://www.sgm.ac.uk/" title="Society for General Microbiology"><img src="https://static.igem.org/mediawiki/2014/f/f5/Soc_general_microb.png"></a></li> | |
- | + | <li><a href="http://www.sulsa.ac.uk/" title="SULSA"><img src="https://static.igem.org/mediawiki/2014/2/24/Sulsa.png"></a></li> | |
+ | </ul> | ||
- | + | </div> <!-- END OF FOOTER --> | |
- | + | </div> <!-- END OF PAGE WRAPPER--> | |
- | + | </body> | |
- | + | </html> | |
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | / | + | |
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + |
Revision as of 22:24, 12 August 2014
Overview
This app will let you transcode text to DNA. The mapping alphabet is using the E. Coli codon bias and can translate the following characters:
Letters [a to z] and [A to Z], Digits [0 to 9],
Spaces [ ] and the Full-Stop[.]
Type in the text you wish translated to DNA in the following box:
*You can try entering your name for instance
The translation of your text will appear here: