<section>
  <textarea name="text" id="in" placeholder="Enter your DNA sequence"></textarea>
  <div class="inabox">
    <h3>DNA</h3>
    <p id="dnapara"></p>
  </div>
    
  <div class="inabox redbox">
    <h3>RNA</h3>
    <p id="rnapara"></p>
  </div>
  
  <div class="inabox greybox">
    <h3>Amino Acids</h3>
    <p id="aminopara"></p>
  </div>
  <div class="inabox bluebox">
    <h3>Proteins</h3>
    <p id="proteinpara"></p>
  </div>
</section>
<button  class="button button-block" id="submit"/>Convert!</button>
/* Brand Resets */
@import "compass/css3";
*, *:before, *:after {
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
 }

body {
  margin: 0;
  font-size: .95em;
  font-family: arial, sans-serif;
  color: #928d88;
}

h1 {
  font-size: 2em;
  margin: 0.67em 0;
}

h2 {
  font-size: 36px;
  font-size: 2.25em;
  margin: 0.83em 0;
}

h3 {
  font-size: 24px;
  font-size: 1.5em;
  margin: 1em 0;
}

h4 {
  font-size: 20px;
  font-size: 1.25em;
  margin: 1.33em 0;
}

h5 {
  font-size: 13px;
  font-size: .8em;
  margin: 1.67em 0;
}

h6 {
  font-size: 15px;
  font-size: .95em;
  margin: 2.33em 0;
}

p {
	  margin: .5em 0;
}

@media only screen and (min-width: 480px) {
    body {
        font-size: 1em;
    }
}
	
.inabox {
  background-color: #333;
  color: #fff;
  padding: 15px;  
  margin: 10px 0;
}

.inabox.redbox {
  background: red;
}

.inabox.greybox {
  background: #999;
}

.inabox.bluebox {
  background: blue;
}

.inabox h3 {
  margin-top: 0;
  font-weight: normal;
}

@media only screen and (min-width: 600px) {
  .inabox {
    width: 23%;
    margin: 1%;
    float: left;
  }
  
  section .inabox:first-child {
    margin-left: 0;
  }

  section .inabox:last-child {
    margin-right: 0;
  }
}

.button {
  border:0;
  outline:none;
  border-radius:0;
  padding:15px 0;
  font-size:2rem;
  font-weight:$bold;
  text-transform:uppercase;
  letter-spacing:.1em;
  background:$main;
  color:$white;
  transition:all.5s ease;
  -webkit-appearance: none;
  &:hover, &:focus {
    background:$main-dark;
  }
}

.button-block {
  display:block;
  width:100%;
}

textarea {
    width: 100%;
    height: 100px;
    line-height: 150%;
    resize:vertical;
}

#rnapara{
  overflow-wrap: break-word;
  word-wrap: break-word;
  hyphens: auto;
}

#dnapara{
  overflow-wrap: break-word;
  word-wrap: break-word;
  hyphens: auto;
}

#aminopara{
  overflow-wrap: break-word;
  word-wrap: break-word;
  hyphens: auto;
}

#proteinpara{
  overflow-wrap: break-word;
  word-wrap: break-word;
  hyphens: auto;
}  
document.getElementById("submit").onclick = function(){
  document.getElementById("submit").disabled = true;
  document.getElementById("in").diabled = true;
  document.getElementById("dnapara").innerHTML = "";
  document.getElementById("rnapara").innerHTML = "";
  document.getElementById("aminopara").innerHTML = "";
  document.getElementById("proteinpara").innerHTML = "";
  let dna = "";
  function generator(dna: string){
    dna = document.getElementById("in").value;
    return(dna);
  }

  class SingleStrandDNA{
    private strand1: string;
    private rna: string;
    private aminoAcids: string[];
    private amino : string;
    private proteins: string;
    constructor(strand: string){
      this.strand1 = strand;
      this.rna = "";
      this.aminoAcids = [];
      this.amino = "";
      this.proteins = "";
    }

    toRNA(){
      for(let i = 0; i <= this.strand1.length; i++){
        if(this.strand1[i] == "G"){
          this.rna += "C";
        }else if(this.strand1[i] == "T"){
          this.rna += "A";
        }else if(this.strand1[i] == "C"){
          this.rna += "G";
        }else if(this.strand1[i] == "A"){
          this.rna += "U";
        }
      }
      console.log(this.strand1)
      return(this.rna);
    }
    toAminoAcid(){
      for(let i = 0; i< this.rna.length; i+=3){
        let part = this.rna.substring(i, i+3)
        //console.log(part);
        if(part == "GCA" || part == "GCC" || part == "GCU" || part == "GCG"){
          this.aminoAcids.push("A");
        }else if(part == "UGC" || part == "UGU"){
          this.aminoAcids.push("C");
        }else if(part == "GAC" || part == "GAU"){
          this.aminoAcids.push("D");
        }else if(part == "GAG" || part == "GAA"){
          this.aminoAcids.push("E");
        }else if(part == "UUC" || part == "UUU"){
          this.aminoAcids.push("F");
        }else if(part == "GGA" || part == "GGG" || part == "GGC" || part == "GGU"){
          this.aminoAcids.push("G");
        }else if(part == "CAC" || part == "CAU"){
          this.aminoAcids.push("H");
        }else if(part == "AUA" || part == "AUC" || part == "AUU"){
          this.aminoAcids.push("I");
        }else if(part == "AAA" || part == "AAG"){
          this.aminoAcids.push("K");
        }else if(part == "UUG" || part == "UUA" || part == "CUA" || part == "CUC" || part == "CUU" || part == "CUG"){
          this.aminoAcids.push("L");
        }else if(part == "AUG"){
          this.aminoAcids.push("M");
        }else if(part == "AAC" || part == "AAU"){
          this.aminoAcids.push("N");
        }else if(part == "CCC" || part == "CCA" || part == "CCU" || part == "CCG"){
          this.aminoAcids.push("P");
        }else if(part == "CAA" || part == "CAG"){
          this.aminoAcids.push("Q");
        }else if(part == "AGA" || part == "AGG" || part == "CGA" || part == "CGC" || part == "CGG" || part == "CGU"){
          this.aminoAcids.push("R");
        }else if(part == "AGC" || part == "AGU" || part == "UCA" || part == "UCC" || part == "UCG" || part == "UCU"){
          this.aminoAcids.push("S");
        }else if(part == "ACA" || part == "ACC" || part == "ACG" || part == "ACU"){
          this.aminoAcids.push("T");
        }else if(part == "GUA" || part == "GUC" || part == "GUG" || part == "GUU"){
          this.aminoAcids.push("V")
        }else if(part == "UGG"){
          this.aminoAcids.push("W");
        }else if(part == "UAC" || part == "UAU"){
          this.aminoAcids.push("Y");
        }
      }
      for(let j in this.aminoAcids){
        this.amino += this.aminoAcids[j];
      }
      return this.amino;
    }
    toProtein(){
      for(let i in this.aminoAcids){
        this.proteins += this.aminoAcids[i];
      }
      return this.proteins;
      console.log("is it the function")
    }
  }

  dna = generator(dna)
  
  let single = new SingleStrandDNA(dna);

  let rna = single.toRNA();
  console.log(rna);
  
  let aminoAcids = single.toAminoAcid();
  console.log(aminoAcids);
  
  let proteins = single.toProtein();
  console.log(proteins);
  
   d();
  
  function p(){
    document.getElementById("proteinpara").innerHTML = proteins;
  }
  
  function a(){
    document.getElementById("aminopara").innerHTML = aminoAcids;
    setTimeout(p, 1000);
  } 
  
  function r(){
    document.getElementById("rnapara").innerHTML = rna;
    setTimeout(a, 1000);
  }
  
  function d(){
    document.getElementById("dnapara").innerHTML = dna;
    setTimeout(r, 1000);
  }
  document.getElementById("in").diabled = false;
  document.getElementById("submit").disabled = false;
  document.getElementById("in").value = "";
}
View Compiled

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.