initial fucking commit yeeet

src/App.tsx

@@ -0,0 +1,17 @@
+import React from "react";
+
+import Header from "./components/header";
+import Calculator from "./components/calculator";
+import Footer from "./components/footer";
+
+function App() {
+  return (
+    <div className="App">
+      <Header />
+      <Calculator />
+      <Footer />
+    </div>
+  );
+}
+
+export default App;

src/components/calculator.module.css

@@ -0,0 +1,31 @@
+.container {
+  display: grid;
+  gap: 2rem;
+}
+.form {
+  display: grid;
+  justify-self: center;
+  align-self: start;
+}
+.formPeople {
+  grid-area: 1 / span 2;
+}
+.resultContainer {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  justify-items: center;
+  align-self: start;
+}
+.results {
+  display: grid;
+  gap: 1rem;
+  place-items: center;
+}
+
+.big {
+  font-size: 2rem;
+  font-weight: 900;
+}
+.or {
+  font-weight: 100;
+}

src/components/calculator.tsx

@@ -0,0 +1,118 @@
+import React, { useState } from "react";
+import styles from "./calculator.module.css";
+
+import { useForm } from "react-hook-form";
+
+type calcTypes = {
+  people: number;
+  thirstyness: number;
+  hungriness: number;
+};
+
+const calculateLiters = (people: number, thirstyness: number) => {
+  return Math.ceil(people * thirstyness);
+};
+
+const calculateBottles = (people: number, thirstyness: number) => {
+  return Math.ceil(calculateLiters(people, thirstyness) / 1.5);
+};
+
+const calculatePizzaSlices = (people: number, hungriness: number) => {
+  return Math.ceil(people * hungriness);
+};
+
+const calculatePizzas = (people: number, hungriness: number) => {
+  return Math.ceil(calculatePizzaSlices(people, hungriness) / 8);
+};
+
+const Calculator = () => {
+  const {
+    register,
+    formState: { errors },
+  } = useForm<calcTypes>();
+
+  const [people, setPeople] = useState(0);
+  const [thirstyness, setThirstyness] = useState(0.5);
+  const [hungriness, setHungriness] = useState(3);
+
+  return (
+    <div className={styles.container}>
+      <form className={styles.form}>
+        <input
+          className={styles.formPeople}
+          type="number"
+          placeholder="Antall personer"
+          {...(register("people"), { required: true, min: 1, max: 3000 })}
+          onChange={(e) => {
+            if (!e.target.value) {
+              setPeople(0);
+            } else {
+              setPeople(e.target.valueAsNumber);
+            }
+          }}
+        />
+
+        <select
+          {...register("thirstyness")}
+          onChange={(e) => {
+            setThirstyness(Number(e.target.value));
+          }}
+        >
+          <option value={0.33}>Noe å sippe på</option>
+          <option value={0.5} selected={true}>
+            Tørst
+          </option>
+          <option value={0.7}>Dehydrert</option>
+        </select>
+
+        <select
+          {...register("hungriness")}
+          onChange={(e) => {
+            setHungriness(Number(e.target.value));
+          }}
+        >
+          <option value={2}>Småspising</option>
+          <option selected={true} value={3}>
+            Sulten
+          </option>
+          <option value={5}>Skrubbsulten</option>
+        </select>
+      </form>
+
+      <div className={styles.resultContainer}>
+        <div className={styles.results}>
+          <p>
+            <span className={styles.big}>
+              {calculateLiters(people, thirstyness)}
+            </span>{" "}
+            liter
+          </p>
+          <p className={styles.or}>eller</p>
+          <p>
+            <span className={styles.big}>
+              {calculateBottles(people, thirstyness)}
+            </span>{" "}
+            flasker (1,5L)
+          </p>
+        </div>
+        <div className={styles.results}>
+          <p>
+            <span className={styles.big}>
+              {calculatePizzaSlices(people, hungriness)}
+            </span>{" "}
+            pizzastykker
+          </p>
+          <p className={styles.or}>eller</p>
+          <p>
+            <span className={styles.big}>
+              {calculatePizzas(people, hungriness)}
+            </span>{" "}
+            store pizzaer
+          </p>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default Calculator;

src/components/footer.module.css

@@ -0,0 +1,6 @@
+.container {
+  display: grid;
+  align-self: end;
+  place-items: center;
+  padding: 2rem;
+}

src/components/footer.tsx

@@ -0,0 +1,16 @@
+import React from "react";
+import styles from "./footer.module.css";
+
+const Footer = () => (
+  <footer className={styles.container}>
+    <p>
+      Laget av <a href="https://uiogaming.no">UiO Gaming</a>
+    </p>
+    <p>
+      Inspirert av FPU sin{" "}
+      <a href="https://www.fpu.no/common/pizza/">pizzakalkulator</a>
+    </p>
+  </footer>
+);
+
+export default Footer;

src/components/header.module.css

@@ -0,0 +1,5 @@
+.container {
+  display: grid;
+  place-items: center;
+  align-self: end;
+}

src/components/header.tsx

@@ -0,0 +1,11 @@
+import React from "react";
+import styles from "./header.module.css";
+
+const Header = () => (
+  <header className={styles.container}>
+    <h1>bebbes</h1>
+    <p>en brus- og pizzakalkulator</p>
+  </header>
+);
+
+export default Header;

src/index.css

@@ -0,0 +1,107 @@
+@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@100;400;900&display=swap");
+
+/* ===== Variables ===== */
+
+:root {
+  --main-color: rgb(226, 35, 26);
+  --main-background-color: rgb(22, 20, 31);
+
+  --main-font: "Poppins", sans-serif;
+}
+
+/* ===== RESET ===== */
+
+*,
+*::before,
+*::after {
+  box-sizing: border-box;
+}
+
+body,
+h1,
+h2,
+h3,
+h4,
+p,
+figure,
+blockquote,
+dl,
+dd {
+  margin: 0;
+}
+
+ul[role="list"],
+ol[role="list"] {
+  list-style: none;
+}
+
+html:focus-within {
+  scroll-behavior: smooth;
+}
+
+body {
+  min-height: 100vh;
+  text-rendering: optimizeSpeed;
+  line-height: 1.5;
+}
+
+a:not([class]) {
+  text-decoration-skip-ink: auto;
+}
+
+img,
+picture {
+  max-width: 100%;
+  display: block;
+}
+
+input,
+button,
+textarea,
+select {
+  font: inherit;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  html:focus-within {
+    scroll-behavior: auto;
+  }
+
+  *,
+  *::before,
+  *::after {
+    animation-duration: 0.01ms !important;
+    animation-iteration-count: 1 !important;
+    transition-duration: 0.01ms !important;
+    scroll-behavior: auto !important;
+  }
+}
+
+/* ===== Base Styling ===== */
+
+.App {
+  display: grid;
+  grid-template-rows: 1fr 1fr auto;
+  padding: 1rem;
+  gap: 2rem;
+  max-width: 1280px;
+  margin: 0 auto;
+  min-height: 100vh;
+}
+
+body {
+  background-color: var(--main-background-color);
+  color: white;
+  font-family: var(--main-font);
+}
+
+a {
+  color: hsl(0, 0%, 85%);
+  text-decoration-color: red;
+}
+
+a:hover {
+  background-color: red;
+  color: hsl(0, 0%, 95%);
+  text-decoration-color: hsl(0, 100%, 80%);
+}

src/main.tsx

@@ -0,0 +1,11 @@
+import React from 'react'
+import ReactDOM from 'react-dom'
+import './index.css'
+import App from './App'
+
+ReactDOM.render(
+  <React.StrictMode>
+    <App />
+  </React.StrictMode>,
+  document.getElementById('root')
+)

src/vite-env.d.ts

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