[PROJ-18.14/compl] selecting-icon-in-pop-up-window

Adding "icon/habit" selection in "pop-up" window. Hidden "input.. this".

Worth noting
  - onclick="" logic, everything through it.

FS-dev: B-3 / JS basic

Author: matowdev

full-stack-dev/3-js-basic/18-proj-habit-tracker/18-14-selecting-icon-in-pop-up-window/index.html

@@ -9,7 +9,7 @@
   <link rel="icon" href="./images/favicon/favicon.svg" type="image/svg+xml" sizes="any">
   <link rel="shortcut icon" href="./images/favicon/favicon.ico" type="image/x-icon">
   <link rel="apple-touch-icon" href="./images/favicon/apple-touch-icon.png" sizes="180x180">
-  <meta name="apple-mobile-web-app-title" content="HabitTracker">
+  <meta name="apple-mobile-web-app-title" content="HabbitTracker">
   <!-- <link rel="manifest" href="./site.webmanifest"> -->
   <link rel="stylesheet" href="./css/normalize.css">
   <link rel="stylesheet" href="./css/style.css">
@@ -65,20 +65,22 @@ <h2 class="pop-up__title">Новая привычка</h2>
           <span class="pop-up__icons-label">Иконка</span>
           <ul class="pop-up__icons-list">
             <li class="pop-up__icons-item">
-              <button class="pop-up__icons-btn" type="button" aria-label="Выбрать иконку" title="Спорт">
+              <button class="pop-up__icons-btn" type="button" aria-label="Выбрать иконку" title="Спорт"
+                onclick="setHabbitIcon(this, 'gantel-icon')">
                 <img class="pop-up__icons-icon" src="./images/gantel-icon.svg" width="23" height="23"
                   alt="Иконка: Гантеля">
               </button>
             </li>
             <li class="pop-up__icons-item">
               <button class="pop-up__icons-btn pop-up__icons-btn_active" type="button" aria-label="Выбрать иконку"
-                title="Жидкости">
+                title="Жидкости" onclick="setHabbitIcon(this, 'water-icon')">
                 <img class="pop-up__icons-icon" src="./images/water-icon.svg" width="25" height="25"
                   alt="Иконка: Бутылка с водой">
               </button>
             </li>
             <li class="pop-up__icons-item">
-              <button class="pop-up__icons-btn" type="button" aria-label="Выбрать иконку" title="Питание">
+              <button class="pop-up__icons-btn" type="button" aria-label="Выбрать иконку" title="Питание"
+                onclick="setHabbitIcon(this, 'food-icon')">
                 <img class="pop-up__icons-icon" src="./images/food-icon.svg" width="23" height="24"
                   alt="Иконка: Тарелка с едой">
               </button>
@@ -89,6 +91,8 @@ <h2 class="pop-up__title">Новая привычка</h2>
           <form class="pop-up__form" id="pop-up-form">
             <input class="pop-up__form-input" id="title-input" type="text" name="title-habbit" placeholder="Название"
               autocomplete="off">
+            <input class="pop-up__form-input" id="hidden-input" type="text" name="icon-habbit" placeholder="Иконка"
+              autocomplete="off" value="water-icon" hidden>
             <input class="pop-up__form-input" id="target-input" type="number" name="target-habbit"
               placeholder="Цель/дней" autocomplete="off">
             <button class="pop-up__form-btn" type="submit">Добавить</button>

full-stack-dev/3-js-basic/18-proj-habit-tracker/18-14-selecting-icon-in-pop-up-window/js/index.js

@@ -54,6 +54,7 @@ const app = {
   'pop-up': {
     popupCover: document.getElementById('pop-up-cover'),
     popupElement: document.getElementById('pop-up'),
+    hiddenIconInput: document.getElementById('hidden-input'),
   },
 };
 
@@ -237,6 +238,16 @@ function deleteCommentDay(index) {
   saveData(); // обновление/сохранение в localStorage
 }
 
+function setHabbitIcon(context, iconName) {
+  app['pop-up'].hiddenIconInput.value = iconName; // обновление value у "скрытого" инпута
+  const activeIcon = document.querySelector(
+    '.pop-up__icons-btn.pop-up__icons-btn_active'
+  );
+
+  activeIcon.classList.remove('pop-up__icons-btn_active'); // у ранее "активной" удаление
+  context.classList.add('pop-up__icons-btn_active'); // текущей кнопке добавление, т.е. по котрой onclick=""
+}
+
 // init
 (() => {
   // загрузка данных.. по сути автоматическая/сразу (соответственно через IIFE)

full-stack-dev/3-js-basic/18-proj-habit-tracker/18-14-selecting-icon-in-pop-up-window/site.webmanifest

@@ -1,5 +1,5 @@
 {
-  "name": "HabitTracker",
+  "name": "HabbitTracker",
   "short_name": "HT",
   "icons": [
     {