Clock

From 2f99128e354e5c5334094f072767164c8e4fbd2f Mon Sep 17 00:00:00 2001 From: Akshay Nair Date: Fri, 25 Aug 2023 10:02:27 +0530 Subject: feat: adds clock example --- examples/clock/index.html | 10 +++++ examples/clock/style.css | 98 ++++++++++++++++++++++++++++++++++++++++++++ examples/todo-list/style.css | 4 -- 3 files changed, 108 insertions(+), 4 deletions(-) create mode 100644 examples/clock/index.html create mode 100644 examples/clock/style.css (limited to 'examples') diff --git a/examples/clock/index.html b/examples/clock/index.html new file mode 100644 index 0000000..9c233df --- /dev/null +++ b/examples/clock/index.html @@ -0,0 +1,10 @@ + + + + Clock + + + + + + diff --git a/examples/clock/style.css b/examples/clock/style.css new file mode 100644 index 0000000..a6f8349 --- /dev/null +++ b/examples/clock/style.css @@ -0,0 +1,98 @@ +:root { + --color-gray: #cccccc; + --color-accent: #5180e9; + + font-size: 16px; + font-family: sans-serif; + color: #555; + + --cssx-children: div#digital div#analog; +} + +body * { box-sizing: border-box; } + +#digital { + text-align: center; + padding: 1rem; + font-size: 1.5rem; + + --text: "hello"; + + --js-expr: + new Intl.DateTimeFormat('en-US', { + hour: 'numeric', + minute: 'numeric', + second: 'numeric', + }).format(new Date()); + --get-date: js-eval(get-var(--js-expr)); + + --cssx-on-mount: update(--text, call(--get-date)); + --cssx-on-update: delay(1s) update(--text, call(--get-date)); +} +#digital::after { content: var(--text); } + +#analog { + border: 1px solid red; + width: 200px; + height: 200px; + margin: 1rem auto; + border-radius: 50%; + position: relative; + + --date: ""; + --get-date: js-eval("new Date()"); + + --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)") + ) + delay(1s) + update(--date, call(--get-date)); + + --cssx-children: + div#seconds.analog-clock-hand + div#minutes.analog-clock-hand + div#hours.analog-clock-hand + ; +} + +[data-element=seconds].analog-clock-hand { + --color: pink; + --size: 70px; +} +[data-element=minutes].analog-clock-hand { + --color: red; + --size: 60px; +} +[data-element=hours].analog-clock-hand { + --color: blue; + --size: 40px; + height: 4px; +} + +.analog-clock-hand { + --angle: 0; + --color: black; + --size: 80px; + + width: var(--size); + height: 2px; + position: absolute; + top: 50%; + left: 50%; + transform-origin: 0% 50%; + transform: rotate(0deg); + border-radius: 5px; + + --get-transform: string('rotate(', get-var(--angle), 'deg)'); + + --cssx-on-mount: + update(background-color, get-var(--color)) + update(transform, call(--get-transform)) + ; + --cssx-on-update: update(transform, call(--get-transform)); +} + diff --git a/examples/todo-list/style.css b/examples/todo-list/style.css index ed9875c..cda7003 100644 --- a/examples/todo-list/style.css +++ b/examples/todo-list/style.css @@ -18,10 +18,6 @@ body * { box-sizing: border-box; } border-radius: 5px; overflow: hidden; - --some-str: "Hello"; - - --cssx-on-mount: js-eval(string("alert('", quotify(get-var(--some-str)), "')")); - /* --my-func: */ /* js-eval(get-var(--js)) */ /* delay(1s) */ -- cgit v1.3.1