A Pen by Lucien Gendrot on CodePen.
Last active
August 29, 2015 14:25
-
-
Save lgendrot/25328e7891994fdd7f61 to your computer and use it in GitHub Desktop.
DNA/RNA Transcript Tool
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<head> | |
<title>DNA Transcript Tool</title> | |
</head> | |
<div class="container-fluid"> | |
<nav class="navbar navbar-default"> | |
<div class="container-fluid"> | |
<!-- Brand and toggle get grouped for better mobile display --> | |
<div class="navbar-header"> | |
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false"> | |
<span class="sr-only">Toggle navigation</span> | |
<span class="icon-bar"></span> | |
<span class="icon-bar"></span> | |
<span class="icon-bar"></span> | |
</button> | |
<a class="navbar-brand" href="#">DNA Transcript Tool</a> | |
</div> | |
<!-- Collect the nav links, forms, and other content for toggling --> | |
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"> | |
</div> | |
</div> | |
</nav> | |
<div class="row"> | |
<div class="col-md-6 col-md-offset-3 input-area"> | |
<h4>Input Sequence Here</h4> | |
<textarea class="form-control" id="sequence-input" rows="3"></textarea> | |
<div class="radio"> | |
<label> | |
<input type="radio" name="optionsRadios" id="optionsRadios1" value="option1" checked> DNA → RNA | |
</label> | |
</div> | |
<div class="radio"> | |
<label> | |
<input type="radio" name="optionsRadios" id="optionsRadios2" value="option2"> RNA → DNA | |
</label> | |
</div> | |
<div class="radio"> | |
<label> | |
<input type="radio" name="optionsRadios" id="optionsRadios3" value="option3"> Find Possible Coding Sequences (RNA Input) | |
</label> | |
</div> | |
<div class="radio"> | |
<label> | |
<input type="radio" name="optionsRadios" id="optionsRadios4" value="option4"> Find Possible Coding Sequences (DNA Input) | |
</label> | |
</div> | |
<button type="submit" class="btn btn-primary" id="submit-button">Submit</button> | |
</div> | |
</div> | |
<div class="row"> | |
<div class='col-md-10 col-md-offset-1 results-area'> | |
<h1>Results</h1> | |
<div id="results-text"> | |
<div id="instructions" class="col-md-6 col-md-offset-3"> | |
<h3>Welcome</h3> | |
<p>This simple tool is designed to do two things: Translate DNA into RNA (and vice versa) and find all possible coding sequences in a given sequence of DNA. Start codons are AUG and stop codons are UAG, UAA, and UGA </p> | |
<p><ol>Instructions: | |
<li>Enter your DNA or RNA sequence above</li> | |
<li>Select the appropriate options</li> | |
<li>Click submit to see the results here.</li></ol></p> | |
</div> | |
</div> | |
</div> | |
</div> | |
</div> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
function StartCodons(rna_sequence) { | |
var re = /(AUG)/g, | |
str = rna_sequence; | |
var start_indexes = []; | |
while ((match = re.exec(str)) != null) { | |
start_indexes.push(match.index); | |
} | |
return start_indexes; | |
} | |
function FindStop(start_codon, rna_sequence) { | |
index = start_codon; | |
for (i = 0; i < rna_sequence.slice(start_codon, rna_sequence.length).length / 3; i++) { | |
current_codon = rna_sequence.slice(index, index + 3) | |
index += 3 | |
if (current_codon == "UAA" | current_codon == "UAG" | current_codon == "UGA") { | |
return index; | |
}; | |
} | |
return "N/A" | |
} | |
function sequences(rna_sequence) { | |
starts = StartCodons(rna_sequence); | |
stops = []; | |
for (var i = 0; i < starts.length; i++) { | |
stops.push(FindStop(starts[i], rna_sequence)) | |
} | |
sequence_array = [] | |
start_stop_pair = [] | |
for (var i = 0; i < starts.length; i++) { | |
seq_str = rna_sequence.slice(starts[i], stops[i]) | |
if (seq_str !== "" & seq_str.length > 6) { | |
sequence_array.push(seq_str); | |
start_stop_pair.push(starts[i] + ":" + stops[i]) | |
} | |
} | |
return [sequence_array, start_stop_pair]; | |
} | |
bases = ['u', 'c', 'a', 'g'] | |
codons = [] | |
amino_acids = 'FFLLSSSSYY**CC*WLLLLPPPPHHQQRRRRIIIMTTTTNNKKSSRRVVVVAAAADDEEGGGG' | |
for (i = 0; i < bases.length; i++) { | |
for (j = 0; j < bases.length; j++) { | |
for (p = 0; p < bases.length; p++) { | |
codons.push(bases[i] + bases[j] + bases[p]) | |
} | |
} | |
} | |
function AATranslate(sequence) { | |
codon_list = sequence.match(/(...)/g); | |
AAseq = '' | |
for (var i = 0; i < codon_list.length; i++) { | |
AAseq = AAseq.concat(amino_acids[codons.indexOf(codon_list[i].toLowerCase())]) | |
} | |
return AAseq; | |
} | |
function dna_rna(sequence) { | |
sequence = sequence.toUpperCase(); | |
rna = '' | |
for (var i = 0; i < sequence.length; i++) { | |
if (sequence[i] == 'T') { | |
rna += 'U' | |
} else { | |
rna += sequence[i] | |
} | |
} | |
return rna; | |
} | |
function rna_dna(sequence) { | |
sequence = sequence.toUpperCase(); | |
rna = '' | |
for (var i = 0; i < sequence.length; i++) { | |
if (sequence[i] == 'U') { | |
rna += 'T' | |
} else { | |
rna += sequence[i] | |
} | |
} | |
return rna; | |
} | |
$(document).ready(function() { | |
$("#submit-button").click(function() { | |
var sequence = $("#sequence-input").val(); | |
if ($("#optionsRadios1").is(":checked")) { | |
$("#results-text").replaceWith("<div id='results-text'><div class='single-result'><h4>RNA Sequence: </h4><p>" + dna_rna(sequence) + "</p></div></div>") | |
} else if ($("#optionsRadios2").is(":checked")) { | |
$("#results-text").replaceWith("<div id='results-text'>" + rna_dna(sequence) + "</div>") | |
} else if ($("#optionsRadios3").is(":checked")) { | |
var gene_matches = sequences(sequence)[0]; | |
var nucleotide_indexes = sequences(sequence)[1]; | |
$("#results-text").replaceWith("<div id='results-text'></div>") | |
for (var j = 0; j < gene_matches.length; j++) { | |
$("#results-text").append("<div class='single-result'><hr><p>RNA Transcript - " + nucleotide_indexes[j] + gene_matches[j] + "</p><p>Amino Acid Sequence - " + AATranslate(gene_matches[j]) + "<p></div>") | |
} | |
} else if ($("#optionsRadios4").is(":checked")) { | |
var gene_matches = sequences(dna_rna(sequence))[0]; | |
var nucleotide_indexes = sequences(dna_rna(sequence))[1]; | |
$("#results-text").replaceWith("<div id='results-text'></div>") | |
for (var j = 0; j < gene_matches.length; j++) { | |
$("#results-text").append("<div class='single-result'><hr><p><h4>RNA Transcript - " + nucleotide_indexes[j] + "</h4>" + gene_matches[j] + "</p><p><h4>Amino Acid Sequence</h4> " + AATranslate(gene_matches[j]) + "<p></div>") | |
} | |
} | |
}) | |
}) |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script> | |
<script src="//cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.2/jquery-ui.min.js"></script> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
hr { | |
background-color: black; | |
height: 1px; | |
} | |
.input-area { | |
background-color: lightgrey; | |
border: 1px solid grey; | |
margin-bottom: 50px; | |
border-radius: 10px; | |
} | |
#sequence-input { | |
margin-bottom: 10px; | |
} | |
.btn-primary { | |
margin-bottom: 10px; | |
} | |
.results-area { | |
background-color: lightgrey; | |
border-radius: 10px; | |
word-wrap: break-word; | |
border: 1px grey solid; | |
} | |
.results-area h1{ | |
text-align: center; | |
} | |
#instructions { | |
font-size: 120%; | |
} | |
#instructions h3 { | |
text-align: center; | |
font-size: 175%; | |
} | |
.single-result { | |
margin: 0 40px; | |
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet" /> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment