Team:Aberdeen Scotland/DNA

From 2014.igem.org

(Difference between revisions)
 
(27 intermediate revisions not shown)
Line 5: Line 5:
<meta charset="UTF-8">
<meta charset="UTF-8">
-
<title>Team:Aberdeen Scotland - 2014.ogem.org</title>
+
<title>Team:Aberdeen Scotland/DNA - 2014.ogem.org</title>
<!-- JavaScript -->
<!-- JavaScript -->
Line 28: Line 28:
dna = translate.toDNA({ text: $("#text_in").val() });
dna = translate.toDNA({ text: $("#text_in").val() });
$("#dna_out").val(dna);
$("#dna_out").val(dna);
-
$("#color_dna").html("");
 
}
}
function colors() {
function colors() {
dna = $("#dna_out").val();
dna = $("#dna_out").val();
 +
var canvas = "";
-
if(dna == "") { // check for dna sequence
+
if(dna !== "") { // check for dna sequence
-
return;
+
canvas = translate.colorDNA({ text: $("#dna_out").val() });
}
}
-
canvas = translate.colorDNA({ text: $("#dna_out").val() });
 
$("#color_dna").html(canvas);
$("#color_dna").html(canvas);
}
}
Line 70: Line 69:
<div id="navbar">
<div id="navbar">
<ul class="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">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/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/Project">Project</a></li>
Line 78: Line 77:
<li><a href="https://2014.igem.org/Team:Aberdeen_Scotland/Safety">Safety</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>
<li><a href="https://2014.igem.org/Team:Aberdeen_Scotland/Attributions">Attributions</a></li>
 +
<li><a class="Act" href="https://2014.igem.org/Team:Aberdeen_Scotland/Ethics">Ethics & Outreach</a></li>
</ul>
</ul>
<div id="social">
<div id="social">
Line 95: Line 95:
<div id="sidebar">
<div id="sidebar">
<ul class="sidebar">
<ul class="sidebar">
-
<li><a href="https://2014.igem.org/Team:Aberdeen_Scotland">Overview</a></li>
+
<li><a href="https://2014.igem.org/Team:Aberdeen_Scotland/Ethics">Summary</a></li>
-
<li><a href="#">Blank</a></li>
+
<li><a href="https://2014.igem.org/Team:Aberdeen_Scotland/Ethics/Introspection">Introspection</a></li>
-
<li><a href="#">DNA</a></li>
+
<li><a href="https://2014.igem.org/Team:Aberdeen_Scotland/Ethics/Social">Social</a></li>
 +
<li class="curr"><a class="curr" href="#">DNA App</a></li>
</ul>
</ul>
</div>
</div>
Line 105: Line 106:
<!-- SECTION HEAD -->
<!-- SECTION HEAD -->
<div class="t_overview">
<div class="t_overview">
-
<h1>Overview</h1>
+
<h1>Write in DNA</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>DNA stands for deoxyribonucleic acid. It is the instruction material for all cells in your body. DNA is a long molecule with a double-helix structure that looks something like this:</p>
 +
<img class="fl_left" src="http://upload.wikimedia.org/wikipedia/commons/8/81/ADN_animation.gif" alt="DNA Helix">
 +
<p>"<a href="http://commons.wikimedia.org/wiki/File:ADN_animation.gif#mediaviewer/File:ADN_animation.gif">ADN animation</a>" by <a href="//en.wikipedia.org/wiki/User:Brian0918" class="extiw" title="en:User:Brian0918">brian0918</a><a href="//en.wikipedia.org/wiki/User_talk:Brian0918" class="extiw" title="en:User talk:Brian0918">™</a> - <span class="int-own-work">Own work</span>. Licensed under Public domain via <a href="//commons.wikimedia.org/wiki/">Wikimedia Commons</a>.</p>
 +
<p>This looks very complicated. In order to simplify things, scientists talk about DNA in terms of the sequence of its bases. Bases are the basic building parts of DNA and they carry its information. A DNA molecule can then be characterized more easily in terms of its sequence of bases. This is called genetic sequence or genetic code.</p>
 +
<p>Different genes have different sequences and those sequences determine exactly what the gene does. Some genes regulate other genes, other genes produce proteins and some genes are there for backup in case of something bad happening. So to illustrate all of this, we have created a small app that lets you convert letters, sentences and text into DNA to see how it looks.</p>
 +
<p>This app will let you transcode letters, number and simple punctuation 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>
<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 -->
</div> <br class="clear"> <!-- END OF HEAD -->
Line 113: Line 119:
<div class="input_text">
<div class="input_text">
<p>Type in the text you wish translated to DNA in the following box:</p>
<p>Type in the text you wish translated to DNA in the following box:</p>
-
<input id="text_in" type="text" name="text_in" value="" placeholder="Type your text here">
+
<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">
<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>
<p class="color_black"><sub>*You can try entering your name for instance</sub></p>
</div>
</div>
Line 120: Line 127:
<!-- OUTPUT -->
<!-- OUTPUT -->
<div class="output_dna">
<div class="output_dna">
-
<p>The translation of your text will appear here.</p><br>
+
<p>The translation of your text will appear here:</p>
-
<textarea id="dna_out" rows="5" cols="30" placeholder="DNA will appear here" readonly></textarea>
+
<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">
<input id="to_color" type="button" name="to_color" value="Color Code DNA">
<div id="color_dna"></div>
<div id="color_dna"></div>

Latest revision as of 01:49, 18 October 2014

Team:Aberdeen Scotland/DNA - 2014.ogem.org



Write in DNA

DNA stands for deoxyribonucleic acid. It is the instruction material for all cells in your body. DNA is a long molecule with a double-helix structure that looks something like this:

DNA Helix

"ADN animation" by brian0918 - Own work. Licensed under Public domain via Wikimedia Commons.

This looks very complicated. In order to simplify things, scientists talk about DNA in terms of the sequence of its bases. Bases are the basic building parts of DNA and they carry its information. A DNA molecule can then be characterized more easily in terms of its sequence of bases. This is called genetic sequence or genetic code.

Different genes have different sequences and those sequences determine exactly what the gene does. Some genes regulate other genes, other genes produce proteins and some genes are there for backup in case of something bad happening. So to illustrate all of this, we have created a small app that lets you convert letters, sentences and text into DNA to see how it looks.

This app will let you transcode letters, number and simple punctuation 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: