Initial commit

src/app.css

@@ -0,0 +1,25 @@
+#app {
+  max-width: 1280px;
+  margin: 0 auto;
+  padding: 2rem;
+  text-align: center;
+}
+
+.logo {
+  height: 6em;
+  padding: 1.5em;
+}
+.logo:hover {
+  filter: drop-shadow(0 0 2em #646cffaa);
+}
+.logo.preact:hover {
+  filter: drop-shadow(0 0 2em #673ab8aa);
+}
+
+.card {
+  padding: 2em;
+}
+
+.read-the-docs {
+  color: #888;
+}

src/app.tsx

@@ -0,0 +1,63 @@
+import { useState } from 'preact/hooks'
+import './app.css'
+
+
+export function App() {
+  // choose number between 2 and max inclusive
+  const getRandomInt = (max : number) : number => Math.floor(Math.random() * (max - 1) + 2)
+
+  const chooseFactors = () : [number, number] => [ getRandomInt(200), getRandomInt(200) ]
+
+  const gcd = (a : number, b : number) : number => {
+    if (b > a) return gcd(b, a)
+    else if (b == 0) return a
+    else return gcd(b, a % b)
+  }
+
+  const doCheck = (e : Event) : void => {
+    e.preventDefault()
+    const rightAnswer = gcd(factors[0], factors[1])
+    const yourAnswer = (document.getElementById("inlineFormInputResponse") as HTMLInputElement).value
+    if (rightAnswer == Number(yourAnswer)) {
+      setCorrect(true)
+      setFeedback(true)
+    } else {
+      setFeedback(true)
+    }
+    
+  }
+
+  const doNext = (e : Event) : void => {
+    e.preventDefault()
+    setFeedback(false)
+    setCorrect(false)
+    setFactors(chooseFactors())
+    document.forms[0].reset()
+  }
+
+  const [factors, setFactors] = useState(chooseFactors())
+
+  const [correct, setCorrect] = useState(false)
+  const [feedback, setFeedback] = useState(false)
+
+  return (
+      <div className="px-4 py-5 my-5 text-center">
+        <h1 className="my-5">Greatest Common Factor Practice</h1>
+        <p className="fs-3">What is the greatest common factor of <mark>{factors[0]}</mark> and <mark>{factors[1]}</mark>?</p>
+        <form className="row row-cols-lg-auto g-3 align-items-center justify-content-center">
+          <div className="col-12">
+            <label className="visually-hidden" for="inlineFormInputResponse">Response</label>
+            <div className="input-group">
+              <input type="text" size={3} autocomplete="off" className="form-control text-center" id="inlineFormInputResponse" />
+            </div>
+          </div>
+          <div className="col-12">
+            <button type="submit" onClick={correct ? doNext : doCheck} className="btn btn-primary">{correct ? "Next" : "Check"}</button>
+          </div>
+        </form>
+        <div className={feedback ? "visible" : "invisible"}>
+          <div className={correct ? "alert alert-success m-4" : "alert alert-danger m-4"}>{correct ? "Correct" : "Try again!"}</div>
+        </div>
+      </div>
+  )
+}

src/assets/preact.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="27.68" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 296"><path fill="#673AB8" d="m128 0l128 73.9v147.8l-128 73.9L0 221.7V73.9z"></path><path fill="#FFF" d="M34.865 220.478c17.016 21.78 71.095 5.185 122.15-34.704c51.055-39.888 80.24-88.345 63.224-110.126c-17.017-21.78-71.095-5.184-122.15 34.704c-51.055 39.89-80.24 88.346-63.224 110.126Zm7.27-5.68c-5.644-7.222-3.178-21.402 7.573-39.253c11.322-18.797 30.541-39.548 54.06-57.923c23.52-18.375 48.303-32.004 69.281-38.442c19.922-6.113 34.277-5.075 39.92 2.148c5.644 7.223 3.178 21.403-7.573 39.254c-11.322 18.797-30.541 39.547-54.06 57.923c-23.52 18.375-48.304 32.004-69.281 38.441c-19.922 6.114-34.277 5.076-39.92-2.147Z"></path><path fill="#FFF" d="M220.239 220.478c17.017-21.78-12.169-70.237-63.224-110.126C105.96 70.464 51.88 53.868 34.865 75.648c-17.017 21.78 12.169 70.238 63.224 110.126c51.055 39.889 105.133 56.485 122.15 34.704Zm-7.27-5.68c-5.643 7.224-19.998 8.262-39.92 2.148c-20.978-6.437-45.761-20.066-69.28-38.441c-23.52-18.376-42.74-39.126-54.06-57.923c-10.752-17.851-13.218-32.03-7.575-39.254c5.644-7.223 19.999-8.261 39.92-2.148c20.978 6.438 45.762 20.067 69.281 38.442c23.52 18.375 42.739 39.126 54.06 57.923c10.752 17.85 13.218 32.03 7.574 39.254Z"></path><path fill="#FFF" d="M127.552 167.667c10.827 0 19.603-8.777 19.603-19.604c0-10.826-8.776-19.603-19.603-19.603c-10.827 0-19.604 8.777-19.604 19.603c0 10.827 8.777 19.604 19.604 19.604Z"></path></svg>

src/index.css

@@ -0,0 +1,68 @@
+:root {
+  font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif;
+  line-height: 1.5;
+  font-weight: 400;
+
+  color-scheme: light dark;
+  color: rgba(255, 255, 255, 0.87);
+  background-color: #242424;
+
+  font-synthesis: none;
+  text-rendering: optimizeLegibility;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+a {
+  font-weight: 500;
+  color: #646cff;
+  text-decoration: inherit;
+}
+a:hover {
+  color: #535bf2;
+}
+
+body {
+  margin: 0;
+  display: flex;
+  place-items: center;
+  min-width: 320px;
+  min-height: 100vh;
+}
+
+h1 {
+  font-size: 3.2em;
+  line-height: 1.1;
+}
+
+button {
+  border-radius: 8px;
+  border: 1px solid transparent;
+  padding: 0.6em 1.2em;
+  font-size: 1em;
+  font-weight: 500;
+  font-family: inherit;
+  background-color: #1a1a1a;
+  cursor: pointer;
+  transition: border-color 0.25s;
+}
+button:hover {
+  border-color: #646cff;
+}
+button:focus,
+button:focus-visible {
+  outline: 4px auto -webkit-focus-ring-color;
+}
+
+@media (prefers-color-scheme: light) {
+  :root {
+    color: #213547;
+    background-color: #ffffff;
+  }
+  a:hover {
+    color: #747bff;
+  }
+  button {
+    background-color: #f9f9f9;
+  }
+}

src/main.tsx

@@ -0,0 +1,6 @@
+import { render } from 'preact'
+import { App } from './app.tsx'
+import 'bootstrap/dist/css/bootstrap.min.css'
+import './index.css'
+
+render(<App />, document.getElementById('app')!)

src/vite-env.d.ts

@@ -0,0 +1 @@
+/// <reference types="vite/client" />