[PROJ-18.7/compl] render-header-content-element

Adding "partial" render/re-render for "header" part, "content" element.

Worth noting:
  - counting "progress" of habits.

FS-dev: B-3 / JS basic

Author: matowdev

full-stack-dev/3-js-basic/18-proj-habit-tracker/18-7-render-header-content-element/css/progress-bar.css

@@ -41,9 +41,12 @@
   position: absolute;
   left: 0;
   border-radius: 4px;
-  width: 80%;
   height: 5px;
   background: var(--add-color-5, #5051F9);
+  transition-property: width;
+  transition-duration: var(--short, 0.3s);
+  transition-timing-function: ease-in-out;
+  will-change: width;
 }
 
 /* media queries, any-hover */

full-stack-dev/3-js-basic/18-proj-habit-tracker/18-7-render-header-content-element/index.html

@@ -35,15 +35,15 @@
     </aside>
     <main class="content app__content" id="content" aria-label="Контент приложения">
       <header class="content__header">
-        <h1 class="content__title">Отжимания</h1>
+        <h1 class="content__title" id="header-title"></h1>
         <div class="progress-bar content__progress-bar">
           <div class="progress-bar__heading-wrap">
             <span class="progress-bar__text">Прогресс</span>
-            <span class="progress-bar__percent">80%</span>
+            <span class="progress-bar__percent" id="progress-percent"></span>
           </div>
           <div class="progress-bar__scale-wrap">
             <span class="progress-bar__scale"></span>
-            <span class="progress-bar__value"></span>
+            <span class="progress-bar__value" id="progress-value"></span>
           </div>
         </div>
       </header>

full-stack-dev/3-js-basic/18-proj-habit-tracker/18-7-render-header-content-element/js/index.js

@@ -6,6 +6,11 @@ const HABBITS_KEY = 'HABBITS';
 // app
 const app = {
   'menu-list': document.getElementById('sidebar-list'),
+  header: {
+    title: document.getElementById('header-title'),
+    progressPercent: document.getElementById('progress-percent'),
+    progressValue: document.getElementById('progress-value'),
+  },
 };
 
 // ** utility **
@@ -64,10 +69,31 @@ function rerenderMenu(activeHabbit) {
   }
 }
 
-// поиск элемента/привычки.. запуск отрисовки/переключение активности
+function rerenderHeaderContentEl(activeHabbit) {
+  if (!activeHabbit) {
+    return;
+  }
+
+  app.header.title.textContent = activeHabbit.title; // добавление/обновление заголовка
+
+  // подсчёт прогресса/выполнения (согласно "уже" отмеченных дней и "ранее" поставленной цели/дней)
+  const progress =
+    activeHabbit.days.length / activeHabbit.target > 1
+      ? 100
+      : (activeHabbit.days.length / activeHabbit.target) * 100;
+
+  app.header.progressPercent.textContent = `${progress.toFixed(0)}%`;
+  app.header.progressValue.setAttribute(
+    'style',
+    `width: ${progress.toFixed(0)}%`
+  );
+}
+
+// поиск/определение "активной" привычки.. запуск отрисовок элементов/переключение активностей
 function rerender(activeHabbitId) {
   const activeHabbit = habbits.find((habbit) => habbit.id === activeHabbitId);
   rerenderMenu(activeHabbit);
+  rerenderHeaderContentEl(activeHabbit);
 }
 
 // init