Skip to content

Instantly share code, notes, and snippets.

@ds604

ds604/counter.markdown

Created October 29, 2018 10:42
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save ds604/f7a3483606f6c46ac35f34bf8c57a856 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save ds604/f7a3483606f6c46ac35f34bf8c57a856 to your computer and use it in GitHub Desktop.
Download ZIP

Revisions

  1. ds604 created this gist Oct 29, 2018.
    7 changes: 7 additions & 0 deletions counter.markdown
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,7 @@
    Counter
    -------


    A [Pen](https://codepen.io/jorgebucaran/pen/zNxZLP) by [Jorge Bucaran](https://codepen.io/jorgebucaran) on [CodePen](https://codepen.io).

    [License](https://codepen.io/jorgebucaran/pen/zNxZLP/license).
    21 changes: 21 additions & 0 deletions script.babel
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,21 @@
    const { h, app } = hyperapp
    // @jsx h

    const state = {
    count: 0
    }

    const actions = {
    down: value => state => ({ count: state.count - value }),
    up: value => state => ({ count: state.count + value })
    }

    const view = (state, actions) => (
    <main>
    <h1>{state.count}</h1>
    <button onclick={() => actions.down(1)} disabled={state.count <= 0}>ー</button>
    <button onclick={() => actions.up(1)}>＋</button>
    </main>
    )

    app(state, actions, view, document.body)
    1 change: 1 addition & 0 deletions scripts
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1 @@
    <script src="https://unpkg.com/hyperapp"></script>
    48 changes: 48 additions & 0 deletions style.scss
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,48 @@
    body {
    align-items: center;
    background-color: #111;
    display: flex;
    font-family: Helvetica Neue, sans-serif;
    height: 100vh;
    justify-content: center;
    margin: 0;
    padding: 0;
    line-height: 1;
    text-align: center;
    color: #00caff;
    }
    h1 {
    color: inherit;
    font-weight: 100;
    font-size: 8em;
    margin: 0;
    padding-bottom: 15px;
    }
    button {
    background: #111;
    border-radius: 0px;
    border: 1px solid #00caff;
    color: inherit;
    font-size: 2em;
    font-weight: 100;
    line-height: inherit;
    margin: 0;
    outline: none;
    padding: 5px 15px 10px;
    transition: background .2s;
    }
    button:hover,
    button:active,
    button:disabled {
    background: #00caff;
    color: #111;
    }
    button:active {
    outline: 2px solid #00caff;
    }
    button:focus {
    border: 1px solid #00caff;
    }
    button + button {
    margin-left: 3px;
    }