hyperapp tweeter box

hyperapp-tweeter-box.markdown

hyperapp tweeter box

A Pen by Jorge Bucaran on CodePen.

License.

index.html

<main id=app></main>

script.js

import { h, text, app } from "https://esm.run/hyperapp"

// Html

const textarea = (props) => h("textarea", props)
const main = (...children) => h("main", {}, children)
const section = (...children) => h("section", {}, children)
const button = (onclick, { text: s, ...props }) =>
  h("button", { onclick, ...props }, text(s))
const title = (title) => h("h1", {}, text(title))

// Main

const MAX_LENGTH = 140

const SetText = (state, [content, length]) => ({
  ...state,
  content: length > MAX_LENGTH ? state.content : content,
  count:
    length > MAX_LENGTH
      ? 0
      : state.count + state.content.length - content.length,
})

const Tweet = (state) => ({ content: "", count: MAX_LENGTH })

app({
  init: {
    content: "",
    count: MAX_LENGTH,
  },
  view: ({ content, count }) =>
    main(
      title("Tweeter 🦤"),
      textarea({
        placeholder: "What's on your mind?",
        oninput: (_, { target: { value } }) => [SetText, [value, value.length]],
        value: content,
        rows: 4 + content.length / 100,
      }),
      section(
        text(count),
        button(Tweet, {
          disabled: count >= MAX_LENGTH,
          text: "Tweet",
        })
      )
    ),
  node: document.getElementById("app"),
})

style.css

@import "https://unpkg.com/water.css@2/out/water.min.css";

body {
  display: flex;
  font-size: 1.5em;
  justify-content: center;
}

main {
  width: clamp(45ch, 50%, 75ch);
  display: flex;
  flex-direction: column;
}

textarea {
	transition: .2s;
  resize: none;
  overflow: hidden;
}

section {
  display: flex;
}

button {
  margin: 0 0 0 auto;
}