اذهب إلى المحتوى

Mohamed Lotfi

الأعضاء
 عرض الملف الشخصي  تصفح المحتوى

  • المساهمات

    5

  • تاريخ الانضمام

  • تاريخ آخر زيارة

آخر الزوار

لوحة آخر الزوار معطلة ولن تظهر للأعضاء

إنجازات Mohamed Lotfi

عضو مبتدئ

عضو مبتدئ (1/3)

3

السمعة بالموقع

  1. Mohamed Lotfi بدأ بمتابعة خطأ عند إضافة مهام جديدة يتم حذف القديمة في جافاسكريبت مشكلة في عدم تحميل المعلومات المخزنة في localStorage في جافاسكريبت
  2. Mohamed Lotfi
    انا خزنت القيمه بلlocalstorage بس لما اعمل reload بختفا المحتوا ال موجود بل صفحه ممكن حدا يشوف الكود و يظبطو و يقلي وين الغلط بل كود مشان اتعلم ملف HTML <!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"> <title>Document</title> <link rel="stylesheet" href="To do list.css"> <script src="To do list.js" defer></script> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script> </head> <body> <div class="container"> <div> <h1 class="h11">Task List</h1> <p class="p1">New task</p> <input type="text" class="input1"> <button class="btn1 btn">ADD TASK</button> </div> <hr> <div> <h1 class="h12">Tasks</h1> <input type="text" class="input2" placeholder="Filter tasks"> <p class="p1">Click on this button and then on specific task to strike/unstrike it</p> <button class="btn1 btn4">Strike/Unstrike</button> <div class="container1" id="container1"> </div> <button class="btn2">CLEAR TASKS</button> <button class="btn1 strikeall">Strike all tasks</button> </div> </div> <script> </script> </body> </html> ملف جافاسكريبت var input1 = document.querySelector(".input1"), text1 = document.querySelector(".p1"), btn = document.querySelector(".btn1"), input2 = document.querySelectorAll(".input2"), container = document.getElementById("container1"), content = document.querySelector(".content"), A = 1; function tasks(value) { if (value.trim() < 1) { alert("Please enter a valid task"); } else { var div = document.createElement("div"), div2 = document.createElement("div"), div1 = document.createElement("div"), p = document.createElement("span"), x2 = document.createElement("span"); localStorage.setItem("task" + A, value); console.log(value); container.appendChild(div).appendChild(div1); div.classList.add("content"); div.appendChild(div2); p.innerText = localStorage.getItem("task" + A); p.classList.add("task"); div1.appendChild(p); x2.innerText = "✕"; x2.classList.add("x"); div2.appendChild(x2); A++; } } btn.onclick = function () { tasks(input1.value); }; window.onload = function () { setInterval(function () { $(function strike() { $(".x").click(function () { { $(this).parent().parent().remove(); } }); }, 2); }); }; $(".btn2").click(function () { { $(".x").parent().parent().remove(); localStorage.clear(); } }); $(".strikeall").click(function () { $(".task").toggleClass("strike"); }); $(".btn4").on("click", function () { $(".task").click(function () { $(this).toggleClass("strike"); }); }); input1.onfocus = function () { text1.classList.add("selected"); text1.classList.remove("unselected"); }; input1.onblur = function () { text1.classList.add("unselected"); text1.classList.remove("selected"); };
  3. Mohamed Lotfi
    شكرا كتير عل مساعده بس ممكن تشرحلي ليش ما شتغل معي قبل مشان اتعلم من الخطا
  4. Mohamed Lotfi
    جرب تشيل المساحه جنب كلمه log ;("hloo1") consol.log("hloo1"); != consol.log
  5. Mohamed Lotfi
    الكود شغال تمام بس المشكله لما بضيف اكتر من مهمه بتروح المهمه القديمه بس انا بدي تضل يا ريت حدا يشوف الكود ويصححلي الخطأ ملف "To do list.html" <!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"> <title>Document</title> <link rel="stylesheet" href="To do list.css"> <script src="To do list.js" defer></script> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script> </head> <body> <div class="container"> <div> <h1 class="h11">Task List</h1> <p class="p1">New task</p> <input type="text" class="input1"> <button class="btn1">ADD TASK</button> </div> <hr> <div> <h1 class="h12">Tasks</h1> <input type="text" class="input2" placeholder="Filter tasks"> <div class="container1" id="container1"> </div> <button class="btn2">CLEAR TASK</button> </div> </div> <script> </script> </body> </html> ملف "To do list.js" var input1 = document.querySelector(".input1"), text1 = document.querySelector(".p1"), btn = document.querySelector(".btn1"), input2 = document.querySelectorAll(".input2"), container = document.getElementById("container1"), content = document.querySelector(".content"), div = document.createElement("div"), div2 = document.createElement("div"), div1 = document.createElement("div"), p = document.createElement("span"), x2 = document.createElement("span") function tasks(value) { if (value.length < 1) { alert("Please enter a valid task"); } else { console.log(value); container.appendChild(div).appendChild(div1); div.classList.add("content"); div.appendChild(div2); p.innerText = value; p.classList.add("task"); div1.appendChild(p); x2.innerText = "✕"; x2.classList.add("x") div2.appendChild(x2) $(function strike() { $(".task").click(function() { $(this).toggleClass("strike"); }); $(".x").click(function() { $(this).parent().parent().remove(); }); }) } } window.onload = function() { $(function strike() { $(".task").click(function() { $(this).toggleClass("strike"); }); $(".x").click(function() { $(this).parent().parent().remove(); }); }) } btn.onclick = function() { tasks(input1.value); } input1.onfocus = function() { text1.classList.add("selected"); text1.classList.remove("unselected"); }; input1.onblur = function() { text1.classList.add("unselected"); text1.classList.remove("selected"); }
  6. Mohamed Lotfi
    هل يمكن تفحص هاته الشيفرة والاشارة للخطأ، اريد ان يزداد رقم في العنوان كل مره يتم الضغط على الصورة <body id="body"> <h1 id="title"></h1> <p id="close" onclick="open1()">🙈</p> <p id="open" onclick="close1()">🙉</p> <style> p { font-size: 200px; margin: 10% 38%; -webkit-touch-callout: none; -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; } #open { display: none; transition: all 10s; } #close { display: block; transition: all 10s; } </style> <script src="on click.js"></script> </body> جافاسكربت: function open1() { var opened = document.getElementById("open"), closed = document.getElementById("close"), body = document.getElementById("body"), clicks = document.getElementById("title").innerHTML, clicks = 0; clicks += 1; opened.style.display = "block"; closed.style.display = "none"; h1.style.color = "white"; } function close1() { var opened = document.getElementById("open"), closed = document.getElementById("close"), body = document.getElementById("body"), clicks = document.getElementById("title").innerHTML, clicks = 0; opened.style.display = "none"; closed.style.display = "block"; clicks += 1; } مرفق الملفات: on click.html on click.js
×
×
  • أضف...