pyscript-collective/examples/dna/index.html at e3f0b3e2be35d94b79db513774eb7e87bd211acf · pyscript/pyscript-collective · GitHub

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
<!--
    contributor: https://github.com/meg-1
    tags: example-tag, dna, genetic-algorithms, combinatorics
-->

<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">

<head>
    <meta name="viewport" content="width=device-width,initial-scale=1"/>
    <meta charset="utf-8" />
    <title>dna</title>
    <link rel="stylesheet" href="https://pyscript.net/alpha/pyscript.css" />
    <link rel="stylesheet" href="styles/styles.css" />
</head>

<body>

    <header>
        <h1 id="header_h1">Welcome to the "Complementary DNA converter"!</h1>
    </header>

    <main style="">

        <div class="flexelement" id="first_div">
            <p id="first_p">
                Welcome to the "Complementary DNA converter"
                <br />
                <strong>"how does it work?"</strong>
                The "Complementary DNA converter", given one side of a DNA strand returns the other,
                complementary side of said strand.
                To learn more, please visit:
                <i>
                    <a href="https://en.wikipedia.org/wiki/DNA#Transcription_and_translation"
                       style="color: #0095E8;" target="_blank">
                        about DNA transcription and translation
                        <img src="assets/dna.png" style="height: 275px; margin-top: 2%;" />

                    </a>
                </i>
            </p>


        </div>


        <div class="flexelement">

            <div id="form">

                <div style="margin-top: 20%;">

                    <label>Initial DNA strand:</label><br>
                    <input id="initial_dna" type="text"/> <br />

                    <button pys-onClick="dna" id="calc">Get Result</button>

                    <div style="margin-top: 2%;">
                        <span id="dna_result"></span>
                    </div>

                </div>

            </div>

        </div>

        <py-script>
            def dna(*args, **kwargs):
                output = Element("dna_result")
                p = str(Element("initial_dna").value)
                res = p.translate(p.maketrans("ATCGatcg","TAGCTAGC"))
                output.write("complementary side: " + str(res))
        </py-script>

        <script defer src="https://pyscript.net/alpha/pyscript.js"></script>

    </main>

    <footer>
        <p id="footer_p">
            Thank you for using the "Complementary DNA converter",
            powered by PyScript!
        </p>
    </footer>

</body>

</html>