Skip to content

Commit 149eda5

Browse files
Softgod4Softgod4
committed
add event listener and css
1 parent ec78297 commit 149eda5

File tree

10 files changed

+459
-24
lines changed

10 files changed

+459
-24
lines changed

‎.DS_Store‎

0 Bytes
Binary file not shown.

‎image/rust-logo.png‎

117 KB
Loading

‎index.html‎

Lines changed: 65 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,20 +1,78 @@
11
<!DOCTYPE html>
22
<html lang="en">
3+
34
<head>
45
<meta charset="UTF-8">
56
<meta name="viewport" content="width=device-width, initial-scale=1.0">
67
<link rel="stylesheet" href="./style/global.css">
78
<link rel="stylesheet" href="./style/main.css">
89
<title>Todo App</title>
910
</head>
10-
<body>
11-
<div class="container">
1211

12+
<body>
13+
<div class="container flex justify-center align-center flex-col">
14+
<article class="header flex flex-col">
15+
<h1>Rust 🦀 and WebAssembly 🕸</h1>
16+
<div class="actions flex flex-row">
17+
<p>Todo by Softgod 📝</p>
18+
</div>
19+
</article>
20+
<div class="todo">
21+
<div id="rust-logo">
22+
<img src="/image/rust-logo.png" alt="rust-logo">
23+
</div>
24+
<div class="tasks">
25+
<h2>Tasks</h2>
26+
<div class="tasks-list">
27+
<label class="tasks-list__item">
28+
<article class="flex align-center justify-center">
29+
<p>Todo #1</p>
30+
</article>
31+
<button><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24">
32+
<path d="M18 6L6 18M6 6l12 12" stroke="#B0B0B0" stroke-width="2"
33+
stroke-linecap="round" />
34+
</svg></button>
35+
</label>
36+
<label class="tasks-list__item">
37+
<article class="flex align-center justify-center">
38+
<p>Todo #2</p>
39+
</article>
40+
<button><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24">
41+
<path d="M18 6L6 18M6 6l12 12" stroke="#B0B0B0" stroke-width="2"
42+
stroke-linecap="round" />
43+
</svg></button>
44+
</label>
45+
<label class="tasks-list__item">
46+
<article class="flex align-center justify-center">
47+
<p>Todo #3</p>
48+
</article>
49+
<button><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24">
50+
<path d="M18 6L6 18M6 6l12 12" stroke="#B0B0B0" stroke-width="2"
51+
stroke-linecap="round" />
52+
</svg></button>
53+
</label>
54+
<label class="tasks-list__item">
55+
<article class="flex align-center justify-center">
56+
<p>Todo #4</p>
57+
</article>
58+
<button><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24">
59+
<path d="M18 6L6 18M6 6l12 12" stroke="#B0B0B0" stroke-width="2"
60+
stroke-linecap="round" />
61+
</svg></button>
62+
</label>
63+
</div>
64+
</div>
65+
<div class="add-task flex justify-start align-center">
66+
<input type="text" placeholder="todo name" id="input-task">
67+
<button id="add-task">Add task</button>
68+
</div>
69+
</div>
1370
</div>
1471
</body>
15-
<script type="module">
16-
import init, { greet } from "./pkg/hello_wasm.js";
17-
await init();
18-
greet();
19-
</script>
72+
<script type="module">
73+
import init, { greet } from "./pkg/hello_wasm.js";
74+
await init();
75+
greet();
76+
</script>
77+
2078
</html>

‎src/lib.rs‎

Lines changed: 22 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
mod utils;
22

33
use wasm_bindgen::prelude::*;
4-
use web_sys::{Document, Element, HtmlElement};
4+
use web_sys::{js_sys::JsString, Document, Element, HtmlElement};
55

66
#[wasm_bindgen]
77
extern "C" {
@@ -24,9 +24,28 @@ fn dcmnt() -> Document {
2424
pub fn greet() -> Result<(), JsValue> {
2525
let render: Document = dcmnt();
2626
let body: HtmlElement = render.body().expect("document should have a body");
27-
let container = body.query_selector(".container").unwrap().expect("");
27+
let container: Element = body.query_selector(".container").unwrap().expect("");
28+
29+
// event-listener
30+
let closure: Closure<dyn FnMut(HtmlElement)> =
31+
Closure::<dyn FnMut(_)>::new(move |event: web_sys::HtmlElement| {
32+
let input = dcmnt()
33+
.get_element_by_id("input-task")
34+
.unwrap()
35+
.dyn_into::<HtmlElement>();
36+
console_log!("{:?}", input);
37+
});
38+
39+
let button = render
40+
.get_element_by_id("add-task")
41+
.unwrap()
42+
.add_event_listener_with_callback("click", closure.as_ref().unchecked_ref());
43+
44+
closure.forget();
45+
46+
// testing
2847
let i: u32 = 1;
29-
for _n in i..100 {
48+
for _n in i..5 {
3049
let val: Element = render.create_element("p")?;
3150
val.set_text_content(Some("abc"));
3251
container.append_child(&val)?;

‎style/global.css‎

Lines changed: 40 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,4 @@
1+
@import url("https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&family=Outfit:wght@100..900&family=Roboto+Condensed:ital,wght@0,100..900;1,100..900&display=swap");
12
html,
23
body,
34
div,
@@ -93,7 +94,7 @@ html {
9394
}
9495

9596
body {
96-
font-family: "Rubik", sans-serif;
97+
font-family: "Inter", sans-serif;
9798
font-optical-sizing: auto;
9899
font-weight: 400;
99100
font-size: 14px;
@@ -163,13 +164,48 @@ a:hover {
163164
max-width: auto;
164165
margin-left: auto;
165166
margin-right: auto;
166-
padding: 20px;
167-
border-right: 1px solid hsl(210, 4%, 30%);
168-
border-left: 1px solid hsl(210, 4%, 30%);
167+
height: 100vh;
169168
}
170169
@media (max-width: 690px) {
171170
.container {
172171
padding: 0px 20px !important;
173172
text-align: center !important;
174173
}
174+
}
175+
176+
button, input[type=submit], input[type=reset] {
177+
background: none;
178+
color: inherit;
179+
border: none;
180+
padding: 0;
181+
font: inherit;
182+
cursor: pointer;
183+
outline: inherit;
184+
display: flex;
185+
justify-content: center;
186+
align-items: center;
187+
}
188+
189+
.flex {
190+
display: flex;
191+
}
192+
193+
.justify-center {
194+
justify-content: center;
195+
}
196+
197+
.justify-between {
198+
justify-content: space-between;
199+
}
200+
201+
.align-center {
202+
align-items: center;
203+
}
204+
205+
.flex-col {
206+
flex-direction: column;
207+
}
208+
209+
.flex-row {
210+
flex-direction: row;
175211
}/*# sourceMappingURL=global.css.map */

‎style/global.css.map‎

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎style/global.scss‎

Lines changed: 41 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,5 @@
1+
@import url('https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&family=Outfit:wght@100..900&family=Roboto+Condensed:ital,wght@0,100..900;1,100..900&display=swap');
2+
13
html,
24
body,
35
div,
@@ -93,7 +95,7 @@ html {
9395
}
9496

9597
body {
96-
font-family: "Rubik", sans-serif;
98+
font-family: "Inter", sans-serif;
9799
font-optical-sizing: auto;
98100
font-weight: 400;
99101
font-size: 14px;
@@ -163,13 +165,47 @@ a:hover {
163165
max-width: auto;
164166
margin-left: auto;
165167
margin-right: auto;
166-
167-
padding: 20px;
168-
border-right: 1px solid hsl(210,4%,30%);
169-
border-left: 1px solid hsl(210,4%,30%);
168+
height: 100vh;
170169

171170
@media (max-width: 690px) {
172171
padding: 0px 20px !important;
173172
text-align: center !important;
174173
}
174+
}
175+
176+
button, input[type="submit"], input[type="reset"] {
177+
background: none;
178+
color: inherit;
179+
border: none;
180+
padding: 0;
181+
font: inherit;
182+
cursor: pointer;
183+
outline: inherit;
184+
display: flex;
185+
justify-content: center;
186+
align-items: center;
187+
}
188+
189+
.flex {
190+
display: flex;
191+
}
192+
193+
.justify-center {
194+
justify-content: center;
195+
}
196+
197+
.justify-between {
198+
justify-content: space-between;
199+
}
200+
201+
.align-center {
202+
align-items: center;
203+
}
204+
205+
.flex-col {
206+
flex-direction: column;
207+
}
208+
209+
.flex-row {
210+
flex-direction: row;
175211
}

0 commit comments

Comments
 (0)