IT2810-H26 · martakam · Sep 13, 2026 · Sep 13, 2026 · Sep 13, 2026 · Sep 13, 2026
@@ -0,0 +1 @@
+{}
@@ -40,7 +40,7 @@ Before a pull request can be merged:
    request, and approvals from staff do not count — you review each other's
    code.
 2. **Every review comment must be marked resolved.** Reply to each one, fix it
-   or explain why not, then click *Resolve conversation*.
+   or explain why not, then click _Resolve conversation_.
 3. **Pushing new commits dismisses the approval**, so if you change something
    after being approved, ask for another review. This is deliberate: what was
    approved is what gets merged.
@@ -1,14 +1,14 @@
-import js from '@eslint/js'
-import globals from 'globals'
-import reactHooks from 'eslint-plugin-react-hooks'
-import reactRefresh from 'eslint-plugin-react-refresh'
-import tseslint from 'typescript-eslint'
-import { defineConfig, globalIgnores } from 'eslint/config'
+import js from "@eslint/js";
+import globals from "globals";
+import reactHooks from "eslint-plugin-react-hooks";
+import reactRefresh from "eslint-plugin-react-refresh";
+import tseslint from "typescript-eslint";
+import { defineConfig, globalIgnores } from "eslint/config";
 
 export default defineConfig([
-  globalIgnores(['dist']),
+  globalIgnores(["dist"]),
   {
-    files: ['**/*.{ts,tsx}'],
+    files: ["**/*.{ts,tsx}"],
     extends: [
       js.configs.recommended,
       tseslint.configs.recommended,
@@ -19,4 +19,4 @@ export default defineConfig([
       globals: globals.browser,
     },
   },
-])
+]);
@@ -5,19 +5,35 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>Prosjekt 1</title>
 
-    <link rel="apple-touch-icon" sizes="180x180" href="/favicon/apple-touch-icon.png">
-    <link rel="icon" type="image/png" sizes="32x32" href="/favicon/favicon-32x32.png">
-    <link rel="icon" type="image/png" sizes="16x16" href="/favicon/favicon-16x16.png">
-    <link rel="manifest" href="/favicon/site.webmanifest">
+    <link
+      rel="apple-touch-icon"
+      sizes="180x180"
+      href="/favicon/apple-touch-icon.png"
+    />
+    <link
+      rel="icon"
+      type="image/png"
+      sizes="32x32"
+      href="/favicon/favicon-32x32.png"
+    />
+    <link
+      rel="icon"
+      type="image/png"
+      sizes="16x16"
+      href="/favicon/favicon-16x16.png"
+    />
+    <link rel="manifest" href="/favicon/site.webmanifest" />
 
-    <link rel="preconnect" href="https://fonts.googleapis.com">
-    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
-    <link href="https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300..800;1,300..800&display=swap" rel="stylesheet">
+    <link rel="preconnect" href="https://fonts.googleapis.com" />
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+    <link
+      href="https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300..800;1,300..800&display=swap"
+      rel="stylesheet"
+    />
   </head>
 
   <body>
     <div id="root"></div>
     <script type="module" src="/src/main.tsx"></script>
   </body>
-
 </html>
@@ -31,6 +31,7 @@
     "eslint-plugin-react-hooks": "^7.1.1",
     "eslint-plugin-react-refresh": "^0.5.4",
     "globals": "^17.11.0",
+    "prettier": "3.9.6",
     "typescript": "~6.0.2",
     "typescript-eslint": "^8.67.0",
     "vite": "^8.2.2"

@@ -1 +1,19 @@
-{"name":"","short_name":"","icons":[{"src":"/android-chrome-192x192.png","sizes":"192x192","type":"image/png"},{"src":"/android-chrome-512x512.png","sizes":"512x512","type":"image/png"}],"theme_color":"#ffffff","background_color":"#ffffff","display":"standalone"}
+{
+  "name": "",
+  "short_name": "",
+  "icons": [
+    {
+      "src": "/android-chrome-192x192.png",
+      "sizes": "192x192",
+      "type": "image/png"
+    },
+    {
+      "src": "/android-chrome-512x512.png",
+      "sizes": "512x512",
+      "type": "image/png"
+    }
+  ],
+  "theme_color": "#ffffff",
+  "background_color": "#ffffff",
+  "display": "standalone"
+}
@@ -1,6 +1,6 @@
-import { Header } from './components/Header/Header.tsx';
-import { Footer } from './components/Footer/Footer.tsx';
-import { BookGrid } from './components/BookGrid/BookGrid.tsx';
+import { Header } from "./components/Header/Header.tsx";
+import { Footer } from "./components/Footer/Footer.tsx";
+import { BookGrid } from "./components/BookGrid/BookGrid.tsx";
 
 function App() {
   return (

@@ -1,44 +1,44 @@
 .bookCard {
-    position: relative;
-    display: flex;
-    flex-direction: column;
-    height: 100%;
-    background-color: white;
-    border-radius: var(--border-radius);
-    border: 1px solid var(--border-color);
-    padding: 24px;
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+  background-color: white;
+  border-radius: var(--border-radius);
+  border: 1px solid var(--border-color);
+  padding: 24px;
 }
 
 .favoriteButton {
-    position: absolute;
-    top: 8px;
-    right: 8px;
-    background-color: white;
-    color: var(--theme-color);
-    border: 1px solid var(--border-color);
-    border-radius: var(--border-radius);
-    width: 32px;
-    height: 32px;
-    font-size: 1.5rem;
-    cursor: pointer;
+  position: absolute;
+  top: 8px;
+  right: 8px;
+  background-color: white;
+  color: var(--theme-color);
+  border: 1px solid var(--border-color);
+  border-radius: var(--border-radius);
+  width: 32px;
+  height: 32px;
+  font-size: 1.5rem;
+  cursor: pointer;
 
-    &:hover {
-        border: 1px solid var(--theme-color);
-    }
+  &:hover {
+    border: 1px solid var(--theme-color);
+  }
 }
 
 .coverImage {
-    width: 100%;
-    padding: 12px 24px;
-    object-fit: contain;
+  width: 100%;
+  padding: 12px 24px;
+  object-fit: contain;
 }
 
 .info {
-    margin-top: 16px;
-    font-size: 0.90rem;
+  margin-top: 16px;
+  font-size: 0.9rem;
 }
 
 .title {
-    margin-bottom: 8px;
-    font-size: 1rem;
+  margin-bottom: 8px;
+  font-size: 1rem;
 }
@@ -1,22 +1,26 @@
-import type { Book } from '../BookGrid/mockData';
-import styles from './BookCard.module.css';
+import type { Book } from "../BookGrid/mockData";
+import styles from "./BookCard.module.css";
 
 interface BookCardProps {
-    book: Book;
+  book: Book;
 }
 
 function BookCard({ book }: BookCardProps) {
-    return (
-        <article className={styles.bookCard}>
-            <button className={styles.favoriteButton}>+</button>
-            <img src={book.coverImage} alt={`Book cover of ${book.title}`} className={styles.coverImage}/>
-            <section className={styles.info}>
-                <h3 className={styles.title}>{book.title}</h3>
-                <p className={styles.author}>{book.author}</p>
-                <p>{book.publishedYear}</p>
-            </section>
-        </article>
-    );
+  return (
+    <article className={styles.bookCard}>
+      <button className={styles.favoriteButton}>+</button>
+      <img
+        src={book.coverImage}
+        alt={`Book cover of ${book.title}`}
+        className={styles.coverImage}
+      />
+      <section className={styles.info}>
+        <h3 className={styles.title}>{book.title}</h3>
+        <p className={styles.author}>{book.author}</p>
+        <p>{book.publishedYear}</p>
+      </section>
+    </article>
+  );
 }
 
 export { BookCard };
@@ -1,21 +1,21 @@
 .bookGrid {
-    display: grid;
-    grid-template-columns: repeat(4, 1fr);
-    gap: 16px;
-    justify-content: center;
-    max-width: 1200px;
-    margin: 0 auto;
-    padding: 40px 40px;
+  display: grid;
+  grid-template-columns: repeat(4, 1fr);
+  gap: 16px;
+  justify-content: center;
+  max-width: 1200px;
+  margin: 0 auto;
+  padding: 40px 40px;
 
-    @media only screen and (max-width: 1200px) {
-        grid-template-columns: repeat(3, 1fr);
-    }
+  @media only screen and (max-width: 1200px) {
+    grid-template-columns: repeat(3, 1fr);
+  }
 
-    @media only screen and (max-width: 1000px) {
-        grid-template-columns: repeat(2, 1fr);
-    }
+  @media only screen and (max-width: 1000px) {
+    grid-template-columns: repeat(2, 1fr);
+  }
 
-    @media only screen and (max-width: 600px) {
-        grid-template-columns: 1fr;
-    }
+  @media only screen and (max-width: 600px) {
+    grid-template-columns: 1fr;
+  }
 }
@@ -1,17 +1,17 @@
 import { BookCard } from "../BookCard/BookCard";
 import { mockBooks } from "./mockData";
-import styles from './BookGrid.module.css';
+import styles from "./BookGrid.module.css";
 
 function BookGrid() {
-    return (
-        <ul className={styles.bookGrid}>
-            {mockBooks.map((book) => (
-                <li key={book.id}>
-                    <BookCard book={book} />
-                </li>
-            ))}
-        </ul>
-    );
+  return (
+    <ul className={styles.bookGrid}>
+      {mockBooks.map((book) => (
+        <li key={book.id}>
+          <BookCard book={book} />
+        </li>
+      ))}
+    </ul>
+  );
 }
 
 export { BookGrid };