transfering changes

Lofranlof · Dec 4, 2023 · 1dbf766 · 1dbf766
1 parent c4f60ab
commit 1dbf766
Show file tree

Hide file tree

Showing 3 changed files with 31 additions and 20 deletions.
diff --git a/JS/records.js b/JS/records.js
@@ -17,16 +17,15 @@ document.addEventListener('DOMContentLoaded', async function () {
         if (response.ok) {
             const users = await response.json();
             preloaderContainer.style.display = 'none';
+            const userCardTemplate = document.getElementById('user_card_template');
             users.forEach(user => {
-                const userCard = document.createElement('div');
-                userCard.classList.add('user_card');
-                userCard.innerHTML = `
-                    <p class="user_info">Nickname: ${user.nickname}</p>
-                    <p class="user_info">Date: ${user.date}</p>
-                    <p class="user_info">Wellbeing: ${user.wellBeing}</p>
-                    <p class="user_info">Bench Press: ${user.benchPress} кг</p>
-                    <p class="user_info">Squat: ${user.squat} кг</p>
-                    <p class="user_info">Deadlift: ${user.deadlift} кг</p>`;
+                const userCard = document.importNode(userCardTemplate.content, true);
+                userCard.querySelector('.user_info.nickname').textContent = 'Nickname: ${user.nickname}';
+                userCard.querySelector('.user_info.date').textContent = 'Date of the record: ${user.date}';
+                userCard.querySelector('.user_info.wellbeing').textContent = 'Wellbeing: ${user.wellbeing}';
+                userCard.querySelector('.user_info.benchpress').textContent = 'Bench Press: ${user.benchpress} kg';
+                userCard.querySelector('.user_info.squat').textContent = 'Squat: ${user.squat} kg';
+                userCard.querySelector('.user_info.deadlift').textContent = 'Deadlift: ${user.deadlift} kg';
                 userCardsContainer.appendChild(userCard);
             });
         } else {

diff --git a/index.html b/index.html
@@ -3,7 +3,7 @@
 
 <head>
     <meta charset="UTF-8">
-    <link href="CSS/style.css" rel="stylesheet">
+    <link href="/CSS/style.css" rel="stylesheet">
     <script src="JS/timeToLoad.js"></script>
     <title>YeahBuddy!</title>
 </head>

diff --git a/scoreboard.html b/scoreboard.html
@@ -11,16 +11,28 @@
         <h1 class="header__title">Scoreboard</h1>
         <nav class="header__nav"><a href="index.html">General</a> <a href="scoreboard.html" class="active">PRScoreboard</a> <a href="achievements.html">Achievements</a> <a href="resources.html">Resources</a> <a href="profile.html">Profile</a> <a href="todo.html">ToDoList</a></nav>
     </header>
-    <section class="main_section">
-      <h2>Toughest mf'ers out there </h2>
-      <div class="preloader_container">
-          <div class="preloader"></div>
-      </div>
-      <div class="error_message">
-          <p class="error_text"></p>
-      </div>
-      <div class="cards_container"></div>
-  </section>
+    <main>
+        <section class="main_section">
+          <h2>Toughest mf'ers out there </h2>
+          <div class="preloader_container">
+              <div class="preloader"></div>
+          </div>
+          <div class="error_message">
+              <p class="error_text"></p>
+          </div>
+          <div class="cards_container">
+            <template id="user_card_template">
+              <div class="user_card">
+                <p class="user_info nickname"></p>
+                <p class="user_info date"></p>
+                <p class="user_info wellbeing"></p>
+                <p class="user_info benchpress"></p>
+                <p class="user_info squat"></p>
+                <p class="user_info deadlift"></p>
+            </div>
+            </template>
+          </div>
+      </section>
     </main>
     <footer>
     </footer>