Browse Source

insert codons in correct div

pull/1/head
Ravi Shah 5 years ago
parent
commit
7456dc105a
  1. 6
      src/lib.rs
  2. 11
      www/app.html
  3. 26
      www/css/styles.css
  4. 8
      www/index.html

6
src/lib.rs

@ -159,16 +159,16 @@ pub fn main(mut strand: String) {
// window object.
let window = web_sys::window().expect("no global `window` exists");
let document = window.document().expect("should have a document on window");
let body = document.body().expect("document should have a body");
let codons_div = document.get_element_by_id("codons").expect("codons div should exist");
let val = document.create_element("h2").unwrap();
val.set_text_content(Some("Codons:"));
body.append_child(&val).unwrap();
codons_div.append_with_node_1(&val).unwrap();
print!("The translated amino acids are: ");
for i in amino_acids_list {
let val = document.create_element("p").unwrap();
val.set_text_content(Some(&i));
body.append_child(&val).unwrap();
codons_div.append_with_node_1(&val).unwrap();
}
}

11
www/app.html

@ -1,12 +1,21 @@
<!DOCTYPE html>
<html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover">
<meta name="description" content="Easily transcribe and translate DNA into messenger RNA and amino acids">
<title>DNA Transcription &amp; Translation</title>
<link rel="stylesheet" href="/css/styles.css">
</head>
<body>
<noscript>This page contains webassembly and javascript content, please enable javascript in your browser.</noscript>
<script src="./bootstrap.js"></script>
<h1>DNA Transcription &amp; Translation</h1>
<div id="codons">
</div>
<div id="footer">
<p>© 2021 Ravi Shah</p>
</div>
</body>
</html>

26
www/css/styles.css

@ -1,3 +1,18 @@
:root {
--primary-bg-color: #568ea3;
--secondary-bg-color: #E96400;
--main-highlight-color: #a40e4c;
}
::selection {
background: var(--main-highlight-color); /* WebKit/Blink Browsers */
}
::-moz-selection {
background: var(--main-highlight-color); /* Gecko Browsers */
}
* {
box-sizing: border-box;
}
@ -10,13 +25,20 @@ body {
margin: 0;
font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,"Helvetica Neue",sans-serif;
height: 100%;
background-color: var(--primary-bg-color);
color: white;
}
h1 {
h1, h2 {
all: initial;
}
h1 {
h1, h2 {
font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,"Helvetica Neue",sans-serif;
font-size: 23.5px;
color: white;
}
.input-div {
}

8
www/index.html

@ -1,8 +1,11 @@
<!DOCTYPE html>
<html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover">
<meta name="description" content="Easily transcribe and translate DNA into messenger RNA and amino acids">
<title>DNA Transcription &amp; Translation</title>
<link rel="stylesheet" href="/css/styles.css">
</head>
<body>
<noscript>This page contains webassembly and javascript content, please enable javascript in your browser.</noscript>
@ -11,5 +14,8 @@
<input type="text" name="strand">
<input type="submit" value="Submit">
</form>
<div id="footer">
<p>© 2021 Ravi Shah</p>
</div>
</body>
</html>
Loading…
Cancel
Save