Add functions

Author: braincee

.hintrc

@@ -15,4 +15,4 @@
       "meta-viewport",
       "no-inline-styles:error"
     ]
-  }
+}

dist/index.html

@@ -10,23 +10,23 @@
     <h1 class="header">Leaderboard</h1>
   </header>
   <main>
-    <section class="left-section">
-      <div class="top">
+    <section class="board-1">
+      <div class="recent-goals">
         <h2>Recent Goals</h2>
         <button type="button">Refresh</button>
       </div>
 
-      <ul class="bottom">
+      <ul class="table">
 
       </ul>
     </section>
-    <section class="right-section">
-      <div class="top">
+    <section class="board-2">
+      <div class="table">
         <h2>Add the goals</h2>
       </div>
-      <form action="#" class="add-score">
+      <form action="#" class="name-goal">
         <input type="text" name="name" placeholder="Player name">
-        <input type="number" name="score" placeholder="Player goals">
+        <input type="number" name="goals" placeholder="Player goals">
         <button type="submit" class="submit">Submit</button>
       </form>
     </section>

dist/main.js

@@ -13,7 +13,7 @@ <h1 class="header">Leaderboard</h1>
     <section class="board-1">
       <div class="recent-goals">
         <h2>Recent Goals</h2>
-        <button type="button" class="refresh">Refresh</button>
+        <button type="button">Refresh</button>
       </div>
 
       <ul class="table">

src/index.html

@@ -1,4 +1,4 @@
 import './style.css';
-import playerGoals from './goals.js';
+import playerGoals from './modules/goals.js';
 
 document.addEventListener('DOMContentLoaded', playerGoals);

src/index.js

@@ -25,12 +25,12 @@ const goals = [
   },
 ];
 
-const players = document.querySelector('.left-section .bottom');
+const players = document.querySelector('.board-1 .table');
 
 const playerGoals = () => {
   goals.forEach((goal) => {
     const player = document.createElement('li');
-    player.className = 'list-item';
+    player.className = 'table-records';
     player.textContent = `${goal.name}: ${goal.goals}`;
     players.appendChild(player);
   });

src/goals.js renamed to src/modules/goals.js

@@ -4,79 +4,79 @@ body {
   box-sizing: border-box;
 }
 
-header {
-  padding: 2%;
+.header {
+  padding: 0 4rem;
 }
 
 main {
   display: flex;
-  padding: 0 4%;
-  gap: 10%;
+  padding: 0 6rem;
+  gap: 8rem;
 }
 
-.left-section,
-.right-section {
+.board-1 .board-2 {
   display: flex;
   flex-direction: column;
-  gap: 30px;
+  gap: 2rem;
 }
 
-.left-section .top {
+.board-1 .recent-goals {
   display: flex;
-  gap: 10px;
+  gap: 2rem;
+  padding: 2rem;
 }
 
-.left-section .top h2,
-.right-section .top h2 {
+.board-1 .recent-goals h2,
+.board-2 .recent-goals h2 {
   padding: 0;
   margin: 0;
 }
 
-.right-section form button {
+.board-2 form button {
   display: flex;
   align-self: flex-end;
-  width: max-content;
-  height: max-content;
+  width: 4rem;
+  height: 2rem;
   padding: 5px;
-  background: #fff;
+  background: rgb(240, 238, 238);
   box-shadow: 1px 1px rgb(87, 85, 85);
 }
 
-.left-section .top button {
-  width: max-content;
-  height: max-content;
+.board-1 .recent-goals button {
+  width: 6rem;
+  height: 2rem;
   padding: 5px;
-  background: #fff;
+  background: rgb(240, 238, 238);
   box-shadow: 1px 1px rgb(90, 87, 87);
 }
 
-.left-section .bottom {
-  border: 2px solid rgb(119, 112, 112);
+.board-1 .table {
+  border: 3px solid rgb(119, 112, 112);
   min-height: 50px;
   margin: 0;
   padding: 0;
 }
 
-.left-section .bottom .list-item {
+.board-1 .table .table-records {
   list-style: none;
-  padding: 2%;
+  padding: 5px;
 }
 
-.left-section .bottom .list-item:nth-child(odd) {
+.board-1 .table .table-records:nth-child(odd) {
   background: rgb(206, 204, 204);
 }
 
-.right-section form {
+.board-2 form {
   display: flex;
   flex-direction: column;
   gap: 15px;
 }
 
-.right-section form input {
+.board-2 form input {
   border: 2px solid rgb(66, 62, 62);
-  padding: 2%;
+  padding: 10px;
 }
 
-.right-section form input::placeholder {
+.board-2 form input::placeholder {
   color: rgb(87, 80, 80);
 }