Merge branch 'main' into completed-section

fac-23 · Dec 12, 2021 · e883916 · e883916
2 parents 8255092 + 57e4a78
commit e883916
Show file tree

Hide file tree

Showing 3 changed files with 19 additions and 15 deletions.
diff --git a/index.css b/index.css
@@ -48,6 +48,7 @@ h2 {
 	margin: 20px auto;
 	font-size: 3rem;
 }
+
 form {
 	display: flex;
 	align-items: center;
@@ -108,7 +109,10 @@ form input[type="text"] {
 
 .completed label {
 	text-decoration: line-through;
+}
 
+#complete > li {
+	text-decoration: line-through;
 }
 
 .fa-plus:hover {
@@ -136,7 +140,8 @@ ul#complete > li.list-item {
 
 	font-family: "Poppins", -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
 
-	margin: 15px 5px;
+	/* margin: 15px 5px; */
+	/* padding: 10px; */
 }
 
 li.list-item {
@@ -147,7 +152,8 @@ li.list-item {
 	height: auto;
 	font-family: "Poppins", -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
 	color: var(--color-six);
-	margin: 20px 5px;
+	/* margin: 20px 5px; */
+	padding: 10px;
 }
 
 .far fa-trash-alt {

diff --git a/index.html b/index.html
@@ -26,14 +26,14 @@
       <section id="wrapper">
 				<h1>To-do-List</h1>
         <form action="">
-          <input id="addItem" name="additem" type="text" placeholder="Add a new task..."/>
+          <input id="addItem" name="additem" type="text" aria-invalid="false" aria-describedby="error" placeholder="Add a new task..."/>
           <button id="submit" type="submit" aria-label="add task"><span class="fas fa-plus"></span></button>
         </form>
-        <p class="error hidden" aria-describedby="error">Please enter a valid input</p>
+        <p class="error hidden" id="error">Please enter a valid input</p>
         <ul id="todoList">
         </ul>
 				<br/>
-				<h2 class="hidden" id="error">Completed Items</h2>
+				<h2 class="hidden" >Completed Items</h2>
 				<ul id="complete">
         </ul>
       </section>

diff --git a/index.js b/index.js
@@ -23,7 +23,7 @@ const addItemToList = (e) => {
   itemContainer.setAttribute("class", `list-item`);
   const itemLabel = document.createElement("LABEL");
   const checkBox = document.createElement("INPUT");
-	checkBox.setAttribute("aria-label", `check the checkbox to mark this task as completed`);
+  checkBox.setAttribute("aria-label", `check the checkbox to mark this task as completed`);
 
   // label - give label matching title of item to add
   itemLabel.setAttribute("title", itemToAdd);
@@ -32,9 +32,13 @@ const addItemToList = (e) => {
   const errorMessage = document.querySelector(".error");
   errorMessage.classList.add('hidden');
 
+  const inputSearchBar = document.querySelector("#addItem");
+  // console.log(inputSearchBar);
+
   // display message only if input input is empty string
   if (itemToAdd === '') {
     errorMessage.classList.remove('hidden');
+    inputSearchBar.setAttribute("aria-invalid", "true");
     return;
   }
 
@@ -83,8 +87,6 @@ const addItemToList = (e) => {
 
 	completedTasks();
 
-
-
 };
 
 const completedTasks = () => {
@@ -152,16 +154,12 @@ const moveItem = () => {
 	completedListItem.appendChild(completedLabel);
 	// add completed list item to completed section
 	completedTasksList.append(completedListItem);
-}else{
+  }else{
 
-	return console.error("completed item not created yet");
+    return console.error("completed item not created yet");
 
-}
+  }
 
 };
 
-
-
 submitButton.addEventListener("click", addItemToList);
-
-