Calculator

From e4db8ebdd6a36df0b3d76504d18d8f183fe46ba9 Mon Sep 17 00:00:00 2001 From: Akshay Nair Date: Sun, 21 Jan 2024 19:34:49 +0530 Subject: feat: adds example for calculator --- examples/calculator/index.html | 10 +++ examples/calculator/style.css | 155 +++++++++++++++++++++++++++++++++++++++++ examples/clock/style.css | 26 ++++--- examples/syntax-ideas.css | 17 ----- 4 files changed, 182 insertions(+), 26 deletions(-) create mode 100644 examples/calculator/index.html create mode 100644 examples/calculator/style.css delete mode 100644 examples/syntax-ideas.css (limited to 'examples') 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 @@ + + + + Calculator + + + + + + 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")'); -} -- cgit v1.3.1