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

Oday Qsrawi

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

  • المساهمات

    12

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

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

آخر الزوار

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

إنجازات Oday Qsrawi

عضو مساهم

عضو مساهم (2/3)

15

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

  1. Oday Qsrawi بدأ بمتابعة لماذا عند عمل arrow function نجعل العنصر const كيف يمكن مقارنة string مع multiple string بإستخدام JS كيف يمكنني ان استعمل اكثر من button لفعل نفس النتيجة بإستخدام دالة onclick()
  2. Oday Qsrawi
    كيف يمكنن مقارنة النص الموضع داخل INPUT مع H3 موجود داخل DIV موجود داخل DIV ,,, جربة استخدام FOR..IN للمرور على كل H3 موجودة وطلعلي ERROR (ncaught TypeError: Cannot read property 'childNodes' of undefined) HTML <!DOCTYPE html> <html> <head> <link rel="stylesheet" href="pro2.css"> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.5.0/font/bootstrap-icons.css"> </head> <body> <div id="parent"> <div id="up"> <h1>Add New Task</h1> <input type="text" id="addinput" placeholder="New Task"> <div id="bdiv"> <button onclick="newTask()" >Add task</button></div> </div> <div id="down"> <h1>Filter Tasks</h1> <input type="text" id="filter" placeholder="filter Tasks" onclick="filterfun()"> </div> <h2>List Of Tasks</h2> <div id="tasks"> </div> <button class="zz"onclick="TP()">Clear tasks</button> </div> <script src="pro2.js"></script> </body> </html> JS 'use strict'; let id=0; const tasks=document.getElementById('tasks'); function newTask(){ // if the input is empty if(addinput.value === "" ) alert("Enter a task plz!") ; //if the input is number else if(!isNaN(addinput.value)) alert("Enter a usefull task plz!") ; //if the entered task is already exist else if(comp()) alert("This task already exist") else{ id++; let v1=document.getElementById("addinput").value; localStorage.setItem(id,v1); //new div in tasks let newdiv=document.createElement('div'); newdiv.setAttribute("id", "task"); tasks.appendChild(newdiv); //new h1 in newdiv let newh3=document.createElement('h3'); newh3.setAttribute("id", "h3"); newh3.addEventListener('click',()=>{ newh3.style.textDecoration="line-through"; }); let newtext=document.createTextNode(localStorage.getItem(id)); newh3.appendChild(newtext) newdiv.appendChild(newh3); //new i in newdiv let newi=document.createElement('i'); newi.setAttribute("class", "bi bi-x-square-fill"); newi.addEventListener('click',()=>{ alert('are u shure'); newi.parentNode.parentNode.removeChild(newi.parentNode); }); newdiv.appendChild(newi); //empty the value after click addinput.value=""; } } //comperison between the enterd value and items in local storage const comp=()=>{ for(let i=0;i<=localStorage.length+1;i++) { if(addinput.value===localStorage.getItem(i)) return true; } return false; } function TP(){ // for(let z=1;z<tasks.childElementCount;z++) for(let z in tasks) { if(filter.value==tasks.childNodes[z].childNodes[0].textContent) console.log('hello'); } // console.log(filter.value,typeof(filter.value)); // console.log(tasks.childNodes[1].childNodes[0].textContent,typeof(tasks.childNodes[1].childNodes[0].textContent)) } function filterfun(){ } localStorage.clear();
  3. Oday Qsrawi
    اريد ان يظهر لي ALERT بعد الضغط على اي تاغ من نوع (i) ,, مع العلم انني استخدم JS HTML DOM لخلقها كما هو موضح بالjs HTML <!DOCTYPE html> <html> <head> <link rel="stylesheet" href="pro2.css"> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.5.0/font/bootstrap-icons.css"> <!-- @import url("https://cdn.jsdelivr.net/npm/bootstrap-icons@1.5.0/font/bootstrap-icons.css"); --> <!-- <i class="bi bi-x-square-fill"></i> --> </head> <body> <div id="parent"> <div id="up"> <i class="bi bi-x-square-fill" id="ii"></i> <h1>Add New Task</h1> <input type="text" id="addinput" placeholder="New Task"> <div id="bdiv"> <button onclick="newTask()">Add task</button></div> </div> <div id="down"> <h1>Filter Tasks</h1> <input type="text" id="filter" placeholder="filter Tasks"> </div> <div id="tasks"> <h2>List Of Tasks</h2> </div> <button class="zz">Clear tasks</button> </div> <script src="pro2.js"></script> </body> </html> JS let id=0; const tasks=document.getElementById('tasks'); function newTask(){ id++; let v1=document.getElementById("addinput").value; localStorage.setItem(id,v1); //new div in tasks let newdiv=document.createElement('div'); tasks.appendChild(newdiv); newdiv.setAttribute("id", "task"); //new h1 in newdiv let newh3=document.createElement('h3'); let newtext=document.createTextNode(localStorage.getItem(id)); newh3.appendChild(newtext) newdiv.appendChild(newh3); newh3.setAttribute("id", "h3"); //new i in newdiv let newi=document.createElement('i'); newdiv.appendChild(newi); newi.setAttribute("class", "bi bi-x-square-fill"); } document.querySelectorAll("i").addEventListener("click",icon) function icon(){ alert('are u shure'); // const newicon=document.getElementById('bi'); // newicon.parentNode.removeChild(newicon); }
  4. Oday Qsrawi
    لماذا عند عمل arrow function نجعل العنصر const
  5. Oday Qsrawi
    استخدام أحدث أدوات التطوير: Bootstrap 4 و jQuery و Sass التعامل مع خدمة استضافة المشاريع البرمجية GitHub و GitLab نشر صفحات الموقع على الإنترنت لم اجد sass او bootsrapاو GitHub و GitLabاو كيف ننشر صفحات الموقع على الإنترنت
×
×
  • أضف...