Fix(Tags not working)

- Refactored every tag function to include it in its own function to improve readability.
- Added last missing features (color changing, reset buttons)
- Improved flow by checking outside clicks to close Choice Tag container
- Fixed responsive

App is back as before, but with a refactored code !

Author: FlyingCow31

README.md

@@ -21,5 +21,5 @@ Features ideas:
 - [x] To add tags
 - [ ] Make possible to change tag colors
 - [ ] Add a description to each TODO
-- [ ] Refactor code
+- [x] Refactor code
 - [ ] Have a custom logo

css/newstyle.css

@@ -93,6 +93,10 @@ nav button:hover {
 /** Tags' style*/
 
 .tagtest {
+     display: flex;
+     flex-direction: row;
+     align-items: center;
+     gap: 10px;
      background-color: var(--tag-color);
      border-radius: 5px;
      width: fit-content;
@@ -151,6 +155,7 @@ section h1 {
 /** PRETODO container*/
 .containerx {
      display: flex;
+     align-items: center;
      gap: 15px;
      height: 10%;
      width: 100%;
@@ -163,6 +168,7 @@ section h1 {
      gap: 10px;
      height: 50%;
      width: 100%;
+     padding: 10px;
      background-color: var(--color-sec);
      box-shadow: 1px 1px 6px rgb(0,0,0,0.3);
      border-radius: 15px;     
@@ -187,6 +193,9 @@ section h1 {
 }
 
 .containerx button {
+     display: flex;
+     align-items: center;
+
      background-color: var(--color-sec);
      border: none;
      font-size: xx-large;
@@ -272,6 +281,7 @@ section h1 {
 
 /* * Settings  */
 .settings {
+     z-index: 1;
      position: absolute;
      top: 25%;
      left: -600px;
@@ -305,4 +315,11 @@ section h1 {
      margin: 0px;
      font-size: xx-large;
      font-weight: bold;
+}
+.removetagbtn {
+     user-select: none;
+     border: none;
+     cursor: pointer;
+     margin: 0px;
+
 }

css/responsive.css

@@ -0,0 +1,18 @@
+@media (min-width: 600px) and (max-width: 1200px){
+     .containerimportanttodos {
+          width: 100%;
+     }
+     .settings.active {
+          top: 5%;
+          left: 35%;
+          width: 55%;
+
+          transition: all 0.1s linear;
+     }
+     .containerx {
+          width: 60%;
+     }
+     .containerimportanttodos h1 {
+          width: 60%;
+     }
+}

css/style.css

@@ -449,4 +449,4 @@ h1 {
      border-radius: 15px;
 
      box-shadow: 1px 1px 6px rgb(0,0,0,0.5);
-}
+}

package.json

@@ -1,6 +1,6 @@
 {
   "name": "flyingtodo",
-  "version": "1.3.2",
+  "version": "1.3.3",
   "description": "A TODO list application to learn JS, that I will maybe continue later.",
   "main": "main.js",
   "scripts": {

script/newscript.js

@@ -1,18 +1,3 @@
-// TODO Rafraischissement de toutes les valeurs au démarrage 
-
-// TODO Fonctionnalité pour valider les todos et tags avec entrée 
-// TODO sauvegarde des données 
-
-// TODO fonction pour display les tags 
-// TODO Fonction pour créer les tags  
-// TODO Fonction pour supprimer les tags  
-// TODO Actualisation de la checkbox avec le style au démarrage et quand elles sont checked 
-// TODO Fonction pour actualiser les tags  
-// TODO Bouton pour tout reset  
-// TODO Fonctions de debug 
-// TODO Changement de couleur dans les settings  
-// TODO Logique de tous les boutons  
-
 
 
 let todos = [ ];
@@ -106,7 +91,7 @@ function displayTodo() {
                <img class="itemdel" data-id="${item.id}" src="../img/bin.png">
           </div>
           <div class="containertagsintodo">
-               
+               <button class="addtagbutton" data-id="${item.id}" id="addtagbutton">+</button>
           </div>`;
 
 
@@ -126,19 +111,40 @@ function displayTodo() {
 
 
 
-          containertodo.prepend(divtodo)
-
+          containertodo.prepend(divtodo);
 
+          // * Display tags for this todo
+          const containertagsintodo = divtodo.querySelector('.containertagsintodo');
+          
+          item.todotag.forEach(tag => {
+               const tagDiv = document.createElement('div');
+               tagDiv.className = "tagtest";
+               tagDiv.style.backgroundColor = tag.color;
+               tagDiv.innerHTML = `<p class="removetagbtn" data-tag-id="${tag.id}">✖</p>${tag.name}`;
+               containertagsintodo.appendChild(tagDiv);
+
+               // Remove tag from todo
+               const removeTagBtn = tagDiv.querySelector('.removetagbtn');
+               removeTagBtn.addEventListener('click', () => {
+                    item.todotag = item.todotag.filter(t => t.id !== tag.id);
+                    localStorage.setItem('todoitems', JSON.stringify(todos));
+                    displayTodo();
+               });
+          });
 
 
 
-          // * Add tag btn in each div
-          displayTagsInTodo(item, divtodo);
 
           const bintodo = document.querySelector('.itemdel');
           bintodo.addEventListener('click', () => {
                deleteTodo(item.id);
           });
+
+          const addtagbutton = document.getElementById('addtagbutton');
+
+          addtagbutton.addEventListener('click', () => {
+               choiceTagg(item.id);
+          });
 
      });
 
@@ -158,15 +164,12 @@ function deleteTodo(id) {
      });
      localStorage.setItem('todoitems', JSON.stringify(todos));
      displayTodo();
-
 };
 
 
 
 // * Tags 
 
-
-
 // * Tag creation && storage
 
 const inputcreatetags = document.querySelector('.inputcreatetags');
@@ -246,77 +249,101 @@ function deleteTags(id) {
 };
 
 
-const choicetagcont = document.querySelector('.choicetagcont');
-
-function applyTags(item, divtodo) {
-     let titletag = document.createElement('p');
-     titletag.innerText = "Choose a tag !"
-     titletag.className = "titletag";
-     choicetagcont.prepend(titletag);
 
+// * Choice of tags 
+function choiceTagg(todoId) {
+     
+     choiceTag.classList.toggle('active');
 
      allTags.forEach(tag => {
+          taginchoice = document.createElement('div');
 
-          const tagInList = document.createElement('div');
+          taginchoice.className = "tagtest";
+          taginchoice.innerText = `${tag.name}`;
+          taginchoice.style.backgroundColor = `${tag.color}`;
 
-          tagInList.className = "tagtest";
-          tagInList.innerHTML = `<p>${tag.name}</p>`
-          tagInList.style.backgroundColor = `${tag.color}`;
-          tagInList.style.cursor = "pointer";
+          choiceTag.append(taginchoice);
 
-          choicetagcont.append(tagInList);
+          taginchoice.addEventListener('click', () => {
+               addTagToTodo(tag, todoId);
+          });
+     });
+};
 
-          tagInList.addEventListener('click', () => {
-               !item.todotag ? "" : item.todotag = [];
+function addTagToTodo(tag, todoId) {
+     const todo = todos.find(item => item.id === todoId);
+     
+     if (todo && !todo.todotag.some(t => t.id === tag.id)) {
+          todo.todotag.push(tag);
+          localStorage.setItem('todoitems', JSON.stringify(todos));
+          displayTodo();
+          choiceTag.classList.remove('active');
+          choiceTag.innerHTML = '';
+     };
+};
 
-               if (!item.todotag.some(t => t.name === tag.name)) {
 
-                    item.todotag.push(tag);
 
-                    localStorage.setItem('todoitems', JSON.stringify(todos));
-                    console.log(item);
-                    displayTagsInTodo(item, divtodo);
-                    choiceTag.classList.remove('active');
-               };
-          });
-          
-     });
-};
+// * Style features to make the app more fluid 
+document.addEventListener('click', (event) => {
+     const addtagbutton = document.querySelector('.addtagbutton');
 
+     if (!choiceTag.contains(event.target) && !addtagbutton.contains(event.target) ) {
+          choiceTag.classList.remove('active');
+     };
+});
 
 
-function displayTagsInTodo(item, divtodo) {
 
-     const containertagsintodo = divtodo.querySelector('.containertagsintodo');
-     containertagsintodo.innerHTML = `<button class="addtagbutton" data-id="${item.id}" id="addtagbutton">+</button>`;
-     const addTagButton = divtodo.querySelector('.addtagbutton');
-     
 
-     let isChoiceTagOpen = false;
-     
+
+// * Reset buttons
+const resetbtn = document.getElementById('resetbtn');
+
+resetbtn.addEventListener('click', () => {
+
+     todos = [];
+     allTags = [];
+     localStorage.setItem('todoitems', JSON.stringify(todos));
+     localStorage.setItem('alltags', JSON.stringify(allTags));
+
+     containerpretodo.innerHTML = '';
+
+     displayTodo();
+     displayTags();
+
+});
+
+
+
+// * Color in settings
+const root = document.documentElement;
+const inputmaincolor = document.querySelector('.maincolorpick');
+const inputseccolor = document.querySelector('.seccolorpick');
+const resetcolbtn = document.querySelector('.resetclr');
+
+// main color
+inputmaincolor.addEventListener('change', () => {
+     const mainvalue = inputmaincolor.value;
+     root.style.setProperty('--color-main', mainvalue);
 
+     console.log(inputmaincolor.value);
+     localStorage.setItem('maincolor', mainvalue);
+});
+
+// secondary color
+inputseccolor.addEventListener('change', () => {
+     const seccolor = inputseccolor.value;
+     root.style.setProperty('--color-sec', seccolor);
 
-     addTagButton.addEventListener('click', () => {
-          if (isChoiceTagOpen == false) {
-               console.log('open');
-               isChoiceTagOpen = true;
-               choiceTag.classList.add('active');
-
-               applyTags(item, divtodo);
-
-          } else {
-               console.log('closed');
-               isChoiceTagOpen = false;
-               choiceTag.classList.remove('active');
-          };
-     });
-     // ! ça duplique dans la liste et ça l'applique uniquement au premier 
-     item.todotag.forEach(tag => {
-          let tagInTodo = document.createElement('div');
-          tagInTodo.className = "tagtest";
-          tagInTodo.innerText = `${tag.name}`;
-          tagInTodo.style.backgroundColor = `${tag.color}`;
-
-          containertagsintodo.append(tagInTodo);
-     });
-};
+     console.log(seccolor);
+     localStorage.setItem('seccolor', seccolor);
+});
+
+// reset color button 
+resetcolbtn.addEventListener('click', () => {
+     root.style.setProperty('--color-main', 'rgb(177, 177, 147)');
+     root.style.setProperty('--color-sec', 'rgb(231, 231, 217)');
+     localStorage.removeItem('seccolor');
+     localStorage.removeItem('maincolor');
+});