grade table

app/globals.css

@@ -25,6 +25,15 @@ body {
   }
 }
 
+td:hover {
+  background: #001233;
+}
+td {
+  background: #101047;
+  border: 1px white solid;
+  text-align: center;
+  padding: 0.6vw;
+}
 .none {
   display: none;
 }

app/page.tsx

@@ -184,16 +184,20 @@ export default function Home() {
           Your current average:{" "}
           <span className="currentAverage">{currAverage}</span>
         </p>
-        <p>
-          Your grades:{" "}
-          <span>
-            {chosenShowGrades?.toString().replace("", ", ").substring(1)}
-          </span>
-        </p>
-        <p>
-          Their weights:{" "}
-          <span>{chosenValues?.toString().replace("", ", ").substring(1)}</span>
-        </p>
+        <table>
+          <tr>
+            <td>Your grades: </td>
+            {chosenShowGrades?.map((e, i) => {
+              return <td key={i}>{e}</td>;
+            })}
+          </tr>
+          <tr>
+            <td>Their weights: </td>
+            {chosenValues?.map((e, i) => {
+              return <td key={i}>{e}</td>;
+            })}
+          </tr>
+        </table>
         <p>New grade:</p>
         <input
           placeholder="-"

todo.todo

@@ -8,13 +8,14 @@
 # gui
   - [x] the grades 
   - [ ] loading page 
+  - [ ] pass the grade in the js array as a number, not string
   - [ ] add the option to "save login"
     - [ ] make the checkbox visible
     - [ ] sign off button
   - [x] add the option to "show password"
   - [x] make the password be type="password"
   - [x] make it recognize 0.5 as a weight
-  - [ ] put the grades and value in a <table>
+  - [x] put the grades and value in a <table>
   - [x] make icons