From f080a163a37c76bc601171b56e2a92a2672b5598 Mon Sep 17 00:00:00 2001 From: AGoetzee Date: Thu, 28 Nov 2024 16:45:29 +0100 Subject: [PATCH 01/10] Added basic webpage layout --- index.html | 54 ++++++++++++++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 54 insertions(+) create mode 100644 index.html diff --git a/index.html b/index.html new file mode 100644 index 0000000..2cdcf0c --- /dev/null +++ b/index.html @@ -0,0 +1,54 @@ + + + + + AlignmentJS + + +
+
+

AlignmentJS

+
+ +
+ +

Inputs and parameters

+ +

+ + + +
+ + + +

+ +

+ + + + + + + + +

+ + +
+ +
+ +

Outputs

+ + + +
+
+ + \ No newline at end of file From 8cf74ab1d8f59e96eb56e93c1506e49987b67f0f Mon Sep 17 00:00:00 2001 From: Arthur <55135668+AGoetzee@users.noreply.github.com> Date: Thu, 5 Dec 2024 16:14:22 +0100 Subject: [PATCH 02/10] prettyPrintAlignment now returns a string instead of logging directly to the console --- alignment.js | 49 ++++++++++++++++++++++++++++--------------------- 1 file changed, 28 insertions(+), 21 deletions(-) diff --git a/alignment.js b/alignment.js index c506247..38a46c9 100644 --- a/alignment.js +++ b/alignment.js @@ -115,30 +115,35 @@ function prettyPrintAlignment(alignment, alignmentComplement) { matchAlignmentRow += `${alignedMatch(alignment[i],alignmentComplement[i])} `; bottomAlignmentRow += `${alignmentComplement[i]} `; } - console.log(topAlignmentRow); - console.log(matchAlignmentRow); - console.log(bottomAlignmentRow); -} -function printResults(alignment, alignmentComplement, scoreMatrix) { - console.log('***** Alignment Report *******'); + let result =` + ${topAlignmentRow} + ${matchAlignmentRow} + ${bottomAlignmentRow}` - console.log('----Parameters----'); - console.log(`Gap penalty: ${GAP_PENALTY}`); - console.log(`Mismatch penalty: ${MISMATCH_PENALTY}`); - console.log(`Match Score: ${MATCH_SCORE}`); - - console.log('------Input-------'); - console.log(`Sequence 1: ${seq1}`); - console.log(`Length: ${seq1.length}`); - - console.log(`\nSequence 2: ${seq2}`); - console.log(`Length: ${seq2.length}`); + return result +} +function printResults(alignment, alignmentComplement, scoreMatrix) { + let result = ` + ***** Alignment Report ******* + + ----Parameters---- + Gap penalty: ${GAP_PENALTY} + Mismatch penalty: ${MISMATCH_PENALTY} + Match Score: ${MATCH_SCORE} + + ------Input------- + Sequence 1: ${seq1} + Length: ${seq1.length} + Sequence 2: ${seq2} + Length: ${seq2.length} + + ------Results------ + Alignment score: ${scoreMatrix[seq1.length-1][seq2.length-1]} + ${prettyPrintAlignment(alignment,alignmentComplement)}`; - console.log('\n------Results------'); - console.log(`Alignment score: ${scoreMatrix[seq1.length-1][seq2.length-1]}`); - prettyPrintAlignment(alignment,alignmentComplement); + return result } @@ -172,4 +177,6 @@ scoreMatrix, tracebackMatrix = calculateScores(scoreMatrix, tracebackMatrix, seq alignment, alignmentComplement = traceback(tracebackMatrix, seq1, seq2); //step 4, print the results! -printResults(alignment, alignmentComplement, scoreMatrix); \ No newline at end of file +result = printResults(alignment, alignmentComplement, scoreMatrix); + +console.log(result) \ No newline at end of file From c53352b6a1870ee389a498c4fbb82cbd8e4f1dbf Mon Sep 17 00:00:00 2001 From: Arthur <55135668+AGoetzee@users.noreply.github.com> Date: Thu, 5 Dec 2024 17:19:07 +0100 Subject: [PATCH 03/10] Separated matrix initialization --- alignment.js | 50 ++++++++++++++++++++++++++++++++------------------ 1 file changed, 32 insertions(+), 18 deletions(-) diff --git a/alignment.js b/alignment.js index 38a46c9..f8203f9 100644 --- a/alignment.js +++ b/alignment.js @@ -1,9 +1,16 @@ // JavaScript implementation of global alignment // Arthur G. Goetzee 2024-11-27 -const GAP_PENALTY = -2 -const MISMATCH_PENALTY = -1 -const MATCH_SCORE = 2 +// Alignment parameters +const GAP_PENALTY = -2; +const MISMATCH_PENALTY = -1; +const MATCH_SCORE = 2; + +// Input variables +let seq1 = 'AGCT'; //rows or i +let seq2 = 'AGCT'; //columns or j +validateSequences(seq1, seq2); + function constructMatrix(seq1, seq2) { let matrix = []; @@ -17,17 +24,27 @@ function constructMatrix(seq1, seq2) { return matrix } -function initializeMatrix(matrix, seq1, seq2) { +function initializeScoreMatrix(matrix, seq1, seq2) { for (let i = 1; i Date: Thu, 5 Dec 2024 17:59:47 +0100 Subject: [PATCH 04/10] Refactor alignment as function and add module support --- alignment.js | 48 +++++++++++++++++++++++++----------------------- package.json | 3 +++ 2 files changed, 28 insertions(+), 23 deletions(-) create mode 100644 package.json diff --git a/alignment.js b/alignment.js index f8203f9..fb78826 100644 --- a/alignment.js +++ b/alignment.js @@ -6,12 +6,6 @@ const GAP_PENALTY = -2; const MISMATCH_PENALTY = -1; const MATCH_SCORE = 2; -// Input variables -let seq1 = 'AGCT'; //rows or i -let seq2 = 'AGCT'; //columns or j -validateSequences(seq1, seq2); - - function constructMatrix(seq1, seq2) { let matrix = []; for (let i = 0; i Date: Thu, 5 Dec 2024 18:15:32 +0100 Subject: [PATCH 05/10] Formatting --- alignment.js | 172 ++++++++++++++++++++++++++------------------------- index.html | 27 ++++---- package.json | 2 +- readme.md | 15 +++-- 4 files changed, 110 insertions(+), 106 deletions(-) diff --git a/alignment.js b/alignment.js index fb78826..cb4c2fd 100644 --- a/alignment.js +++ b/alignment.js @@ -8,39 +8,39 @@ const MATCH_SCORE = 2; function constructMatrix(seq1, seq2) { let matrix = []; - for (let i = 0; i current[1] > max[1] ? current : max)[0]; + tracebackMatrix[i][j] = Object.entries(choices).reduce( + (max, current) => (current[1] > max[1] ? current : max) + )[0]; } } - return scoreMatrix, tracebackMatrix + return scoreMatrix, tracebackMatrix; } function traceback(tracebackMatrix, seq1, seq2) { - let alignment = '' - let alignmentComplement = '' + let alignment = ""; + let alignmentComplement = ""; let i = seq1.length - 1; let j = seq2.length - 1; while (i >= 0 && j >= 0) { - switch (tracebackMatrix[i][j]) { - case 'D': - alignment = `${seq1[i]}${alignment}`; //seq1 - alignmentComplement = `${seq2[j]}${alignmentComplement}`; //seq2 - i--; - j--; - break - case 'U': //go a row Up - alignment = `${seq1[i]}${alignment}`; - alignmentComplement = `-${alignmentComplement}`; - i--; - break; - case 'L': //go a column Left - alignment = `-${alignment}`; - alignmentComplement = `${seq2[j]}${alignmentComplement}`; - j--; - break; - } - - + switch (tracebackMatrix[i][j]) { + case "D": + alignment = `${seq1[i]}${alignment}`; //seq1 + alignmentComplement = `${seq2[j]}${alignmentComplement}`; //seq2 + i--; + j--; + break; + case "U": //go a row Up + alignment = `${seq1[i]}${alignment}`; + alignmentComplement = `-${alignmentComplement}`; + i--; + break; + case "L": //go a column Left + alignment = `-${alignment}`; + alignmentComplement = `${seq2[j]}${alignmentComplement}`; + j--; + break; + } } - return {alignment, alignmentComplement}; - + return { alignment, alignmentComplement }; } function prettyPrintMatrix(matrix, seq1, seq2) { - const header = ' '; + const header = " "; for (let char of seq2) { header += ` ${char}`; } - console.log(header) + console.log(header); - for (let i = 0; i < seq1.length; i++){ + for (let i = 0; i < seq1.length; i++) { let row = `${seq1[i]} `; - for (let j = 0 ;j < seq2.length; j++) { - row += `${matrix[i][j]}`.padEnd(4, ' '); + for (let j = 0; j < seq2.length; j++) { + row += `${matrix[i][j]}`.padEnd(4, " "); } console.log(row); } } function prettyPrintAlignment(alignment, alignmentComplement) { - const alignedMatch = (aa1, aa2) => aa1 === aa2 ? '|' : ' '; - - let topAlignmentRow = ''; - let matchAlignmentRow = ''; - let bottomAlignmentRow = ''; - - for (let i = 0; i < alignment.length; i++){ - + const alignedMatch = (aa1, aa2) => (aa1 === aa2 ? "|" : " "); + + let topAlignmentRow = ""; + let matchAlignmentRow = ""; + let bottomAlignmentRow = ""; + + for (let i = 0; i < alignment.length; i++) { topAlignmentRow += `${alignment[i]} `; - matchAlignmentRow += `${alignedMatch(alignment[i],alignmentComplement[i])} `; + matchAlignmentRow += `${alignedMatch( + alignment[i], + alignmentComplement[i] + )} `; bottomAlignmentRow += `${alignmentComplement[i]} `; } - let result =` + let result = ` ${topAlignmentRow} ${matchAlignmentRow} - ${bottomAlignmentRow}` - - return result + ${bottomAlignmentRow}`; + + return result; } function printResults(alignment, alignmentComplement, scoreMatrix) { @@ -153,46 +154,47 @@ function printResults(alignment, alignmentComplement, scoreMatrix) { Length: ${seq2.length} ------Results------ - Alignment score: ${scoreMatrix[seq1.length-1][seq2.length-1]} - ${prettyPrintAlignment(alignment,alignmentComplement)}`; - - return result + Alignment score: ${scoreMatrix[seq1.length - 1][seq2.length - 1]} + ${prettyPrintAlignment(alignment, alignmentComplement)}`; + return result; } function validateSequences(seq1, seq2) { - if (seq1.length === 0 || seq2.length === 0){ - throw new Error('Sequences cannot be empty!'); + if (seq1.length === 0 || seq2.length === 0) { + throw new Error("Sequences cannot be empty!"); } - if (typeof seq1 != 'string'|| typeof seq2 != 'string') { - throw new Error('Sequences must be strings!'); + if (typeof seq1 != "string" || typeof seq2 != "string") { + throw new Error("Sequences must be strings!"); } } export function runAlignment(seq1, seq2) { - // step 1, initialization let scoreMatrix = constructMatrix(seq1, seq2); let tracebackMatrix = constructMatrix(seq1, seq2); scoreMatrix = initializeScoreMatrix(scoreMatrix, seq1, seq2); - tracebackMatrix = initializeTracebackMatrix(tracebackMatrix, seq1, seq2) - // step 2, calculation - [scoreMatrix, tracebackMatrix] = calculateScores(scoreMatrix, tracebackMatrix, seq1, seq2); + tracebackMatrix = initializeTracebackMatrix(tracebackMatrix, seq1, seq2)[ + // step 2, calculation + (scoreMatrix, tracebackMatrix) + ] = calculateScores(scoreMatrix, tracebackMatrix, seq1, seq2); //step 3, traceback - const { alignment, alignmentComplement } = traceback(tracebackMatrix, seq1, seq2); + const { alignment, alignmentComplement } = traceback( + tracebackMatrix, + seq1, + seq2 + ); //step 4, print the results! return printResults(alignment, alignmentComplement, scoreMatrix); - - } // Input variables -let seq1 = 'AGCT'; //rows or i -let seq2 = 'AGCT'; //columns or j +let seq1 = "AGCT"; //rows or i +let seq2 = "AGCT"; //columns or j validateSequences(seq1, seq2); -console.log(runAlignment(seq1, seq2)); \ No newline at end of file +console.log(runAlignment(seq1, seq2)); diff --git a/index.html b/index.html index 2cdcf0c..d3985ea 100644 --- a/index.html +++ b/index.html @@ -1,7 +1,7 @@ - + AlignmentJS @@ -15,40 +15,37 @@

AlignmentJS

Inputs and parameters

- - - -
+ + + +
- +

- + - + - +

- +

Outputs

- + -
- \ No newline at end of file + diff --git a/package.json b/package.json index 96ae6e5..4720025 100644 --- a/package.json +++ b/package.json @@ -1,3 +1,3 @@ { "type": "module" -} \ No newline at end of file +} diff --git a/readme.md b/readme.md index 2d724ba..2c7fe9a 100644 --- a/readme.md +++ b/readme.md @@ -1,19 +1,24 @@ # AlignmentJS + This is a javascript implementation of the [Needleman-Wunsch algorithm](https://en.wikipedia.org/wiki/Needleman–Wunsch_algorithm) for global sequence alignment. It is a simple implementation that I made to get a better understanding of javascript, as such you may encounter some beginner mistakes. The code is not optimized for performance, but it should work fine for small sequences. Feel free to give feedback or suggestions for improvements in the issues section. ## Usage + Currently you need to hardcode the sequences and parameters in the script. The variables you need to change are: -- `seq1` and `seq2`: the sequences to align -- `GAP_PENALTY`, `MISMATCH_PENALTY` and `MATCH_SCORE`: the scoring parameters -Then you can run the script in a browser, or with node.js: +- `seq1` and `seq2`: the sequences to align +- `GAP_PENALTY`, `MISMATCH_PENALTY` and `MATCH_SCORE`: the scoring parameters + +Then you can run the script in a browser, or with node.js: + ```bash node alignment.js -``` +``` The results will be printed to the console. ## Example + Currently, the script is set up to align the sequences "AGCT" and "AGCT". The output should be: ```bash @@ -36,4 +41,4 @@ Alignment score: 6 A G C T | | | | A G C T -``` \ No newline at end of file +``` From dbd2a5a3b1211985c6040383dcb5dbe0e4bfd186 Mon Sep 17 00:00:00 2001 From: Arthur <55135668+AGoetzee@users.noreply.github.com> Date: Thu, 5 Dec 2024 19:20:04 +0100 Subject: [PATCH 06/10] Button functionality --- index.html | 17 +++++++++-------- script.js | 22 ++++++++++++++++++++++ 2 files changed, 31 insertions(+), 8 deletions(-) create mode 100644 script.js diff --git a/index.html b/index.html index d3985ea..fbc9d05 100644 --- a/index.html +++ b/index.html @@ -10,21 +10,22 @@

AlignmentJS

-
- +

Inputs and parameters

- +
- +

+ Note, these parameters dont work yet. +
@@ -35,17 +36,17 @@

AlignmentJS

- +
-

Outputs

- +
+ diff --git a/script.js b/script.js new file mode 100644 index 0000000..8a9bdf2 --- /dev/null +++ b/script.js @@ -0,0 +1,22 @@ +import { runAlignment } from "./alignment.js"; + +document.getElementById("run").addEventListener("click", function () { + const seq1 = document.getElementById("seq1").value.toUpperCase(); + const seq2 = document.getElementById("seq2").value.toUpperCase(); + + if (!seq1 || !seq2) { + document.getElementById("results").textContent = + "Please enter both sequences."; + return; + } + + if ( !/^[a-zA-Z]+$/.test(seq1) || !/^[a-zA-Z]+$/.test(seq2)) { + document.getElementById("results").textContent = + "Please enter alphabetic characters only." + return + } + + const results = runAlignment(seq1, seq2); + + document.getElementById("results").textContent = results; +}); From e3daa6236b3998b0edcea79a2baa585b1ef48f22 Mon Sep 17 00:00:00 2001 From: Arthur <55135668+AGoetzee@users.noreply.github.com> Date: Thu, 5 Dec 2024 19:20:22 +0100 Subject: [PATCH 07/10] Fixed input sequences not displaying properly --- alignment.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/alignment.js b/alignment.js index cb4c2fd..151511e 100644 --- a/alignment.js +++ b/alignment.js @@ -138,7 +138,7 @@ function prettyPrintAlignment(alignment, alignmentComplement) { return result; } -function printResults(alignment, alignmentComplement, scoreMatrix) { +function printResults(alignment, alignmentComplement, scoreMatrix, seq1, seq2) { const result = ` ***** Alignment Report ******* @@ -189,7 +189,7 @@ export function runAlignment(seq1, seq2) { ); //step 4, print the results! - return printResults(alignment, alignmentComplement, scoreMatrix); + return printResults(alignment, alignmentComplement, scoreMatrix, seq1, seq2); } // Input variables From d579f1a253ba474586fd8e4f87c51164f46dae5f Mon Sep 17 00:00:00 2001 From: Arthur <55135668+AGoetzee@users.noreply.github.com> Date: Thu, 5 Dec 2024 19:29:51 +0100 Subject: [PATCH 08/10] Added copy button --- index.html | 2 ++ script.js | 10 ++++++++++ 2 files changed, 12 insertions(+) diff --git a/index.html b/index.html index fbc9d05..32ad137 100644 --- a/index.html +++ b/index.html @@ -45,6 +45,8 @@

AlignmentJS

                     Results will be displayed here
+ +

diff --git a/script.js b/script.js index 8a9bdf2..5fa2710 100644 --- a/script.js +++ b/script.js @@ -20,3 +20,13 @@ document.getElementById("run").addEventListener("click", function () { document.getElementById("results").textContent = results; }); + +document.getElementById("copyButton").addEventListener("click", function() { + const copyText = document.getElementById("results").textContent + navigator.clipboard.writeText(copyText) + document.getElementById('copyAlert').textContent = "Copied!" + + setTimeout(function() { + document.getElementById('copyAlert').textContent = ""; + }, 1000); +}); From c4bc30314cbafa198d6b24771a0c54f5f832d3c2 Mon Sep 17 00:00:00 2001 From: Arthur <55135668+AGoetzee@users.noreply.github.com> Date: Thu, 5 Dec 2024 19:52:27 +0100 Subject: [PATCH 09/10] Getting ready for site deployment --- .github/workflows/static.yml | 43 ++++++++++++++++++++++++++++++++++++ readme.md | 11 ++++++--- 2 files changed, 51 insertions(+), 3 deletions(-) create mode 100644 .github/workflows/static.yml diff --git a/.github/workflows/static.yml b/.github/workflows/static.yml new file mode 100644 index 0000000..2eb7c8d --- /dev/null +++ b/.github/workflows/static.yml @@ -0,0 +1,43 @@ +# Simple workflow for deploying static content to GitHub Pages +name: Deploy static content to Pages + +on: + # Runs on pushes targeting the default branch + push: + branches: ["*"] + + # Allows you to run this workflow manually from the Actions tab + workflow_dispatch: + +# Sets permissions of the GITHUB_TOKEN to allow deployment to GitHub Pages +permissions: + contents: read + pages: write + id-token: write + +# Allow only one concurrent deployment, skipping runs queued between the run in-progress and latest queued. +# However, do NOT cancel in-progress runs as we want to allow these production deployments to complete. +concurrency: + group: "pages" + cancel-in-progress: false + +jobs: + # Single deploy job since we're just deploying + deploy: + environment: + name: github-pages + url: ${{ steps.deployment.outputs.page_url }} + runs-on: ubuntu-latest + steps: + - name: Checkout + uses: actions/checkout@v4 + - name: Setup Pages + uses: actions/configure-pages@v5 + - name: Upload artifact + uses: actions/upload-pages-artifact@v3 + with: + # Upload entire repository + path: '.' + - name: Deploy to GitHub Pages + id: deployment + uses: actions/deploy-pages@v4 diff --git a/readme.md b/readme.md index 2c7fe9a..7b53ea7 100644 --- a/readme.md +++ b/readme.md @@ -1,9 +1,14 @@ # AlignmentJS -This is a javascript implementation of the [Needleman-Wunsch algorithm](https://en.wikipedia.org/wiki/Needleman–Wunsch_algorithm) for global sequence alignment. It is a simple implementation that I made to get a better understanding of javascript, as such you may encounter some beginner mistakes. The code is not optimized for performance, but it should work fine for small sequences. Feel free to give feedback or suggestions for improvements in the issues section. +This is a javascript implementation of the [Needleman-Wunsch algorithm](https://en.wikipedia.org/wiki/Needleman–Wunsch_algorithm) for global sequence alignment. It is a simple implementation that I made to get a better understanding of javascript and web development, as such you may encounter some beginner mistakes. The code is not optimized for performance, but it should work fine for small sequences. Feel free to give feedback or suggestions for improvements in the issues section. -## Usage +## Web version +A live web version of the script can be found [here](). _Note that not all functionality is implemented yet._ + +## Offline usage + +The script can also be used offline. You can download the repository and run the script with node.js. Currently you need to hardcode the sequences and parameters in the script. The variables you need to change are: - `seq1` and `seq2`: the sequences to align @@ -19,7 +24,7 @@ The results will be printed to the console. ## Example -Currently, the script is set up to align the sequences "AGCT" and "AGCT". The output should be: +Currently, the script is set up to align the sequences `AGCT` and `AGCT`. The output should be: ```bash >>> node alignment.js From 5725c129a4e2dadc591ed81c132705bc43893e33 Mon Sep 17 00:00:00 2001 From: Arthur <55135668+AGoetzee@users.noreply.github.com> Date: Thu, 5 Dec 2024 19:59:20 +0100 Subject: [PATCH 10/10] Formatting --- .github/workflows/static.yml | 58 ++++++++++++++++++------------------ alignment.js | 8 ++++- readme.md | 2 +- script.js | 24 +++++++-------- 4 files changed, 49 insertions(+), 43 deletions(-) diff --git a/.github/workflows/static.yml b/.github/workflows/static.yml index 2eb7c8d..74e7e2b 100644 --- a/.github/workflows/static.yml +++ b/.github/workflows/static.yml @@ -2,42 +2,42 @@ name: Deploy static content to Pages on: - # Runs on pushes targeting the default branch - push: - branches: ["*"] + # Runs on pushes targeting the default branch + push: + branches: ["*"] - # Allows you to run this workflow manually from the Actions tab - workflow_dispatch: + # Allows you to run this workflow manually from the Actions tab + workflow_dispatch: # Sets permissions of the GITHUB_TOKEN to allow deployment to GitHub Pages permissions: - contents: read - pages: write - id-token: write + contents: read + pages: write + id-token: write # Allow only one concurrent deployment, skipping runs queued between the run in-progress and latest queued. # However, do NOT cancel in-progress runs as we want to allow these production deployments to complete. concurrency: - group: "pages" - cancel-in-progress: false + group: "pages" + cancel-in-progress: false jobs: - # Single deploy job since we're just deploying - deploy: - environment: - name: github-pages - url: ${{ steps.deployment.outputs.page_url }} - runs-on: ubuntu-latest - steps: - - name: Checkout - uses: actions/checkout@v4 - - name: Setup Pages - uses: actions/configure-pages@v5 - - name: Upload artifact - uses: actions/upload-pages-artifact@v3 - with: - # Upload entire repository - path: '.' - - name: Deploy to GitHub Pages - id: deployment - uses: actions/deploy-pages@v4 + # Single deploy job since we're just deploying + deploy: + environment: + name: github-pages + url: ${{ steps.deployment.outputs.page_url }} + runs-on: ubuntu-latest + steps: + - name: Checkout + uses: actions/checkout@v4 + - name: Setup Pages + uses: actions/configure-pages@v5 + - name: Upload artifact + uses: actions/upload-pages-artifact@v3 + with: + # Upload entire repository + path: "." + - name: Deploy to GitHub Pages + id: deployment + uses: actions/deploy-pages@v4 diff --git a/alignment.js b/alignment.js index 151511e..aefbd79 100644 --- a/alignment.js +++ b/alignment.js @@ -189,7 +189,13 @@ export function runAlignment(seq1, seq2) { ); //step 4, print the results! - return printResults(alignment, alignmentComplement, scoreMatrix, seq1, seq2); + return printResults( + alignment, + alignmentComplement, + scoreMatrix, + seq1, + seq2 + ); } // Input variables diff --git a/readme.md b/readme.md index 7b53ea7..3d13c88 100644 --- a/readme.md +++ b/readme.md @@ -4,7 +4,7 @@ This is a javascript implementation of the [Needleman-Wunsch algorithm](https:// ## Web version -A live web version of the script can be found [here](). _Note that not all functionality is implemented yet._ +A live web version of the script can be found [here](https://agoetzee.github.io/AlignmentJS/). _Note that not all functionality is implemented yet._ This web version is still a work in progress, and I will be adding more features in the future. Feedback is welcome in the issues section. Go easy on me, this is my first web project. ## Offline usage diff --git a/script.js b/script.js index 5fa2710..17114a6 100644 --- a/script.js +++ b/script.js @@ -3,17 +3,17 @@ import { runAlignment } from "./alignment.js"; document.getElementById("run").addEventListener("click", function () { const seq1 = document.getElementById("seq1").value.toUpperCase(); const seq2 = document.getElementById("seq2").value.toUpperCase(); - + if (!seq1 || !seq2) { document.getElementById("results").textContent = "Please enter both sequences."; return; } - if ( !/^[a-zA-Z]+$/.test(seq1) || !/^[a-zA-Z]+$/.test(seq2)) { - document.getElementById("results").textContent = - "Please enter alphabetic characters only." - return + if (!/^[a-zA-Z]+$/.test(seq1) || !/^[a-zA-Z]+$/.test(seq2)) { + document.getElementById("results").textContent = + "Please enter alphabetic characters only."; + return; } const results = runAlignment(seq1, seq2); @@ -21,12 +21,12 @@ document.getElementById("run").addEventListener("click", function () { document.getElementById("results").textContent = results; }); -document.getElementById("copyButton").addEventListener("click", function() { - const copyText = document.getElementById("results").textContent - navigator.clipboard.writeText(copyText) - document.getElementById('copyAlert').textContent = "Copied!" - - setTimeout(function() { - document.getElementById('copyAlert').textContent = ""; +document.getElementById("copyButton").addEventListener("click", function () { + const copyText = document.getElementById("results").textContent; + navigator.clipboard.writeText(copyText); + document.getElementById("copyAlert").textContent = "Copied!"; + + setTimeout(function () { + document.getElementById("copyAlert").textContent = ""; }, 1000); });