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

Oday Qsrawi

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

  • المساهمات

    12

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

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

 نوع المحتوى 

ريادة الأعمال

البرمجة

التصميم

DevOps

التسويق والمبيعات

العمل الحر

البرامج والتطبيقات

آخر التحديثات

قصص نجاح

أسئلة وأجوبة

كتب

دورات

أجوبة بواسطة Oday Qsrawi

  1. كيف يمكن مقارنة string مع multiple string بإستخدام JS

    في جافا سكريبت

    نشر

    كيف يمكنن مقارنة النص الموضع داخل 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();

     

    • أعجبني 1

  2. كيف يمكنني ان استعمل اكثر من button لفعل نفس النتيجة بإستخدام دالة onclick()

    في جافا سكريبت

    نشر

     

    اريد ان يظهر لي 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);
}

    image_2021-08-11_165124.png

    • أعجبني 1

  4. هناك دروس مذكروة في ماذا سنتعلم بالدورة ولكنها غير موجودة..

    في أسئلة البرمجة

    نشر

    استخدام أحدث أدوات التطوير: Bootstrap 4 و jQuery و Sass

    التعامل مع خدمة استضافة المشاريع البرمجية GitHub و GitLab

    نشر صفحات الموقع على الإنترنت

    لم اجد sass او bootsrapاو GitHub و GitLabاو كيف ننشر صفحات الموقع على الإنترنت

    • أعجبني 1
×
×
  • أضف...