forked from ramsterhad/protein_dna_sequence_human_readable
-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
135 lines (106 loc) · 3.59 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />
<meta name="description" content="Human readable sequence parser for protein and DNA">
<meta name="author" content="https://github.com/ramsterhad/">
<title>Human readable sequence parser for protein and DNA/title>
<style>
body {
width: 100%;
font-family: monospace;
}
input{
text-align:center;
font-family: monospace;
}
h1 {
font-size: 3em;
text-align: center;
}
#sequence_input {
font-size: 1.5em;
width: 1000px;
}
#result {
padding-top: 2em;
text-align: left;
width: 520px;
}
.container {
width: 100%;
}
.center-block {
margin: auto;
display: block;
}
.wrapper {
width: 520px;
overflow: hidden; /* add this to contain floated children */
}
.ident {
width: 50px;
float:left; /* add this */
text-align: right;
}
.sequence {
float: left; /* add this */
padding-left: 5px;
}
</style>
</head>
<body>
<h1>Human readable sequence parser for protein and DNA</h1>
<div class="container">
<input type="text" id="sequence_input" class="center-block" placeholder="amino-acid code">
</div>
<div class="container">
<span id="result" class="center-block"></span>
</div>
<script>
document.getElementById("sequence_input").addEventListener("input", (event) => {
const parts = event.target.value.replace(/[^a-z]/gi, "").match(/.{1,10}/g);
const resultElement = document.getElementById("result");
if (parts !== null && parts.length > 0) {
let line = "";
let ident = 1; // Indicator to identify the line better.
let counter = 1; // Every sixth round we go to the next line.
for (let i = 0; i < parts.length; i++) {
// Unless we didn't add six parts to the current line, add parts.
if (counter % 7 !== 0) {
line += parts[i] + " ";
// Do not append more sequence, but create a new entry for the result
// and reset the counter variables.
} else {
appendText(resultElement, ident, line);
counter = 0;
ident += 60;
line = "";
}
counter++;
}
// In case the modulo didn't fire anymore but there were parts of text left.
if (line.length > 0) {
appendText(resultElement, ident, line);
}
} else {
resultElement.innerHTML = "";
}
});
function appendText(resultElement, ident, line) {
const wrapperElement = document.createElement("div");
wrapperElement.classList.add("wrapper");
const identElement = document.createElement("div");
identElement.classList.add("ident");
identElement.innerText = ident;
const sequenceElement = document.createElement("div");
sequenceElement.classList.add("sequence");
sequenceElement.innerText = line;
wrapperElement.appendChild(identElement);
wrapperElement.appendChild(sequenceElement);
resultElement.appendChild(wrapperElement);
}
</script>
</body>
</html>