Merge pull request avinash201199#220 from avinash201199/revert-217-main

Revert "Make list card responsive"
Bad-Devs · Oct 12, 2022 · 36ee0cc · 36ee0cc
2 parents c0a667a + 1ac7c7a
commit 36ee0cc
Show file tree

Hide file tree

Showing 2 changed files with 12 additions and 41 deletions.
diff --git a/assets/css/style.css b/assets/css/style.css
@@ -69,7 +69,6 @@ body {
     background-image: url("https://www.slideteam.net/wp/wp-content/uploads/2016/05/Radial-1-690x518.png");
     background-repeat: no-repeat;
     background-size: 100% 100%;
-    background-attachment: fixed;
     /* opacity: 50%; */
     /* background-image: linear-gradient(45deg, rgba(254, 246, 210, 0.53) 0%, rgba(254, 246, 210, 0.53) 14.286%, rgba(221, 240, 216, 0.53) 14.286%, rgba(221, 240, 216, 0.53) 28.572%, rgba(188, 233, 223, 0.53) 28.572%, rgba(188, 233, 223, 0.53) 42.858%, rgba(156, 227, 229, 0.53) 42.858%, rgba(156, 227, 229, 0.53) 57.144%, rgba(123, 220, 235, 0.53) 57.144%, rgba(123, 220, 235, 0.53) 71.42999999999999%, rgba(90, 214, 242, 0.53) 71.43%, rgba(90, 214, 242, 0.53) 85.71600000000001%, rgba(57, 207, 248, 0.53) 85.716%, rgba(57, 207, 248, 0.53) 100.002%), linear-gradient(135deg, rgb(246, 99, 200) 0%, rgb(246, 99, 200) 12.5%, rgb(223, 98, 196) 12.5%, rgb(223, 98, 196) 25%, rgb(199, 97, 192) 25%, rgb(199, 97, 192) 37.5%, rgb(176, 96, 188) 37.5%, rgb(176, 96, 188) 50%, rgb(152, 95, 184) 50%, rgb(152, 95, 184) 62.5%, rgb(129, 94, 180) 62.5%, rgb(129, 94, 180) 75%, rgb(105, 93, 176) 75%, rgb(105, 93, 176) 87.5%, rgb(82, 92, 172) 87.5%, rgb(82, 92, 172) 100%); */
 }
@@ -287,10 +286,8 @@ form button:hover {
     outline: none;
     border-radius: 5px;
     animation: expand .5s ease-in-out;
-    padding: 1rem;
 }
 
-
 .main_heading h1 {
     font-size: 8rem;
 }
@@ -433,7 +430,6 @@ select {
     overflow: hidden;
     background-color: #80D0C7;
     border-radius: 5px;
-    text-align: center;
 }
 
 .abc {
@@ -681,10 +677,6 @@ select {
 }
 
 @media only screen and (max-width: 440px) {
-    .buttons-wrapper{
-        display: flex;
-        flex-direction: column;
-    }
     .confirmation_box {
         /* border: 1px solid black; */
         width: 300px;
@@ -789,13 +781,6 @@ select {
         background-color: #55acee;
         text-align: center;
     }
-    .todo{
-        display: flex;
-        flex-direction: column;
-    }
-    .all-buttons{
-        margin: 2rem 1rem 0 1rem;
-    }
 }
 
 /* Style for fa-heart */

diff --git a/assets/js/app.js b/assets/js/app.js
@@ -58,7 +58,6 @@ function getItemFromLocalStorage() {
 function addTodo(e) {
   //Prevent natural behavior
   e.preventDefault();
-  window.location.reload();
 
   const createTime = getTime();
   const infoText = `The todo item was created at ${createTime}, ${day}`;
@@ -95,15 +94,9 @@ function addTodo(e) {
   //Save to local
   saveLocalTodos(newTodoItem);
   //
-
-
   newTodo.classList.add("todo-item");
   newTodo.classList.add("todo");
   todoDiv.appendChild(newTodo);
-  // created a div to contain all the buttons, for making website responsive
-  const allbuttons = document.createElement('div');
-  // added a class
-  allbuttons.classList.add('all-buttons');
   todoInput.value = "";
   const edit = document.createElement("div");
   edit.innerHTML =
@@ -127,26 +120,25 @@ function addTodo(e) {
   const completedButton = document.createElement("button");
   completedButton.innerHTML = `<i class="fas fa-check"></i>`;
   completedButton.classList.add("complete-btn");
-  allbuttons.appendChild(completedButton);
+  todoDiv.appendChild(completedButton);
   //Create edit button
   const editButton = document.createElement("button");
   editButton.innerHTML = `<i class="fas fa-pen"></i>`;
   editButton.classList.add("edit-btn");
   editButton.addEventListener("click", () => editTodo(newTodoItem, todoDiv));
-  allbuttons.appendChild(editButton);
+  todoDiv.appendChild(editButton);
   //Create trash button
   const trashButton = document.createElement("button");
   trashButton.innerHTML = `<i class="fas fa-trash"></i>`;
   trashButton.classList.add("trash-btn");
-  allbuttons.appendChild(trashButton);
+  todoDiv.appendChild(trashButton);
   //Create info button
   const infoButton = document.createElement("span");
   infoButton.innerHTML = `<i class="fas fa-info-circle infoIcon"><span class="infoToolTip">`+`${infoText}`+`</span></i>`;
   infoButton.classList.add("edit-btn");
-  allbuttons.appendChild(infoButton);
+  todoDiv.appendChild(infoButton);
 
   //attach final Todo
-  todoDiv.appendChild(allbuttons);
   todoList.appendChild(todoDiv);
 }
 
@@ -155,7 +147,7 @@ function deleteTodo(e) {
 
   if (item.classList[0] === "trash-btn") {
     // e.target.parentElement.remove();
-    const todo = item.parentElement.parentElement;
+    const todo = item.parentElement;
     todo.classList.add("fall");
     //at the end
     removeLocalTodos(todo);
@@ -164,7 +156,7 @@ function deleteTodo(e) {
     });
   }
   if (item.classList[0] === "complete-btn") {
-    const todo = item.parentElement.parentElement;
+    const todo = item.parentElement;
     todo.classList.toggle("completed");
     const status = "completed";
     const id = todo.getAttribute("key");
@@ -290,8 +282,6 @@ function getTodos() {
     }
     todoDiv.setAttribute("key", todo.id);
     //Create list
-    const allbuttons = document.createElement("div");
-    allbuttons.classList.add('all-buttons');
     const newTodo = document.createElement("li");
     newTodo.innerText = todo.task;
     newTodo.classList.add("todo-item");
@@ -300,14 +290,13 @@ function getTodos() {
     const completedButton = document.createElement("button");
     completedButton.innerHTML = `<i class="fas fa-check"></i>`;
     completedButton.classList.add("complete-btn");
-    allbuttons.appendChild(completedButton);
+    todoDiv.appendChild(completedButton);
     //Create trash button
     const trashButton = document.createElement("button");
     trashButton.innerHTML = `<i class="fas fa-trash"></i>`;
     trashButton.classList.add("trash-btn");
-    allbuttons.appendChild(trashButton);
+    todoDiv.appendChild(trashButton);
     //attach final Todo
-    todoDiv.appendChild(allbuttons);
     todoList.appendChild(todoDiv);
   });
 }
@@ -374,8 +363,6 @@ function getTodos() {
       todoDiv.classList.toggle("completed");
     }
     //Create list
-    const allbuttons = document.createElement("div");
-    allbuttons.classList.add('all-buttons');
     const newTodo = document.createElement("li");
     newTodo.innerText = todo.task;
     newTodo.classList.add("todo-item");
@@ -404,31 +391,30 @@ function getTodos() {
     const completedButton = document.createElement("button");
     completedButton.innerHTML = `<i class="fas fa-check"></i>`;
     completedButton.classList.add("complete-btn");
-    allbuttons.appendChild(completedButton);
+    todoDiv.appendChild(completedButton);
     //Create edit button
     const editButton = document.createElement("button");
     editButton.innerHTML = `<i class="fas fa-pen"></i>`;
     editButton.classList.add("edit-btn");
     editButton.addEventListener("click", () => editTodo(todo, todoDiv));
-    allbuttons.appendChild(editButton);
+    todoDiv.appendChild(editButton);
     //Create trash button
     const trashButton = document.createElement("button");
     trashButton.innerHTML = `<i class="fas fa-trash"></i>`;
     trashButton.classList.add("trash-btn");
     todoDiv.setAttribute("key", todo.id);
-    allbuttons.appendChild(trashButton);
+    todoDiv.appendChild(trashButton);
     //Create info button
     if (!todo.infoText)
       todo.infoText = "Create time not found.";
     const infoButton = document.createElement("span");
     infoButton.innerHTML = `<i class="fas fa-info-circle infoIcon"><span class="infoToolTip">`+`${todo.infoText}`+`</span></i>`;
     infoButton.classList.add("edit-btn");
-    allbuttons.appendChild(infoButton);
+    todoDiv.appendChild(infoButton);
     infoButton.addEventListener("click", () => {
       alert(todo.infoText)
     });
     //attach final Todo
-    todoDiv.appendChild(allbuttons);
     todoList.appendChild(todoDiv);
   });
 }