JSFiddle - React, Tailwind, and code Playground

by Josh Pullen

HTML

<!--
  Create timer that keeps you on track to do n questions in m minutes
  (default 23 questions in 35 minutes)
-->

JavaScript

import { html, render, useState, useReducer, useEffect, useCallback } from "https://unpkg.com/htm/preact/standalone.module.js";

function App() {
	const [settings, setSettings] = useState(null);

	const { time, status, start, pause, reset } = useStopwatch();
  
  if (settings === null) {
  	const onSubmit = (event) => {
    	event.preventDefault();
      
      const data = new FormData(event.target);
      reset();
      setSettings({
      	totalTime: 60 * Number(data.get("totalTime")),
        questions: Number(data.get("questions"))
      });
    }
  
    return html`
    	<h1>LSAT Timer</h1>
      <form onSubmit=${onSubmit}>
        <label>
          <div>Number of questions:</div>
          <input type="number" name="questions" defaultValue=${23} />
        </label>
        <label>
          <div>Total time (minutes):</div>
          <input type="number" name="totalTime" defaultValue=${35} />
        </label>
        <div>
          <input type="submit" value="Confirm" />
        </div>
      </form>
    `;
  }
  
	const durationPerQuestion = settings.totalTime / settings.questions;
  
  const currentQuestion = 1 + Math.floor(time / durationPerQuestion);
	const timeRemainingOnQuestion = (time % durationPerQuestion) / durationPerQ;

	return html`
    <h1>LSAT Timer</h1>
    <div>Question ${currentQuestion}</div>
    <div>Time remaining: ${timeRemainingOnQuestion}</div>
    ${status === "off" && html`
      <button onClick=${start}>Start</button>
      ${time > 0 && html`<button onClick=${reset}>Reset</button>`}
      <button onClick=${() => setSettings(null)}>Change settings</button>
    `}
    ${status === "on" && html`
      <button onClick=${pause}>Pause</button>
    `}
  `;
}

function getTime(state) {
	switch (state.status) {
    case "off":
    	return state.startValue;
    case "on":
    	return state.startValue + (Date.now() - state.startTime) / 1000;
    default:
      return 0;
  }
}

function reducer(state, action) {
	switch (action.type) {
 ...