Fix(overflow)

+ Note screen can now go fullscreen
+ Note text's overflow bug is fixed
+ centering of the note div
+ Icons are now working (I think ?)
+ Tag Color is now stored when you change it by clicking.

Author: FlyingCow31

css/newstyle.css

@@ -227,6 +227,13 @@ section h1 {
      overflow-y: visible;
      overflow-x: hidden;
 }
+/*Firefox config  */
+.containerimportanttodos {
+     scrollbar-width: thin;
+     scrollbar-color: rgba(0, 0, 0, 0.4) transparent;
+
+}
+
 .containerimportanttodos::-webkit-scrollbar {
      width: 6px;
      /* Largeur de la scrollbar */
@@ -394,23 +401,32 @@ section h1 {
      width: 70%;
      height: 70vh;
      position: absolute;
-     top: 15vh;
-     left: 25vh;
+     top: 50%;
+     left: 50%;
+     transform: translate(-50%, -50%);
+
+     transition: all 0.2s linear;
 
      z-index: 100;
 }
+.editorcontainer.big {
+     width: 100%;
+     height: 100%;
+     transition: all 0.2s linear;
+}
 
 
 .flexcontaineredit {
      display: flex;
      justify-content: space-between;
      padding: 20px;
+     gap: 10px;
 }
 .notetitleeditor {
-
      width: 50%;
      background-color: transparent;
      border: none;
+     flex: 1;
 }
 .notetitleeditor:focus {
      text-decoration: underline 1px black;
@@ -441,4 +457,9 @@ section h1 {
      border-radius: 5px;
      user-select: none;
      cursor: pointer;
+}
+.fullscreenote {
+     background-color: transparent;
+     border: none;
+     font-size: 2rem;
 }

css/quillstyle.css

@@ -1,10 +1,12 @@
 .ql-container {
      border: none !important;
+     overflow-y: auto;
 
 }
 .ql-editor {
-
      border: none;
+     word-wrap: break-word;
+     overflow-wrap: break-word;
 }
 .ql-toolbar.ql-snow {
      border: none !important;

package.json

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

script/newscript.js

@@ -244,6 +244,7 @@ function displayTags() {
                tag.color = randomColorTags();
                console.log('Changed color of the tag!');
                displayTags();
+               localStorage.setItem('alltags', JSON.stringify(allTags));
           });
      });
 };

script/notes.js

@@ -81,7 +81,7 @@ async function refreshNoteList() {
           noteContainer.append(notediv); 
 
           const notedelbtn = notediv.querySelector('.notedelbtn');
-
+          
           notedelbtn.onclick = () => removeNote(note.id, notediv)
      });
 };
@@ -115,6 +115,12 @@ const closenotebutton = document.getElementById('closenotebutton');
 closenotebutton.addEventListener('click', () => {
      closeEditor();
 });
+const editorcontainer = document.querySelector('.editorcontainer');
+const fullscreenote = document.querySelector('.fullscreenote');
+
+fullscreenote.addEventListener('click', () => {
+     editorcontainer.classList.toggle("big");
+});
 
 
 // * Title saving 

templates/index.html

@@ -19,7 +19,7 @@
       rel="stylesheet"
     />
 
-    <link rel="icon" href="../img/icons8-check-mark-48.png" />
+    <link rel="icon" href="../img/iconflyingtodovraie.ico" />
 
     <!-- * Quill && Dexie.js Library-->
 
@@ -102,6 +102,7 @@ <h1>Reset todos:</h1>
           placeholder="Placeholder"
           maxlength="20"
         />
+        <button class="fullscreenote">⛶</button>
         <button class="closenotebutton" id="closenotebutton">←</button>
       </div>
       <div class="editor" id="editor">