feat: integrates parser and evaluator and creates a complete working example

1 files changed, 19 insertions, 5 deletions

diff --git a/examples/api/style.css b/examples/api/style.css
index d1be912..213d9e2 100644
--- a/examples/api/style.css
+++ b/examples/api/style.css
@@ -3,20 +3,34 @@ body {
 }
 
 #load-btn {
+  display: inline-block;
+  border: 1px solid gray;
+  padding: 0.5rem 1rem;
+  cursor: pointer;
+
   --cssx-on-click:
+    add-class(output-container, 'loading')
     add-class(load-btn, 'loading')
-    get('./more-style.css')
-    add-class(load-btn, 'hidden');
+    delay('2000')
+    remove-class(output-container, 'loading')
+    add-class(output-container, 'loaded')
+    remove-class(load-btn, 'loading')
+    js-eval('alert("Loaded page")')
+  ;
 }
+#load-btn::after { content: "Click me for magic"; }
 #load-btn.loading {
   pointer-events: none;
   opacity: 0.4;
 }
-#load-btn.hidden {
-  display: none;
-}
 
 #output-container {
   --cssx-children: output-container-content;
 }
+#output-container.loading::after {
+  content: "Loading...";
+}
+#output-container.loaded::after {
+  content: "This content is loaded my guy";
+}