summaryrefslogtreecommitdiff
path: root/examples/api
diff options
context:
space:
mode:
Diffstat (limited to 'examples/api')
-rw-r--r--examples/api/index.html11
-rw-r--r--examples/api/signup.css77
-rw-r--r--examples/api/style.css38
3 files changed, 0 insertions, 126 deletions
diff --git a/examples/api/index.html b/examples/api/index.html
deleted file mode 100644
index 158ee16..0000000
--- a/examples/api/index.html
+++ /dev/null
@@ -1,11 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
- <head>
- <title>Counter example</title>
- <meta charset="UTF-8">
- <link href="./style.css" rel="stylesheet">
- </head>
- <body>
- <script async defer src="../../dist/index.js"></script>
- </body>
-</html>
diff --git a/examples/api/signup.css b/examples/api/signup.css
deleted file mode 100644
index c5970c7..0000000
--- a/examples/api/signup.css
+++ /dev/null
@@ -1,77 +0,0 @@
-
-#signup-page-content {
- border: 1px solid #888;
- padding: 1rem;
- max-width: 700px;
- margin: 1rem auto;
-
- --cssx-children: form#form;
- --count: '0';
-}
-
-#signup-page-content::before {
- content: "Sign-Up";
- display: block;
- font-size: 2rem;
- border-bottom: 1px solid gray;
-}
-
-#form {
- display: block;
-
- --cssx-on-submit:
- prevent-default()
- add-class(form, 'submitting')
- request('https://httpbin.org/post', POST)
- remove-class(form, 'submitting')
- add-class(form, 'submitted')
- ;
-
- --cssx-children: input#input-email input#input-password actions #message;
-}
-#form.submitted #message::after {
- display: block;
- content: "Form submitted successfully";
-}
-#form.submitting #submit-btn {
- pointer-events: none;
- opacity: .5;
-}
-
-#form input {
- display: block;
- width: 100%;
- padding: 0.4rem 0.8rem;
- margin-top: 1rem;
-}
-
-#input-email {
- --cssx-on-mount:
- set-attr('type', 'email')
- set-attr('name', 'email')
- set-attr('required', 'true')
- set-attr('placeholder', 'Email. Eg:- mail@postbox.com')
- ;
-}
-
-#input-password {
- --cssx-on-mount:
- set-attr('type', 'password')
- set-attr('name', 'password')
- set-attr('required', 'true')
- set-attr('placeholder', 'Password. Eg:- password, password1, password2, password123')
- ;
-}
-
-#actions {
- text-align: right;
- padding-top: 1rem;
- --cssx-children: button#submit-btn;
-}
-
-#submit-btn {
- padding: 0.4rem 0.7rem;
- --cssx-on-mount: set-attr('type', 'submit');
-}
-#submit-btn::after { content: "Sign-Up"; }
-
diff --git a/examples/api/style.css b/examples/api/style.css
deleted file mode 100644
index b79f265..0000000
--- a/examples/api/style.css
+++ /dev/null
@@ -1,38 +0,0 @@
-body {
- --cssx-children: button#signup-btn signup-page;
-}
-body * {
- box-sizing: border-box;
-}
-
-#signup-btn {
- display: inline-block;
- background: #5180e9;
- color: #000;
- padding: 0.5rem 1rem;
- cursor: pointer;
-
- --cssx-on-mount: set-attr('type', 'button');
-
- --cssx-on-click:
- add-class(signup-page, 'loading')
- add-class(signup-btn, 'loading')
- delay(0.5s)
- load-cssx(signup-page-content, './signup.css')
- remove-class(signup-page, 'loading')
- remove-class(signup-btn, 'loading')
- ;
-}
-#signup-btn::after { content: "Register now to start your free trail for $99"; }
-#signup-btn.loading {
- pointer-events: none;
- opacity: 0.4;
-}
-
-#signup-page {
- --cssx-children: signup-page-content;
-}
-#signup-page.loading::after {
- content: "Loading...";
-}
-