مشكلة عند إزالة مهمة في تطبيقي to do list

Mohammed Hhhh · 25 سبتمبر 2022

لدي مشكله في برنامجي هي اني عندما اقوم بأزالة مهمه تختفي ولكن المهمه التي اسفلها لا تنتقل بشكل سلس بالتقوم بالأرتفاع مباشره ما حل ذلك موضوح في الفيديو

الاكواد

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  <link href="https://fonts.googleapis.com/css2?family=Poppins&display=swap" rel="stylesheet">
  <link rel="stylesheet" href="style.css">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.0/css/all.min.css"
    integrity="sha512-xh6O/CkQoPOWDdYTDqeRdPCVd1SpvCA9XXcUnZS2FmJNp1coAFzvtCN9BmamE+4aHK8yyUHUSCcJHgXloTyT2A=="
    crossorigin="anonymous" referrerpolicy="no-referrer" />
  <title>To Do List</title>
</head>

<body>

  <header>To do List</header>
  <form action="">
    <input class="txt" id="txt" type="text" placeholder="Please Write Here!" id="todo_txt">
    <button type="submit" id="submit_todo"><i class="fa-solid fa-square-plus"></i></button>
  </form>

  <div class="availabel"></div>

  <ul class="tasks" id="ul">

    <!-- js -->

  </ul>


  <script src="main.js"></script>
</body>

</html>

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Poppins', sans-serif;
    transition: all ease;
    -webkit-transition: all ease;
    -moz-transition: all ease;
    -ms-transition: all ease;
    -o-transition: all ease;
}
body{
    transition: all 2s ease ;
    -webkit-transition: all 2s ease ;
    -moz-transition: all 2s ease ;
    -ms-transition: all 2s ease ;
    -o-transition: all 2s ease ;
}
header {
    width: 100%;
    height: 5vh;
    background-color: rgb(39, 39, 39);
    color: white;
    padding: 20px;
    display: flex;
    align-items: center;
}

form {
    margin: 50px;
    width: 100%;
    height: 5vh;
    display: flex;
    align-items: center;
    justify-content: center;
}

.txt {
    padding: 5px;
    margin: 10px;
    width: 500px;
}

form button {

    width: 100px;
    font-size: 20px;

}

.tasks {
    min-width: 100%;
    /*background-color: rgb(103, 103, 103);
    */padding: 30px;
    color: white;
    transition: all ease 2s ;
    -webkit-transition: all ease 2s ;
    -moz-transition: all ease 2s ;
    -ms-transition: all ease 2s ;
    -o-transition: all ease 2s ;
}

.singil_task {
    min-width: 100%;
    display: flex;
    justify-content: space-evenly;
    align-items: center;
    margin: 5px;
    background-color: rgb(23, 23, 23);
    padding: 30px;
    border-radius: 10px;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    -ms-border-radius: 10px;
    -o-border-radius: 10px;
    transition: all ease 0.5s;
    -webkit-transition: all ease 0.5s;
    -moz-transition: all ease 0.5s;
    -ms-transition: all ease 0.5s;
    -o-transition: all ease 0.5s;
}

p {
    max-width: 50%;
    min-width: 50%;
    overflow: hidden;
}

.icons {
    min-width: 74px;
    font-size: 24px;
}

.icons i {
    transition: all ease 0.5s;
    -webkit-transition: all ease 0.5s;
    -moz-transition: all ease 0.5s;
    -ms-transition: all ease 0.5s;
    -o-transition: all ease 0.5s;
}

.fa-circle-xmark:hover {
    color: red;
}

.fa-circle-check:hover {
    color: green;
}

.availabel {
    text-align: center;
    position: absolute;
    width: 210px;
    height: 45px;
    top: 115px;
    right: 0;
}

h5 {
    animation: animationv ease 1.2s;
    -webkit-animation: animationv ease 1.2s;
}

.singil_task {
    animation: animationc ease 1s;
    -webkit-animation: animationc ease 1s;
}

@keyframes animationc {
    0% {
        opacity: 0.5;
        transform: perspective(700px) translate(0px, 80px);
        transform-origin: center center;
    }

    100% {
        opacity: 1;

        transform: perspective(700px);
        transform-origin: center center;

    }
}

@keyframes animationv {
    0% {
        opacity: 0.5;
        transform: perspective(700px) translate(0px, 80px);
        transform-origin: center center;
    }

    50% {
        opacity: 1;

        transform: perspective(700px);
        transform-origin: center center;

    }

    100% {
        opacity: 0;
        transform: perspective(700px) translate(0px, 80px);
        transform-origin: center center;
    }
}

.done {
    opacity: 0.2;
    background-color: green;
    color: black;
}

.remove{
    opacity: 0;
    transform: scale(2);
    -webkit-transform: scale(2);
    -moz-transform: scale(2);
    -ms-transform: scale(2);
    -o-transform: scale(2);
}

let task_title = document.getElementById("txt");
let submit_btn = document.getElementById("submit_todo");
let availabel = document.querySelector(".availabel");

submit_btn.onclick = function (e) {
    e.preventDefault();

    if (task_title.value != "") {
        let ul = document.getElementById("ul");

        let li = document.createElement("li");
        li.classList.add("singil_task");

        let p = document.createElement("p");
        p.textContent = task_title.value;

        let div_icons = document.createElement("div");
        div_icons.classList.add("icons");

        div_icons.innerHTML = `
<i class="fa-circle-check fa-sharp fa-solid "></i>
<i class="fa-circle-xmark fa-solid" style="padding-left: 15px;"></i>
`;

        li.appendChild(p);
        li.appendChild(div_icons);
        ul.appendChild(li);
        task_title.value = "";

        let cheak = li.querySelector(".fa-circle-check");
        cheak.addEventListener("click", function () {
            li.classList.toggle("done");
        });
        let deleteBtn = li.querySelector(".fa-circle-xmark");
        deleteBtn.addEventListener("click", function () {
            li.classList.add("remove");
            li.addEventListener('transitionend' , _ =>{
                li.remove();
            })

        });
    } else {
        let h5 = document.createElement("h5");
        h5.textContent = "please enter a task";
        h5.style.color = "red";
        h5.style.display = "block";
        h5.style.padding = "10px";

        availabel.appendChild(h5);
        setTimeout((_) => {
            h5.remove();
        }, 1000);
    }
};

Kais Hasan · 25 سبتمبر 2022

يمكنك مثلاً عند عملية الحذف أن تقوم بتصغير الذي يحوي على المهمة التي يتم حذفها و ذلك تدريجياً، فيظهر لك إحساس بأنها ترتفع بشكل تدريجي و ليس بشكل مباشر.

أي أنك في عملية الحذف يتم استدعاء تابع يقوم بالحذف مع ال animation الذي يظهر في الفيديو الخاص بك، في نفس هذا التابع يمكنك بدل ان تحذف المكون بشكل مباشر ( و الذي سيؤدي إلى ارتفاع مباشر للمهمة التي في الأسفل) أن تقوم بتصغير حجم المكون الذي يحويه بشكل تدريجي مما سيؤدي إلى المطلوب.

يوجد طرق عديدة أخرى و لكن الطريقة التي تحدثت عنها عامة بغض النظر عما تقوم باستعماله.

Mohammed Hhhh · 25 سبتمبر 2022

بتاريخ On 25‏/9‏/2022 at 06:14 قال Kais Hasan:

يمكنك مثلاً عند عملية الحذف أن تقوم بتصغير الذي يحوي على المهمة التي يتم حذفها و ذلك تدريجياً، فيظهر لك إحساس بأنها ترتفع بشكل تدريجي و ليس بشكل مباشر.

أي أنك في عملية الحذف يتم استدعاء تابع يقوم بالحذف مع ال animation الذي يظهر في الفيديو الخاص بك، في نفس هذا التابع يمكنك بدل ان تحذف المكون بشكل مباشر ( و الذي سيؤدي إلى ارتفاع مباشر للمهمة التي في الأسفل) أن تقوم بتصغير حجم المكون الذي يحويه بشكل تدريجي مما سيؤدي إلى المطلوب.

يوجد طرق عديدة أخرى و لكن الطريقة التي تحدثت عنها عامة بغض النظر عما تقوم باستعماله.

أظهر المزيد

لم يعمل

Desktop_2022_09.25_-_09_18_04_02.mp4

Kais Hasan · 25 سبتمبر 2022

بتاريخ On 25‏/9‏/2022 at 06:19 قال Mohammmed Mahmoud:

لم يعمل

أظهر المزيد

عليك القيام بذلك بشكل تدريجي، أنت تقوم بذلك بشكل مباشر.

جرب إضافة ما يلي:

-webkit-transition: transform 2s ease-in-out;

Mohammed Hhhh · 25 سبتمبر 2022

بتاريخ On 25‏/9‏/2022 at 06:30 قال Kais Hasan:
عليك القيام بذلك بشكل تدريجي، أنت تقوم بذلك بشكل مباشر.

جرب إضافة ما يلي:
-webkit-transition: transform 2s ease-in-out;
أظهر المزيد

اضيفها وين و شكرا

Kais Hasan · 25 سبتمبر 2022

بتاريخ On 25‏/9‏/2022 at 06:31 قال Mohammmed Mahmoud:

اضيفها وين و شكرا

أظهر المزيد

في قواعد ال css، نفس القواعد التي أرفقتها أنت في الصورة، أضف إليها هذه القاعدة.

Mohammed Hhhh · 25 سبتمبر 2022

بتاريخ On 25‏/9‏/2022 at 06:32 قال Kais Hasan:

في قواعد ال css، نفس القواعد التي أرفقتها أنت في الصورة، أضف إليها هذه القاعدة.

أظهر المزيد

Kais Hasan · 25 سبتمبر 2022

جرب إضافة ما يلي أيضاً:

-moz-transition: transform 2s ease-in-out;
transition: transform 2s ease-in-out;

تعديل:

كما يجب عليك أن تضع scale لل opacity.

Mohammed Hhhh · 25 سبتمبر 2022

بتاريخ On 25‏/9‏/2022 at 06:48 قال Kais Hasan:
جرب إضافة ما يلي أيضاً:
-moz-transition: transform 2s ease-in-out;
transition: transform 2s ease-in-out;
تعديل:

كما يجب عليك أن تضع scale لل opacity.
أظهر المزيد

اذا تقدر ارسلي الكود كامل مع تعديلاتك

مشكلة عند إزالة مهمة في تطبيقي to do list

السؤال

Mohammed Hhhh

8 أجوبة على هذا السؤال

Recommended Posts

Kais Hasan

Mohammed Hhhh

Kais Hasan

Mohammed Hhhh

Kais Hasan

Mohammed Hhhh

Kais Hasan

Mohammed Hhhh

انضم إلى النقاش

إعلانات

تابعنا على

الرئيسية

كيف أتعلم؟

تابعنا

دروس ومقالات

أسئلة وأجوبة

كتب

دورات

بطاقات هدية