https://github.com/fs-frost/hui

Reactive HTML UI framework for simple web applications.
https://github.com/fs-frost/hui

ui vanilla-js

Last synced: 4 days ago
JSON representation

Reactive HTML UI framework for simple web applications.

• Host: GitHub
• URL: https://github.com/fs-frost/hui
• Owner: FS-Frost
• Created: 2023-11-15T00:25:40.000Z (about 1 year ago)
• Default Branch: main
• Last Pushed: 2023-11-17T11:53:02.000Z (about 1 year ago)
• Last Synced: 2023-11-18T04:02:08.207Z (about 1 year ago)
• Topics: ui, vanilla-js
• Language: JavaScript
• Homepage: https://fs-frost.github.io/hui/
• Size: 38.1 KB
• Stars: 0
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# hui

Reactive HTML UI framework for simple web applications.

## Demo

https://fs-frost.github.io/hui/

## Usage

```html

    

        

        

        Counter

        

    

    

        


        

            let count = 0;

            function counter() {

                function increaseCounter() {

                    count++;

                    console.log("up it goes!", { count });

                    render();

                }

                function decreaseCounter() {

                    count--;

                    console.log("and down it went!", { count });

                    render();

                }

                function resetCounter() {

                    count = 0;

                    render();

                }

                function generateList(count) {

                    let list = [];

                    for (let i = 1; i <= count; i++) {

                        list.push(p(`${i > 1 ? "," : ""}${i}`));

                    }

                    for (let i = -1; i >= count; i--) {

                        list.unshift(p(`${i}${i < -1 ? "," : ""}`));

                    }

                    return list;

                }

                return div()

                    .$class("m-5")

                    .$append(

                        div(

                            h1("hui demo").$class("title is-1 mb-1"),

                            p("Reactive HTML UI framework for simple web applications"),

                            a("(hui source code)").$href("hui.js").$target("_blank")

                        ),

                        div(

                            h1("hui component").$class("title is-3 mt-3 mb-1"),

                            a("(Source code)").$href("counter.js").$target("_blank"),

                            p(`Count: ${count}`),

                            button("+").$class("button is-success mr-1").$onClick(increaseCounter),

                            button("-").$class("button is-danger mr-1").$onClick(decreaseCounter),

                            button("Reset").$class("button is-info mr-1").$onClick(resetCounter)

                        ),

                        div(...generateList(count)).$class("list")

                    );

            }

            newApp(counter);

        

    

```