Skip to content

Commit 9a5d274

Browse files
Softgod4Softgod4
committed
program ready
1 parent a6aecca commit 9a5d274

File tree

6 files changed

+125
-39
lines changed

6 files changed

+125
-39
lines changed

‎Cargo.toml‎

Lines changed: 2 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -21,9 +21,7 @@ features = [
2121
'Document',
2222
'Element',
2323
'HtmlElement',
24-
'Node',
2524
'Window',
26-
"HtmlInputElement",
27-
"HtmlTextAreaElement",
28-
"Event"
25+
"HtmlInputElement",
26+
"HtmlButtonElement",
2927
]

‎index.html‎

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -22,7 +22,10 @@ <h1>Rust 🦀 and WebAssembly 🕸</h1>
2222
<img src="/image/rust-logo.png" alt="rust-logo">
2323
</div>
2424
<div class="tasks">
25-
<h2>Tasks</h2>
25+
<article class="tasks-engine flex justify-between align-center">
26+
<h2>Tasks</h2>
27+
<button id="remove-all">Remove first task</button>
28+
</article>
2629
<div class="tasks-list">
2730
<label class="tasks-list__item">
2831
<article class="flex align-center justify-center">

‎src/lib.rs‎

Lines changed: 76 additions & 26 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,8 @@
11
mod utils;
22
mod task_inner;
33

4+
use std::fmt::Error;
5+
46
use once_cell::sync::Lazy;
57
use regex::Regex;
68
use wasm_bindgen::prelude::*;
@@ -24,7 +26,9 @@ fn dcmnt() -> Document {
2426
}
2527

2628
fn value_test(str: String) -> bool {
27-
static RE: Lazy<Regex> = Lazy::new(|| Regex::new(r"[^a-zA-Z\s]").unwrap());
29+
static RE: Lazy<Regex> = Lazy::new(||
30+
Regex::new(r"(^$|[^a-zA-Z\s])").unwrap()
31+
);
2832
RE.is_match(&str)
2933
}
3034

@@ -33,6 +37,7 @@ fn value_test(str: String) -> bool {
3337
pub fn create_task(task_name: String) -> Result<(), JsValue> {
3438
let render: Document = dcmnt();
3539
let body: HtmlElement = render.body().expect("document should have a body");
40+
let _ = delete_not_valide();
3641
let tasks_list: web_sys::Element = body
3742
.query_selector(".tasks-list")
3843
.unwrap()
@@ -46,7 +51,20 @@ pub fn create_task(task_name: String) -> Result<(), JsValue> {
4651
}
4752

4853
#[wasm_bindgen]
49-
pub fn not_valide_input() -> Result<(), JsValue> {
54+
pub fn delete_task() -> Result<(), JsError> {
55+
let item = dcmnt()
56+
.query_selector(".tasks-list__item")
57+
.map_err(|_| JsError::new("Query selector failed"))?
58+
.ok_or_else(|| JsError::new("No tasks found"))?;
59+
60+
item.remove();
61+
62+
Ok(())
63+
}
64+
65+
// not valide input
66+
#[wasm_bindgen]
67+
pub fn not_valide() -> Result<(), JsValue> {
5068
let render: Document = dcmnt();
5169
let body: HtmlElement = render.body().expect("document should have a body");
5270
let not_valide_message: web_sys::Element = body
@@ -70,44 +88,76 @@ pub fn not_valide_input() -> Result<(), JsValue> {
7088
Ok(())
7189
}
7290

91+
// for delete not valide input
7392
#[wasm_bindgen]
74-
pub fn greet() -> Result<(), JsValue> {
93+
pub fn delete_not_valide() -> Result<(), JsValue> {
7594
let render: Document = dcmnt();
95+
let body: HtmlElement = render.body().expect("document should have a body");
96+
match body.query_selector(".not-valid") {
97+
Ok(Some(_)) => {
98+
let valid = body.query_selector(".not-valid").unwrap().expect("");
99+
valid.remove();
100+
}
101+
Ok(None) => {
102+
console_log!("not exists");
103+
}
104+
Err(e) => {
105+
console_log!("{:?}", e);
106+
}
107+
}
108+
Ok(())
109+
}
76110

77-
// let body: HtmlElement = render.body().expect("document should have a body");
78-
// let container: Element = body
79-
// .query_selector(".container")
80-
// .unwrap()
81-
// .expect("");
111+
// main function
112+
#[wasm_bindgen]
113+
pub fn greet() -> Result<(), JsValue> {
114+
let render: Document = dcmnt();
82115

83116
// event-listener
84-
let closure: Closure<dyn FnMut(HtmlElement)> = Closure::<dyn FnMut(_)>::new(
85-
move |_: web_sys::HtmlElement| {
86-
let input_value: String = dcmnt()
87-
.get_element_by_id("input-task")
88-
.unwrap()
89-
.dyn_into::<HtmlInputElement>()
90-
.unwrap()
91-
.value();
92-
93-
if !value_test(input_value.clone()) {
94-
console_log!("{}", input_value);
95-
let _ = create_task(input_value);
96-
} else {
97-
let _ = not_valide_input();
98-
}
117+
let add_closure: Closure<dyn FnMut(HtmlElement)> = Closure::<
118+
dyn FnMut(_)
119+
>::new(move |_: web_sys::HtmlElement| {
120+
let input_value: String = dcmnt()
121+
.get_element_by_id("input-task")
122+
.unwrap()
123+
.dyn_into::<HtmlInputElement>()
124+
.unwrap()
125+
.value();
126+
127+
if !value_test(input_value.clone()) {
128+
console_log!("{}", input_value);
129+
let _ = create_task(input_value);
130+
} else {
131+
let _ = not_valide();
99132
}
100-
);
133+
});
134+
135+
// event-listener
136+
let delete_closure: Closure<dyn FnMut(HtmlElement)> = Closure::<
137+
dyn FnMut(_)
138+
>::new(move |_: web_sys::HtmlElement| {
139+
let _ = delete_task();
140+
});
101141

142+
// buttons
102143
let _button: Result<(), JsValue> = render
103144
.get_element_by_id("add-task")
104145
.unwrap()
105146
.add_event_listener_with_callback(
106147
"click",
107-
closure.as_ref().unchecked_ref()
148+
add_closure.as_ref().unchecked_ref()
149+
);
150+
151+
let _delete_btn: Result<(), JsValue> = render
152+
.get_element_by_id("remove-all")
153+
.unwrap()
154+
.add_event_listener_with_callback(
155+
"click",
156+
delete_closure.as_ref().unchecked_ref()
108157
);
109158

110-
closure.forget();
159+
add_closure.forget();
160+
delete_closure.forget();
111161

112162
// testing
113163
// let i: u32 = 1;

‎style/main.css‎

Lines changed: 18 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,7 @@
77
width: auto;
88
text-align: start;
99
margin: 16px;
10+
z-index: 9;
1011
border: 1px solid hsl(210, 4%, 30%);
1112
box-shadow: rgba(0, 0, 0, 0.25) 0px 54px 55px, rgba(0, 0, 0, 0.12) 0px -12px 30px, rgba(0, 0, 0, 0.12) 0px 4px 6px, rgba(0, 0, 0, 0.17) 0px 12px 13px, rgba(0, 0, 0, 0.09) 0px -3px 5px;
1213
}
@@ -42,7 +43,13 @@
4243
border: 1px solid hsl(210, 4%, 30%);
4344
box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;
4445
}
45-
.todo .tasks h2 {
46+
.todo .tasks {
47+
width: 100%;
48+
}
49+
.todo .tasks-engine {
50+
margin-top: 12px;
51+
}
52+
.todo .tasks-engine h2 {
4653
color: #667085;
4754
text-align: start;
4855
font-size: 12px;
@@ -51,6 +58,16 @@
5158
-moz-user-select: none;
5259
user-select: none;
5360
}
61+
.todo .tasks-engine button {
62+
color: #667085;
63+
text-align: start;
64+
font-size: 12px;
65+
font-weight: 300;
66+
cursor: pointer;
67+
-webkit-text-decoration: underline dotted;
68+
text-decoration: underline dotted;
69+
text-decoration-color: #0d7261;
70+
}
5471
.todo .tasks-list__item {
5572
background-color: #f5f6f7;
5673
min-width: 250px;

‎style/main.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/main.scss‎

Lines changed: 24 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,7 @@
77
width: auto;
88
text-align: start;
99
margin: 16px;
10+
z-index: 9;
1011
border: 1px solid hsl(210, 4%, 30%);
1112
box-shadow: rgba(0, 0, 0, 0.25) 0px 54px 55px, rgba(0, 0, 0, 0.12) 0px -12px 30px, rgba(0, 0, 0, 0.12) 0px 4px 6px, rgba(0, 0, 0, 0.17) 0px 12px 13px, rgba(0, 0, 0, 0.09) 0px -3px 5px;
1213

@@ -49,12 +50,29 @@
4950
box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;
5051

5152
.tasks {
52-
h2 {
53-
color: #667085;
54-
text-align: start;
55-
font-size: 12px;
56-
font-weight: 300;
57-
user-select: none;
53+
width: 100%;
54+
55+
&-engine {
56+
57+
margin-top: 12px;
58+
59+
h2 {
60+
color: #667085;
61+
text-align: start;
62+
font-size: 12px;
63+
font-weight: 300;
64+
user-select: none;
65+
}
66+
67+
button {
68+
color: #667085;
69+
text-align: start;
70+
font-size: 12px;
71+
font-weight: 300;
72+
cursor: pointer;
73+
text-decoration: underline dotted;
74+
text-decoration-color: #0d7261;
75+
}
5876
}
5977

6078
&-list {

0 commit comments

Comments
 (0)