elite-plus/example.html at master · erf/elite-plus · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
<!DOCTYPE html>

<title>elite - tiny dom lib</title>

<meta charset="utf-8" />

<style>
    body {
        font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .elite {
        font-size: 48pt;
    }

    .btn {
        border: 1px solid #ccc;
        border-radius: 3px;
        background: #fff;
        cursor: pointer;
    }
</style>

<main id='app'></main>

<script src="elite.js"></script>
<script>

    const data = {
        title: 'elite-plus',
        description: 'a tiny declarative js dom lib'
    }

    const app = el([
        { n: 'h1', t: data.title, a: { class: 'elite' } },
        { n: 'p', t: data.description, a: { style: "background: #ffe088; padding: 8pt;" } },
        { n: 'button', t: 'Press', a: { class: 'btn' }, e: { click: (e) => alert('YO') } },
        { n: 'br' }, { n: 'br' },
        {
            n: 'form', e: {
                submit: (e) => {
                    e.preventDefault()
                    get('bottom').innerHTML = `Welcome ${get('input').value} ❤`
                }
            },
            c: [
                { n: 'input', a: { id: 'input', placeholder: 'Name', required: true } },
                { n: 'button', t: 'join', a: { class: 'btn', style: "margin-left: 8pt;" }, }
            ]
        },
        { n: 'p', a: { id: 'bottom' } }
    ])

    set('app', app)

    add('app', el({ n: 'a', t: 'github', a: { href: 'https://github.com/erf/elite-plus', target: '_blank' } }))

    add('app', el({ n: 'p', t: 'Made with ❤ by @apptakk', a: { style: "margin-top: 24pt; color: #9999; font-size: 13px" } }))


    // test performance
    /*
    let t0 = performance.now()
    for (let i = 0; i < 1000000; i++) {
        el('p','test' + i)
    }
    let t1 = performance.now()
    console.log('perf took ' + (t1 - t0) + ' milliseconds.')
    */

</script>