Skip to content

Commit c908e97

Browse files
committed
Add "Budget Dashboard" to community example
1 parent 4c36a2a commit c908e97

File tree

3 files changed

+7
-2
lines changed

3 files changed

+7
-2
lines changed

Diff for: demo.html

+1-1
Original file line numberDiff line numberDiff line change
@@ -871,7 +871,7 @@ <h1 class="w3-padding-16 w3-xxxlarge">
871871
}
872872

873873
const Console = () =&gt; div({class: "console"}, Input({id: 1}))
874-
</code></pre><p><b>Demo:</b></p><p id="demo-js-console"></p><p><a href="https://jsfiddle.net/gh/get/library/pure/vanjs-org/vanjs-org.github.io/tree/master/jsfiddle/demo/js-console">Try on jsfiddle</a></p><p>You can also try out the JavaScript console in <a href="/code/console.html" class="w3-hover-opacity">this standalone page</a>.</p><h2 class="w3-xxlarge w3-text-red" id="an-improved-unix-terminal"><a class="self-link" href="#an-improved-unix-terminal">An Improved Unix Terminal</a></h2><hr style="width:50px;border:5px solid red" class="w3-round"><p>Next up is a web-based Unix terminal that connects to your local computer, with notable improvements, all under 300 lines of code. This is to demonstrate that, with <b>VanJS</b>, we can easily provide great extension to commandline utilities with fancy GUI by leveraging all available HTML elements. The program is heavily tested in macOS, and should in theory works in Linux, or in any environment that has <code class="symbol"><a href="https://en.wikipedia.org/wiki/Bourne_shell" class="w3-hover-opacity">/bin/sh</a></code>.</p><p>See <a href="https://github.com/vanjs-org/van/tree/main/demo/terminal" class="w3-hover-opacity">github.com/vanjs-org/van/tree/main/demo/terminal</a> for the app (<a href="https://codesandbox.io/p/sandbox/github/vanjs-org/van/tree/main/demo/terminal" class="w3-hover-opacity">preview</a>).</p><h2 class="w3-xxlarge w3-text-red" id="community-examples"><a class="self-link" href="#community-examples">Community Examples</a></h2><hr style="width:50px;border:5px solid red" class="w3-round"><p>Besides the official <b>VanJS</b> examples, there are also sample apps from the great <b>VanJS</b> community. Below is a curated list (contact <a href="mailto:[email protected]" class="w3-hover-opacity">[email protected]</a> to add yours):</p><table><thead><tr><th>Author</th><th>Project</th><th>Preview</th></tr></thead><tbody><tr><td><a href="https://github.com/yahia-berashish" class="w3-hover-opacity">Yahia Berashish</a></td><td><a href="https://github.com/vitejs/awesome-vite#vanjs" class="w3-hover-opacity"><b>VanJS</b> JavaScript and TypeScript Vite Template</a></td><td><a href="https://codesandbox.io/p/sandbox/github/yahia-berashish/vite-vanjs-ts/tree/main" class="w3-hover-opacity">link</a></td></tr><tr><td><a href="https://github.com/artydev" class="w3-hover-opacity">artydev</a></td><td><a href="https://dev.to/artydev/series/23075" class="w3-hover-opacity"><b>VanJS</b> Series</a></td><td></td></tr><tr><td><a href="https://github.com/barrymun" class="w3-hover-opacity">barrymun</a></td><td><a href="https://github.com/barrymun/division-game" class="w3-hover-opacity">Division Game</a></td><td><a href="http://barrymun.vanjs-division-game.surge.sh/" class="w3-hover-opacity">link</a></td></tr><tr><td><a href="https://github.com/enpitsuLin" class="w3-hover-opacity">enpitsuLin</a></td><td><a href="https://github.com/enpitsuLin/vanjs-todomvc" class="w3-hover-opacity">TODO App</a></td><td><a href="https://codesandbox.io/p/sandbox/github/enpitsuLin/vanjs-todomvc/tree/master?file=%2Fsrc%2Fmain.ts%3A8%2C1" class="w3-hover-opacity">link</a></td></tr><tr><td><a href="https://github.com/kwameopareasiedu" class="w3-hover-opacity">Kwame Opare Asiedu</a></td><td><a href="https://github.com/kwameopareasiedu/vanjs-todo" class="w3-hover-opacity">TODO App</a> with routing and authentication</td><td><a href="https://kwameopareasiedu.github.io/vanjs-todo/" class="w3-hover-opacity">link</a></td></tr><tr><td><a href="https://github.com/CodeByZack" class="w3-hover-opacity">董凯</a></td><td><a href="https://github.com/CodeByZack/local-share" class="w3-hover-opacity">Local Share</a> - A tool for transferring files over LAN, using the WebRTC tech</td><td><a href="https://share.zackdk.com/" class="w3-hover-opacity">link</a></td></tr><tr><td><a href="https://github.com/csm-kb" class="w3-hover-opacity">Kane</a></td><td><a href="https://github.com/csm-kb/vanjs-chartjs-example" class="w3-hover-opacity"><b>VanJS</b> Chart.js graph render</a></td><td><a href="https://codesandbox.io/p/devbox/github/csm-kb/vanjs-chartjs-example/tree/main/?file=%2Fsrc%2Fmain.ts" class="w3-hover-opacity">link</a></td></tr><tr><td><a href="https://github.com/ndrean" class="w3-hover-opacity">Neven DREAN</a></td><td><a href="https://github.com/ndrean/vanjs-dialog-modal" class="w3-hover-opacity">Modal Component &amp; Routing with <b>VanJS</b></a></td><td><a href="https://githubbox.com/ndrean/vanjs-dialog-modal" class="w3-hover-opacity">link</a></td></tr><tr><td><a href="https://github.com/b-rad-c" class="w3-hover-opacity">b rad c</a></td><td><a href="https://github.com/vanjs-org/van/tree/main/addons/van_cone/examples/spa-app" class="w3-hover-opacity"><b>VanJS</b> SPA Template</a></td><td><a href="https://codesandbox.io/p/devbox/github/vanjs-org/van/tree/main/addons/van_cone/examples/spa-app" class="w3-hover-opacity">link</a></td></tr><tr><td><a href="https://github.com/SirenkoVladd" class="w3-hover-opacity">Vlad Sirenko</a></td><td><a href="https://github.com/sirenkovladd/vanjs-leaflet-example" class="w3-hover-opacity"><b>VanJS</b> with Leaflet</a></td><td><a href="https://codesandbox.io/p/devbox/github/sirenkovladd/vanjs-leaflet-example/tree/main/?file=%2Fsrc%2Fmain.js" class="w3-hover-opacity">link</a></td></tr><tr><td><a href="https://github.com/kangaroolab" class="w3-hover-opacity">kangaroolab</a></td><td><a href="https://github.com/kangaroolab/tippy" class="w3-hover-opacity">tippy: a local first note app</a></td><td><a href="https://kangaroolab.github.io/tippy/" class="w3-hover-opacity">link</a></td></tr><tr><td><a href="https://github.com/FredericHeem" class="w3-hover-opacity">FredericHeem</a></td><td><a href="https://github.com/FredericHeem/van-kit" class="w3-hover-opacity">Multi-Page App Starter Kit under 5kB</a></td><td></td></tr><tr><td><a href="https://github.com/FredericHeem" class="w3-hover-opacity">FredericHeem</a></td><td><a href="https://github.com/FredericHeem/van-playground" class="w3-hover-opacity"><b>VanJS</b> Playground with Vite</a></td><td></td></tr></tbody></table></div>
874+
</code></pre><p><b>Demo:</b></p><p id="demo-js-console"></p><p><a href="https://jsfiddle.net/gh/get/library/pure/vanjs-org/vanjs-org.github.io/tree/master/jsfiddle/demo/js-console">Try on jsfiddle</a></p><p>You can also try out the JavaScript console in <a href="/code/console.html" class="w3-hover-opacity">this standalone page</a>.</p><h2 class="w3-xxlarge w3-text-red" id="an-improved-unix-terminal"><a class="self-link" href="#an-improved-unix-terminal">An Improved Unix Terminal</a></h2><hr style="width:50px;border:5px solid red" class="w3-round"><p>Next up is a web-based Unix terminal that connects to your local computer, with notable improvements, all under 300 lines of code. This is to demonstrate that, with <b>VanJS</b>, we can easily provide great extension to commandline utilities with fancy GUI by leveraging all available HTML elements. The program is heavily tested in macOS, and should in theory works in Linux, or in any environment that has <code class="symbol"><a href="https://en.wikipedia.org/wiki/Bourne_shell" class="w3-hover-opacity">/bin/sh</a></code>.</p><p>See <a href="https://github.com/vanjs-org/van/tree/main/demo/terminal" class="w3-hover-opacity">github.com/vanjs-org/van/tree/main/demo/terminal</a> for the app (<a href="https://codesandbox.io/p/sandbox/github/vanjs-org/van/tree/main/demo/terminal" class="w3-hover-opacity">preview</a>).</p><h2 class="w3-xxlarge w3-text-red" id="community-examples"><a class="self-link" href="#community-examples">Community Examples</a></h2><hr style="width:50px;border:5px solid red" class="w3-round"><p>Besides the official <b>VanJS</b> examples, there are also sample apps from the great <b>VanJS</b> community. Below is a curated list (contact <a href="mailto:[email protected]" class="w3-hover-opacity">[email protected]</a> to add yours):</p><table><thead><tr><th>Author</th><th>Project</th><th>Preview</th></tr></thead><tbody><tr><td><a href="https://github.com/yahia-berashish" class="w3-hover-opacity">Yahia Berashish</a></td><td><a href="https://github.com/vitejs/awesome-vite#vanjs" class="w3-hover-opacity"><b>VanJS</b> JavaScript and TypeScript Vite Template</a></td><td><a href="https://codesandbox.io/p/sandbox/github/yahia-berashish/vite-vanjs-ts/tree/main" class="w3-hover-opacity">link</a></td></tr><tr><td><a href="https://github.com/artydev" class="w3-hover-opacity">artydev</a></td><td><a href="https://dev.to/artydev/series/23075" class="w3-hover-opacity"><b>VanJS</b> Series</a></td><td></td></tr><tr><td><a href="https://github.com/barrymun" class="w3-hover-opacity">barrymun</a></td><td><a href="https://github.com/barrymun/division-game" class="w3-hover-opacity">Division Game</a></td><td><a href="http://barrymun.vanjs-division-game.surge.sh/" class="w3-hover-opacity">link</a></td></tr><tr><td><a href="https://github.com/enpitsuLin" class="w3-hover-opacity">enpitsuLin</a></td><td><a href="https://github.com/enpitsuLin/vanjs-todomvc" class="w3-hover-opacity">TODO App</a></td><td><a href="https://codesandbox.io/p/sandbox/github/enpitsuLin/vanjs-todomvc/tree/master?file=%2Fsrc%2Fmain.ts%3A8%2C1" class="w3-hover-opacity">link</a></td></tr><tr><td><a href="https://github.com/kwameopareasiedu" class="w3-hover-opacity">Kwame Opare Asiedu</a></td><td><a href="https://github.com/kwameopareasiedu/vanjs-todo" class="w3-hover-opacity">TODO App</a> with routing and authentication</td><td><a href="https://kwameopareasiedu.github.io/vanjs-todo/" class="w3-hover-opacity">link</a></td></tr><tr><td><a href="https://github.com/CodeByZack" class="w3-hover-opacity">董凯</a></td><td><a href="https://github.com/CodeByZack/local-share" class="w3-hover-opacity">Local Share</a> - A tool for transferring files over LAN, using the WebRTC tech</td><td><a href="https://share.zackdk.com/" class="w3-hover-opacity">link</a></td></tr><tr><td><a href="https://github.com/csm-kb" class="w3-hover-opacity">Kane</a></td><td><a href="https://github.com/csm-kb/vanjs-chartjs-example" class="w3-hover-opacity"><b>VanJS</b> Chart.js graph render</a></td><td><a href="https://codesandbox.io/p/devbox/github/csm-kb/vanjs-chartjs-example/tree/main/?file=%2Fsrc%2Fmain.ts" class="w3-hover-opacity">link</a></td></tr><tr><td><a href="https://github.com/ndrean" class="w3-hover-opacity">Neven DREAN</a></td><td><a href="https://github.com/ndrean/vanjs-dialog-modal" class="w3-hover-opacity">Modal Component &amp; Routing with <b>VanJS</b></a></td><td><a href="https://githubbox.com/ndrean/vanjs-dialog-modal" class="w3-hover-opacity">link</a></td></tr><tr><td><a href="https://github.com/b-rad-c" class="w3-hover-opacity">b rad c</a></td><td><a href="https://github.com/vanjs-org/van/tree/main/addons/van_cone/examples/spa-app" class="w3-hover-opacity"><b>VanJS</b> SPA Template</a></td><td><a href="https://codesandbox.io/p/devbox/github/vanjs-org/van/tree/main/addons/van_cone/examples/spa-app" class="w3-hover-opacity">link</a></td></tr><tr><td><a href="https://github.com/SirenkoVladd" class="w3-hover-opacity">Vlad Sirenko</a></td><td><a href="https://github.com/sirenkovladd/vanjs-leaflet-example" class="w3-hover-opacity"><b>VanJS</b> with Leaflet</a></td><td><a href="https://codesandbox.io/p/devbox/github/sirenkovladd/vanjs-leaflet-example/tree/main/?file=%2Fsrc%2Fmain.js" class="w3-hover-opacity">link</a></td></tr><tr><td><a href="https://github.com/kangaroolab" class="w3-hover-opacity">kangaroolab</a></td><td><a href="https://github.com/kangaroolab/tippy" class="w3-hover-opacity">tippy: a local first note app</a></td><td><a href="https://kangaroolab.github.io/tippy/" class="w3-hover-opacity">link</a></td></tr><tr><td><a href="https://github.com/JTravis76" class="w3-hover-opacity">Jeremy R. Travis</a></td><td><a href="https://github.com/JTravis76/budget-dashboard" class="w3-hover-opacity">Budget Dashboard</a></td><td><a href="https://jtravis76.github.io/budget-dashboard/" class="w3-hover-opacity">link</a></td></tr><tr><td><a href="https://github.com/FredericHeem" class="w3-hover-opacity">FredericHeem</a></td><td><a href="https://github.com/FredericHeem/van-kit" class="w3-hover-opacity">Multi-Page App Starter Kit under 5kB</a></td><td></td></tr><tr><td><a href="https://github.com/FredericHeem" class="w3-hover-opacity">FredericHeem</a></td><td><a href="https://github.com/FredericHeem/van-playground" class="w3-hover-opacity"><b>VanJS</b> Playground with Vite</a></td><td></td></tr></tbody></table></div>
875875
<aside id="toc"><ul><li><a href="#hello-world" class="w3-hover-opacity">Hello World!</a></li><li><a href="#dom-composition-and-manipulation" class="w3-hover-opacity">DOM Composition and Manipulation</a></li><li><a href="#counter" class="w3-hover-opacity">Counter</a></li><li><a href="#stopwatch" class="w3-hover-opacity">Stopwatch</a></li><li><a href="#blog" class="w3-hover-opacity">Blog</a></li><li><a href="#list" class="w3-hover-opacity">List</a></li><li><a href="#todo-list" class="w3-hover-opacity">TODO List</a></li><li><a href="#todo-app" class="w3-hover-opacity">A Fully Reactive TODO App</a></li><li><a href="#game" class="w3-hover-opacity">Fun Game: Emojis Pops</a></li><li><a href="#code-browser" class="w3-hover-opacity">SPA w/ Client-Side Routing: Code Browser</a></li><li><a href="#stargazers" class="w3-hover-opacity">Stargazers</a></li><li><a href="#epoch-timestamp-converter" class="w3-hover-opacity">Epoch Timestamp Converter</a></li><li><a href="#keyboard-event-inspector" class="w3-hover-opacity">Keyboard Event Inspector</a></li><li><a href="#diff" class="w3-hover-opacity">Diff</a></li><li><a href="#calculator" class="w3-hover-opacity">Calculator</a></li><li><a href="#table-viewer" class="w3-hover-opacity">Table-View Example: JSON/CSV Table Viewer</a></li><li><a href="#package-lock-inspector" class="w3-hover-opacity">package-lock.json Inspector</a></li><li><a href="#json-inspector" class="w3-hover-opacity">Tree-View Example: JSON Inspector</a></li><li><a href="#auto-complete" class="w3-hover-opacity">Textarea with Autocomplete</a></li><li><a href="#html-md-to-vanjs-code-converter" class="w3-hover-opacity">HTML/MD to VanJS Code Converter</a></li><li><a href="#jupyter-like-javascript-console" class="w3-hover-opacity">Jupyter-like JavaScript Console</a></li><li><a href="#an-improved-unix-terminal" class="w3-hover-opacity">An Improved Unix Terminal</a></li><li><a href="#community-examples" class="w3-hover-opacity">Community Examples</a></li></ul></aside>
876876
</div>
877877
</div>

0 commit comments

Comments
 (0)