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 } from "https://unpkg.com/htm/preact/standalone.module.js";

function App() {
	const { time, status, start, pause, reset } = useStopwatch();

	return html`
  	<div style=${{ width: "100vw", height: "100vh", display: "flex", flexDirection: "column", alignItems: "center", justifyContent: "center", overflowY: "auto" }}>
    	<h1>LSAT Timer</h1>
    </div>
  `;
}

function reducer(state, action) {
	switch (action.type) {
  	case "START": {
    	if (state.status === "off") {
      	return {
          status: "on",
          startTime: new Date(),
          startValue: 
        }
      } else {
      	return {
      	status: "on",
        startTime: new Date(),
        startValue: 
      }
      }
    }
  }
}

function useStopwatch() {
	const [state, dispatch] = useReducer(reducer, { status: "off", startValue: 0 });
  
  const start = useCallback(() => {
  	dispatch({ type: "START" });
  }, [dispatch]);
  
  const pause = useCallback(() => {
  	dispatch({ type: "PAUSE" });
  }, [dispatch]);
  
  const reset = useCallback(() => {
  	dispatch({ type: "RESET" });
  }, [dispatch]);
  
  const time = startValue;

	return { time, status, start, pause, reset };
}

render(html`<${App} />`, document.body);