Math flashcards

App.js

import React from "react";
import "./App.css";
import { FlashCards } from "./MultiplicationFlash";


function App() {
  return (
    <div className="App">
      <header className="App-header">
        <FlashCards />
        <a
          className="App-link"
          href="https://reactjs.org"
          target="_blank"
          rel="noopener noreferrer"
        >
          Learn React
        </a>
      </header>
    </div>
  );
}

export default App;

MultiplicationFlash.css

.flashcards {
  display: flex;
  flex-direction: column;
  width: 100vw;
  height: 100vh;
  font-size: 2em;
  color: white;
  align-items: center;
}

.flashcards button {
  background-color: transparent;
  border-radius: 0;
  border: 3px solid white;
  color: white;
  padding: 30px;
  font-size: 2em;
}

.flashcard ul {
  list-style: none;
  width: 100%;
}

.flashcard ul li {
  text-align: right;
  width: 1em;
}

.flashcard ul li:nth-child(2)::before {
  content: "x";
}

.flashcard ul li:nth-child(2) {
  border-bottom: 5px solid white;
}

MultiplicationFlash.tsx

import React, { useState, useReducer, useCallback, useRef } from "react";
import "./MultiplicationFlash.css";

function randomTop() {
  return [3, 4, 6, 7, 8, 9][Math.round(Math.random() * 70) % 6];
}

function randomBottom() {
  return [3, 4, 5, 6, 7, 8, 9][Math.round(Math.random() * 70) % 7];
}

export function FlashCard({
  top,
  bottom,
  show,
  setShow
}: {
  top: number;
  bottom: number;
  show: boolean;
  setShow: (a: boolean) => void;
}) {
  return (
    <div className="flashcard">
      <ul>
        <li>{top}</li>
        <li>{bottom}</li>
        <li onClick={() => setShow(!show)}>{show ? top * bottom : "?"}</li>
      </ul>
    </div>
  );
}

export function FlashCards() {
  const [show, setShow] = useState(false);
  const timeout = useRef<number>();
  const [{ top, bottom }, dispatch] = useReducer(
    (state, action) => {
      return {
        top: randomTop(),
        bottom: randomBottom()
      };
    },
    { top: 6, bottom: 6 }
  );
  const next = () => {
    dispatch(1);
    if (timeout.current) {
      clearTimeout(timeout.current);
    }
    setShow(false);
    timeout.current = setTimeout(() => {
      setShow(true);
      timeout.current = 0;
    }, 2000);
  };

  return (
    <div className="flashcards">
      <FlashCard top={top} bottom={bottom} show={show} setShow={setShow} />
      <button onClick={next}>Next</button>
    </div>
  );
}