elite/example.html at master · erf/elite · 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
<!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',
        description: 'a tiny declarative js dom lib'
    }

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

    set('app', app)

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

    add('app', el('p', 'Made with ❤ by @apptakk', { 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>