aboutsummaryrefslogtreecommitdiff
path: root/examples
diff options
context:
space:
mode:
authorAkshay Nair <phenax5@gmail.com>2024-01-21 19:34:49 +0530
committerAkshay Nair <phenax5@gmail.com>2024-01-21 19:34:49 +0530
commite4db8ebdd6a36df0b3d76504d18d8f183fe46ba9 (patch)
tree807071e55e97d8169158c896822cc57c023c9af1 /examples
parentc9075367a178644d12a179919aa07616938b7315 (diff)
downloadcss-everything-e4db8ebdd6a36df0b3d76504d18d8f183fe46ba9.tar.gz
css-everything-e4db8ebdd6a36df0b3d76504d18d8f183fe46ba9.zip
feat: adds example for calculator
Diffstat (limited to '')
-rw-r--r--examples/calculator/index.html10
-rw-r--r--examples/calculator/style.css155
-rw-r--r--examples/clock/style.css26
-rw-r--r--examples/syntax-ideas.css17
4 files changed, 182 insertions, 26 deletions
diff --git a/examples/calculator/index.html b/examples/calculator/index.html
new file mode 100644
index 0000000..94b50e6
--- /dev/null
+++ b/examples/calculator/index.html
@@ -0,0 +1,10 @@
+<!doctype html>
+<html lang="en">
+ <head>
+ <title>Calculator</title>
+ <link href="./style.css" rel="stylesheet" />
+ </head>
+ <body>
+ <script async defer src="../../dist/renderer/index.js"></script>
+ </body>
+</html>
diff --git a/examples/calculator/style.css b/examples/calculator/style.css
new file mode 100644
index 0000000..605c7ed
--- /dev/null
+++ b/examples/calculator/style.css
@@ -0,0 +1,155 @@
+:root {
+ --cssx-children: main#container;
+}
+
+html, body {
+ margin: 0;
+ padding: 0;
+ background-color: #e2e8f0;
+ font-size: 16px;
+}
+body * {
+ box-sizing: border-box;
+ font-family: Courier, monospace;
+}
+
+#container {
+ --num1: '';
+ --num2: '';
+ --operation: '';
+
+ max-width: 400px;
+ margin: 2rem auto;
+ padding: 1rem;
+ background-color: #020617;
+ color: #e2e8f0;
+
+ --cssx-children: #display hr#sep0 #buttons;
+}
+
+#display {
+ padding: 0 1rem;
+ line-height: 1.7em;
+ font-size: 2rem;
+ height: 3rem;
+ background-color: #0f172a;
+ text-align: right;
+}
+#display::after {
+ content: var(--num1) var(--operation) var(--num2);
+}
+
+#buttons {
+ --cssx-children:
+ h(div#toprow.horizontal, map(), seq(
+ button#btn-clear,
+ button#btn-run,
+ ))
+ div#buttons-numbers
+ div#buttons-operators.horizontal
+ ;
+}
+#buttons > * {
+ display: flex;
+ flex-direction: column;
+ gap: 20px;
+}
+
+#buttons-operators {
+ --cssx-children:
+ instance(button#btn-op, map(--op: "+"))
+ instance(button#btn-op, map(--op: "-"))
+ instance(button#btn-op, map(--op: "*"))
+ instance(button#btn-op, map(--op: "/"))
+ instance(button#btn-op, map(--op: "!"))
+ ;
+}
+
+#buttons-numbers {
+ --cssx-children:
+ instance(button#btn-num, map(--n: "9"))
+ instance(button#btn-num, map(--n: "8"))
+ instance(button#btn-num, map(--n: "7"))
+ instance(button#btn-num, map(--n: "6"))
+ instance(button#btn-num, map(--n: "5"))
+ instance(button#btn-num, map(--n: "4"))
+ instance(button#btn-num, map(--n: "3"))
+ instance(button#btn-num, map(--n: "2"))
+ instance(button#btn-num, map(--n: "1"))
+ instance(button#btn-num, map(--n: "0"))
+ ;
+}
+#buttons-numbers > * {
+ display: grid;
+ grid-template-columns: repeat(3, 1fr);
+ gap: 2px;
+}
+
+[data-instance=btn-num]::after { content: var(--n); }
+[data-instance=btn-num] {
+ width: 100%;
+ --cssx-on-click:
+ if(get-var(--operation),
+ if(equals(get-var(--operation), '!'),
+ '',
+ update('container', --num2, string(get-var(--num2), get-var(--n)))),
+ update('container', --num1, string(get-var(--num1), get-var(--n))),
+ );
+}
+
+[data-instance=btn-op]::after { content: var(--op); }
+[data-instance=btn-op] {
+ width: 100%;
+ --cssx-on-click: update('container', --operation, get-var(--op));
+}
+
+#btn-run::after { content: '='; }
+#btn-run {
+ --factorial: func(--n: number)
+ if(lte(get-var(--n), 1), 1,
+ calc(
+ get-var(--n)
+ * call(--factorial, map(--n: calc(get-var(--n) - 1)))
+ ));
+
+ --cssx-on-click:
+ update('container', --num1,
+ if(equals(get-var(--operation), '!'),
+ call(--factorial, map(--n: get-var(--num1))),
+ if(get-var(--num2),
+ js-eval(string(get-var(--num1), get-var(--operation), get-var(--num2))),
+ get-var(--num1)
+ )
+ )
+ )
+ update('container', --operation, '')
+ update('container', --num2, '');
+}
+
+#btn-clear::after { content: 'clear'; }
+#btn-clear {
+ --cssx-on-click:
+ update('container', --num1, '')
+ update('container', --operation, '')
+ update('container', --num2, '');
+}
+
+button {
+ width: 100%;
+ padding: 0.5rem 0;
+ border: none;
+ background-color: #475569;
+ color: white;
+ font-weight: bold;
+ font-size: 1.3rem;
+ cursor: pointer;
+}
+button:hover { background-color: #334155; }
+button:active { background-color: #64748b; }
+
+body .horizontal > * {
+ width: 100%;
+ display: flex;
+ justify-content: space-between;
+ gap: 2px;
+}
diff --git a/examples/clock/style.css b/examples/clock/style.css
index 110d95b..4115723 100644
--- a/examples/clock/style.css
+++ b/examples/clock/style.css
@@ -15,6 +15,13 @@
));
}
+html, body {
+ margin: 0;
+ padding: 0;
+ background-color: #0f172a;
+ color: #e2e8f0;
+}
+
body * { box-sizing: border-box; }
#digital {
@@ -38,7 +45,7 @@ body * { box-sizing: border-box; }
#digital::after { content: var(--text); }
#analog {
- border: 1px solid red;
+ background-color: #1e293b;
width: 200px;
height: 200px;
margin: 1rem auto;
@@ -50,25 +57,26 @@ body * { box-sizing: border-box; }
--cssx-on-mount: update(--date, call(--get-date));
--cssx-on-update:
- update('[data-element=seconds]', --angle, js-eval("360 * new Date().getSeconds() / 60 - 90"))
- update('[data-element=minutes]', --angle, js-eval("360 * new Date().getMinutes() / 60 - 90"))
- update('[data-element=hours]', --angle,
- js-eval("360 * (new Date().getHours() % 12) / 12 - 90 + (30 * new Date().getMinutes() / 60)")
- )
+ update('[data-element=seconds]', --angle, calc(360 * js-eval("new Date().getSeconds()")/60 - 90))
+ update('[data-element=minutes]', --angle, calc(360 * js-eval("new Date().getMinutes()")/60 - 90))
+ update('[data-element=hours]', --angle, calc(
+ 360 * js-eval("new Date().getHours() % 12")/12 - 90
+ + (30 * js-eval("new Date().getMinutes()")/60)
+ ))
delay(1s)
update(--date, call(--get-date));
}
[data-element=seconds].analog-clock-hand {
- --color: pink;
+ --color: #cbd5e1;
--size: 70px;
}
[data-element=minutes].analog-clock-hand {
- --color: red;
+ --color: #991b1b;
--size: 60px;
}
[data-element=hours].analog-clock-hand {
- --color: blue;
+ --color: #4f46e5;
--size: 40px;
height: 4px;
}
diff --git a/examples/syntax-ideas.css b/examples/syntax-ideas.css
deleted file mode 100644
index bdae5b4..0000000
--- a/examples/syntax-ideas.css
+++ /dev/null
@@ -1,17 +0,0 @@
-body {
- --cssx-children: element-1 element-2 element-3;
-}
-
-#element-1 {
- --cssx-on-click: js-eval('alert("clicked")');
-}
-#element-2 {
- --from-variable: 'is here';
-}
-#element-2::after {
- content: 'My content: ' var(--from-variable);
-}
-
-#element-3 {
- --cssx-on-click: js-eval('alert("clicked")');
-}