<main id="app"></main>
* {
  margin: 0;
  padding: 0;
}

html,
body {
  background: #330033;
  color: #fff;
  font-family: sans-serif;
  width: 100%;
  height: 100%;
  position: relative;
}

h1 {
  font-size: 48px;
  font-weight: normal;
  line-height: 90px;
}

main {
  padding: 40px;
  background-color: #555;
  width: 360px;
  margin: 30px auto auto auto;
  text-align: center;
  border-radius: 30px;
}

button {
  display: block;
  border: 2px orangered solid;
  background: orange;
  font-size: 36px;
  color: #fff;
  border-radius: 10px;
  padding: 10px 20px;
  min-width: 70px;
  cursor: pointer;
  margin: 20px auto auto auto;
}

.counter {
  background: #111;
  width: 160px;
  margin-right: auto;
  margin-left: auto;
}

.counter h1 {
  margin-bottom: 0px;
}

.counter button {
  display: inline-block;
  border-color: cornflowerblue;
  background: aquamarine;
  color: cornflowerblue;
  padding: 5px;
  min-width: 55px;
  margin: 10px;
}

main > p {
  margin: 40px auto 40px auto;
  line-height: 48px;
  font-size: 36px;
  font-weight: bold;
  color: hotpink;
}
import { app } from "https://cdn.skypack.dev/hyperapp";
import html from "https://cdn.skypack.dev/hyperlit";

const Init = (state) => ({
  mode: "start"
});

const Play = (state) => ({
  mode: "play",
  counter: 0,
  score: 0
});

const Incr = (state) =>
  state.mode !== "play"
    ? state
    : {
        mode: state.counter + 1 === 10 ? "finish" : "play",
        counter: state.counter + 1,
        score: state.score + 1
      };

const Decr = (state) =>
  state.mode !== "play"
    ? state
    : {
        ...state,
        counter: state.counter - 1,
        score: state.score + 1
      };

app({
  init: Init,
  view: (state) =>
    state.mode === "start"
      ? html`
          <main>
            <h1>Play a game?</h1>
            <button onclick=${Play}>Sure!</button>
          </main>
        `
      : state.mode === "finish"
      ? html`
          <main>
            <h1>Game Over</h1>
            <p>Score: ${state.score}</p>
            <button onclick=${Init}>Start over</button>
          </main>
        `
      : html`
          <main>
            <div class="counter">
              <h1>${state.counter}</h1>
              <button onclick=${Decr}>-</button>
              <button onclick=${Incr}>+</button>
            </div>
            <p>Score: ${state.score}</p>
            <button onclick=${Init}>Cancel</button>
          </main>
        `,

  node: document.getElementById("app")
});

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.