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
|
<html lang="en">
<head>
<title>Register page</title>
<meta charset="UTF-8" />
<style>
body {
--cssx-children: button#show-form-btn form#signup-form;
}
#show-form-btn::before {
content: 'Show form';
}
#show-form-btn {
/* prettier-ignore */
--cssx-on-click:
add-class(signup-form, 'visible')
add-class(show-form-btn, 'hidden');
}
#show-form-btn.hidden {
display: none;
}
#signup-form {
display: none;
--cssx-children: input#email input#password button#submit-btn;
/* prettier-ignore */
--cssx-on-submit: prevent-default()
set-attr(submit-btn, 'disabled', 'disabled') /* disable submit button */
add-class(signup-form, 'submitting') /* enable state "submitting" */
delay(0.2s) /* fake delay */
request('http://example.com/submit/api', POST) /* post form data to api */
remove-class(signup-form, 'submitting') /* disable state "submitting" */
set-attr(submit-btn, 'disabled', '') /* re-enable submit button */
add-class(signup-form, 'submitted') /* show user that the form is submitted */
;
}
#signup-form.visible {
display: block;
}
#email {
/* prettier-ignore */
--cssx-on-mount:
set-attr('name', 'email')
set-attr('data-testid', attr('name'));
}
#password {
/* prettier-ignore */
--cssx-on-mount:
set-attr('name', 'password')
set-attr('data-testid', attr('name'));
}
#submit-btn {
--cssx-on-mount: set-attr('type', 'submit');
--cssx-text: Submit;
}
</style>
</head>
<body></body>
</html>
|
