fix: botão de check task

Author: 0Carvalh0

index.html

@@ -72,5 +72,8 @@ <h1 class="todoapp__title">Quick<strong>Task</strong></h1>
         </button>
       </form>
     </main>
+    <footer class="footer">
+      <p>© 2024 QuickTask. Todos os direitos reservados - João Victor Carvalho de Souza</p>
+    </footer>
   </body>
 </html>

src/scripts/toDoListScript.js

@@ -56,9 +56,10 @@ document.addEventListener("click", (e) => {
   }
 
   if (targetEl.classList.contains("todoapp__button--editTask")) {
-    oldInputValue = taskTitle; // Definindo o valor aqui
+    oldInputValue = taskTitle;
     toggleForms();
     textBoxEdit.value = taskTitle;
+    textBoxEdit.focus();
   }
 });
 

src/styles/index.css

@@ -25,7 +25,9 @@ body {
 }
 
 .todoapp {
-  max-height: 90vh;
+  max-height: 80vh;
+  width: 90vw;
+  max-width: 600px;
   overflow: hidden;
 
   padding: 2rem;
@@ -47,19 +49,24 @@ body {
 }
 
 .todoapp__input-container {
+  display: flex;
+
   margin-bottom: 1rem;
 }
 
 #todoapp-addTask,
 #todoapp-editTask {
+  width: 100%;
+
   padding: 8px;
+  margin-right: 1rem;
 
-  border-bottom: 2px solid var(--color01);
+  border-bottom: 3px solid var(--color01);
 }
 
 #button-Add,
 #button-Edit {
-  padding: 8px;
+  padding: 12px;
 
   border-radius: 30% 70% 63% 37% / 27% 32% 68% 73%;
 
@@ -68,7 +75,7 @@ body {
 }
 
 .todoapp__tasks-list {
-  max-height: calc(90vh - 50px);
+  max-height: calc(80vh - 200px);
   overflow-y: auto;
 
   display: flex;
@@ -85,15 +92,35 @@ body {
   align-items: center;
 
   padding: 8px;
-  border: 2px solid var(--color01);
+  border: 3px solid var(--color01);
+  border-radius: 8px;
 }
 
 .task-LeftSide {
   display: flex;
   align-items: center;
+
+  gap: 8px;
+}
+
+.todoapp__task-check {
+  width: 24px;
+  height: 24px;
+
+  display: grid;
+  place-items: center;
+
+  border-radius: 50%;
+  border: 3px solid var(--color01);
+
+  font-size: 1.2rem;
+}
+
+.todoapp__task-check i {
+  pointer-events: none;
 }
 
-.todoapp__task--done {
+.done {
   color: #9b9b98;
   text-decoration: line-through;
 }
@@ -112,3 +139,25 @@ body {
 .hide {
   display: none !important;
 }
+
+.footer {
+  width: 100%;
+  padding: 1rem;
+  background-color: var(--color01);
+  color: var(--colorwhite);
+  text-align: center;
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  font-size: 0.875rem;
+}
+
+.footer p {
+  margin: 0;
+}
+
+@media screen and (min-width: 700px) {
+  * {
+    font-size: 1.3rem;
+  }
+}