-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathPCR.html
194 lines (169 loc) · 7.13 KB
/
PCR.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
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>PCR Calculators</title>
<!-- Link to the shared CSS (style.css) -->
<link rel="stylesheet" href="style.css">
</head>
<body>
<!-- Header with link back to Home -->
<header class="header">
<h1>PCR Calculators</h1>
<nav class="navbar">
<ul>
<li><a href="index.html">Home</a></li>
</ul>
</nav>
</header>
<!-- Main content with two calculator sections -->
<main>
<!-- 1) DNA Copy Number Calculator -->
<section class="calc-section active">
<h2>DNA Copy Number Calculator</h2>
<!-- Description -->
<p>
Determining the number of copies of a double-stranded DNA template
(genomic DNA, plasmid, or an amplified fragment) is critical for many
genetic quantification applications. For example, when preparing
standards for a standard curve, you need to know the number of copies in
your DNA stock to set up a proper dilution series.
</p>
<p>
This calculator uses the formula:
</p>
<p style="font-style: italic; margin-left: 1rem;">
Number of copies (per µL) =
[DNA concentration (ng/µL) × 6.022×10<sup>23</sup>] /
[Template length (bp) × 1×10<sup>9</sup> × 650]
</p>
<p>
where 6.022×10<sup>23</sup> is Avogadro's number, 650 Da is the
approximate average molecular weight of a base pair, and 1×10<sup>9</sup>
converts ng → g in the denominator.
</p>
<!-- Input Form -->
<form class="calc-form">
<div class="form-group">
<label for="dnaConc">DNA Concentration (ng/µl)</label>
<input type="number" id="dnaConc" placeholder="e.g., 45" step="0.01" />
</div>
<div class="form-group">
<label for="templateLength">Template Length (bp)</label>
<input type="number" id="templateLength" placeholder="e.g., 2300678" />
</div>
<!-- Buttons: Calculate + Clear -->
<button type="button" id="calcCopyBtn" class="primary-btn">Calculate Copy Number</button>
<button type="button" id="clearCopyBtn" class="primary-btn" style="background-color:#999;">
Clear
</button>
</form>
<div id="copyResult" class="result-box"></div>
</section>
<!-- 2) Annealing Temperature Calculator -->
<section class="calc-section active">
<h2>Annealing Temperature Calculator</h2>
<!-- Description -->
<p>
This calculator uses a formula adapted from various primer design
references to estimate the optimal annealing temperature (T<sub>a</sub>*).
Provide the melting temperature of your target (T<sub>m<sub>t</sub></sub>)
and the less stable primer (T<sub>m<sub>p</sub></sub>), then click
"Calculate" to see the suggested annealing temperature.
</p>
<p>
<strong>Formula:</strong>
</p>
<p style="font-style: italic; margin-left: 1rem;">
T<sub>a</sub>* = 0.3 × T<sub>m<sub>p</sub></sub> + 0.7 × T<sub>m<sub>t</sub></sub> − 14.9
</p>
<p>
For example, if T<sub>m</sub>(target) ≈ 88.6 °C and T<sub>m</sub>(primer) ≈ 65.5 °C,
you can estimate T<sub>a</sub>* around 66–67 °C.
</p>
<!-- Input Form -->
<form class="calc-form">
<div class="form-group">
<label for="tmTarget">T<sub>m</sub> of Target (°C)</label>
<input type="number" id="tmTarget" placeholder="e.g., 88.6" step="0.1" />
</div>
<div class="form-group">
<label for="tmPrimer">T<sub>m</sub> of Less Stable Primer (°C)</label>
<input type="number" id="tmPrimer" placeholder="e.g., 65.5" step="0.1" />
</div>
<!-- Buttons: Calculate + Clear -->
<button type="button" id="annealingCalcBtn" class="primary-btn">Calculate T<sub>a</sub>*</button>
<button type="button" id="clearAnnealingBtn" class="primary-btn" style="background-color:#999;">
Clear
</button>
</form>
<div id="annealingResult" class="result-box"></div>
</section>
</main>
<!-- Embedded JS for both calculators -->
<script>
/**************************************************
* 1) DNA Copy Number Calculator
**************************************************/
const calcCopyBtn = document.getElementById('calcCopyBtn');
const clearCopyBtn = document.getElementById('clearCopyBtn');
const copyResult = document.getElementById('copyResult');
const dnaConcInput = document.getElementById('dnaConc');
const tempLenInput = document.getElementById('templateLength');
calcCopyBtn.addEventListener('click', () => {
const dnaConcVal = parseFloat(dnaConcInput.value);
const templateLenVal = parseFloat(tempLenInput.value);
if ( isNaN(dnaConcVal) || isNaN(templateLenVal) || dnaConcVal <= 0 || templateLenVal <= 0 ) {
copyResult.textContent = 'Please enter valid positive numbers for DNA concentration and template length.';
return;
}
// Formula: (DNA conc [ng/µL] × 6.022e23) / (template length [bp] × 1e9 × 650)
const avogadro = 6.022e23;
const numerator = dnaConcVal * avogadro;
const denominator = templateLenVal * 1e9 * 650;
const copiesPerUl = numerator / denominator; // copies / µL
copyResult.innerHTML = `
<p><strong>Copies per µL</strong>:
${copiesPerUl.toExponential(2)}
</p>
`;
});
// Clear Button for DNA Copy Number
clearCopyBtn.addEventListener('click', () => {
dnaConcInput.value = '';
tempLenInput.value = '';
copyResult.innerHTML = '';
});
/**************************************************
* 2) Annealing Temperature Calculator
**************************************************/
const annealingCalcBtn = document.getElementById('annealingCalcBtn');
const clearAnnealingBtn = document.getElementById('clearAnnealingBtn');
const annealingResult = document.getElementById('annealingResult');
const tmTargetInput = document.getElementById('tmTarget');
const tmPrimerInput = document.getElementById('tmPrimer');
annealingCalcBtn.addEventListener('click', () => {
const tmTargetVal = parseFloat(tmTargetInput.value);
const tmPrimerVal = parseFloat(tmPrimerInput.value);
if ( isNaN(tmTargetVal) || isNaN(tmPrimerVal) ) {
annealingResult.textContent = 'Please enter valid numeric values for both Tm of Target and Primer.';
return;
}
// T(a)* = 0.3 * TmPrimer + 0.7 * TmTarget - 14.9
const taStar = (0.3 * tmPrimerVal) + (0.7 * tmTargetVal) - 14.9;
annealingResult.innerHTML = `
<p><strong>Annealing Temperature (T<sub>a</sub>*)</strong>:
${taStar.toFixed(2)} °C
</p>
`;
});
// Clear Button for Annealing Calculator
clearAnnealingBtn.addEventListener('click', () => {
tmTargetInput.value = '';
tmPrimerInput.value = '';
annealingResult.innerHTML = '';
});
</script>
</body>
</html>