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

Mohamed Lotfi

الأعضاء
  • المساهمات

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

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

كل منشورات العضو Mohamed Lotfi

  1. انا خزنت القيمه بل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"); };
  2. شكرا كتير عل مساعده بس ممكن تشرحلي ليش ما شتغل معي قبل مشان اتعلم من الخطا
  3. جرب تشيل المساحه جنب كلمه log ;("hloo1") consol.log("hloo1"); != consol.log
  4. الكود شغال تمام بس المشكله لما بضيف اكتر من مهمه بتروح المهمه القديمه بس انا بدي تضل يا ريت حدا يشوف الكود ويصححلي الخطأ ملف "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"); }
  5. هل يمكن تفحص هاته الشيفرة والاشارة للخطأ، اريد ان يزداد رقم في العنوان كل مره يتم الضغط على الصورة <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
×
×
  • أضف...