JavaScript و كيفية تعاملها مع شجرة الDOM

مرحباً @Mari Carmen 

بتاريخ 2 ساعات قال Mari Carmen:

1-     When the user writes inside the text box and clicks Insert to header, this will change the header of the page with the written text.

هنا يطلب منك تغيير النص الموجود في الوسم h1 في حالة ملأ حقل الإدخال و الضغط على زر insert header

بتاريخ 2 ساعات قال Mari Carmen:

2-     When the user selects a color and clicks Apply, the background color of the page should be changed.

هنا يطلب منك تغيير لون الخلفية للصفحة في حالة تحديد لون و الضغط على زر Apply

بتاريخ 2 ساعات قال Mari Carmen:

3-     When the user clicks on a paragraph, this will change the background color of the paragraph to yellow.

إذا ضغط المُستخدم على أي فقرة يتغير لون خلفيتها إلى الأصفر.

بتاريخ 2 ساعات قال Mari Carmen:

4-     When the user double clicks on any paragraph, this will hide the paragraph.

إذا ضغط المُستخدم مرتين على اي فقرة يتم إخفاؤها.

بتاريخ 2 ساعات قال Mari Carmen:

5-     Clicking on Show all paragraphs, this will show all the paragraphs in the page.

إذا ضغط المُستخدم على زر show all paragraphs يتم إظهار كافة الفقرات في الصفحة.

و هذه الإجابة على كل الأسئلة بالتفصيل:

document.addEventListener("DOMContentLoaded", function() { // الإنتظار لحين تحميل كافة عناصر الصفحة

        let header = document.querySelector('h1'), // أول عنصر يحمل الوسم h1
            allParagraph = document.querySelectorAll("p"), // جلب كافة الفقرات
            colorInput = document.querySelector("input[type=color]");

        /*
            الإجابة على السؤال الأول
            تحديد كافة العناصر input التي تحمل القيمة Insert header و من أجل كل عنصر نضيف مستمع لحدث الضغط
            نجلب حقل الإدخال السابق للزر الذي تم الضغط عليه و نُعاين عدد محارف النص المًدخل إذا كان أكبر من 5 نُغير نص الوسم h1
            و في الأخير نُفرغ الحقل.
         */
        document.querySelectorAll("input[value='Insert header']").forEach(elm => {
            elm.addEventListener('click', function() {
                let headerInput = this.previousElementSibling;
                if (headerInput.value.length > 5) { // إذا كان عدد محارف النص المدخل أكبر من 5
                    header.innerText = headerInput.value; // نقوم بتغيير النص لعنوان الصفحة
                    headerInput.value = ''; // إفراغ حقل الإدخل.
                }
            })
        });

        /*
            الإجابة على السؤال الثاني
            تحديد زر تغيير لون الخلفية
            إضافة مُستمع لحدث الضغط
            تغيير لون الخلفية للون الذي تم تحديده في حقل اللون
         */
        document.querySelector("input[value='Apply to background']").addEventListener('click', function () {// إضافة مُستمع لحدث النقر على زر تغيير لون الخلفية
            document.body.style.backgroundColor = colorInput.value; //تغيير لون الخلفية
        });

        /*
            الإجابة على السؤال الثالث
            عمل حلقة على كل عناصر الفقرة
            من أجل كل فقرة نضيق مُستمع لحدث الضغط
            تغيير لون خلفية الفقرة التي تم الضغط عليها إلى الأصفر
            تغيير لون خلفية الفقرات الأشقاء للون الأبيض
         */
        allParagraph.forEach( p => {
            p.addEventListener('click', function () {
                this.style.backgroundColor = "yellow"; // تغيير لون خلفية الفقرة التي تم الضغط عليها
                // جعل لون خلفية بقية الفقرات أبيض
                allParagraph.forEach(item => {
                    if (item != p)
                        item.style.backgroundColor = "white";
                })
            })
        });

        /*
            الإجابة على السؤال الرابع
            عمل حلقة على كل عناصر الفقرة
            من أجل كل فقرة نضيق مُستمع لحدث الضغط المُزدوج
            إخفاء الفقرة المعنية
         */
        allParagraph.forEach( p => {
            p.addEventListener('dblclick', function () {
                this.style.display = 'none'; // إخفاء الفقرة التي تم الضغط عليها مرتين
            })
        });

        /*
            الإجابة على السؤال الخامس
            تحديد زر إظهار الفقرات
            إضافة مُستمع لحدث الضغط
            عمل حلقة على كل فقرات الصفحة
            إظهار كل فقرة
         */
        document.querySelector("input[value='Show paragraphs']").addEventListener('click', function () {
            allParagraph.forEach( p => {
                p.style.display = 'block';
            })
        });
    });

بإمكانك تجربة الشيفرات من خلال موقع codepen من: هنا

بالتوفيق.

كتبت لك أكواد javascript بطريقة مبسطة .

أكواد html بعد إضافة إستدعاء function عليه :

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body id="b">

<h1 id="h1">Welcome Back</h1>

<hr>

<br>

 

<p id="pra">  Hello class </p>

<p id="pra2"> No more Covid19 </p>

<p id="pra3"> Be safe </p>

<p id="pra4"> Best wishes </p>

<h2 id="pra5">See you soon</h2>

 

<hr>

<br>

 

<input type="text" class="myInput" value="s" id="myInput">

<input type="button" value="Insert header" onclick="getInputValue()">

<br><br>

<input type="color" id="color">

<input type="button" value="Apply to background" onclick="addColor()">

<br><br>

<input type="text" >

<input type="button" value="Insert header">

<br><br>

<input type="button" value="Show paragraphs">

  
</body>
</html>

أكواد javascript :

function getInputValue(){
            // إستدعاء المدخل الذي يتم كتابة في العنزان
            var inputVal = document.getElementById("myInput").value;
            
            // إستدعاء العنوان 
            document.getElementById("h1").innerHTML = inputVal;
            
        }
		//الفانكشن الخاصة بإضافة اللون على الصفحة
        function addColor() {
          	المتغير الخاص بمدخل اللون
            var maiC = document.getElementById("color").value;
          	//الكود الخاص بإضافة كود اللون على تنسيقات الصفحة 
            document.getElementById("b").style.backgroundColor = maiC;
        }
		// هذة أكواد إضافة لون أصفر على خلفية الكلام المكتوب في البراجراف
		//وهذا أستدعاء أول سطر  عند الضغط عليه كليك واحدة
        var ya = document.getElementById("pra");
        ya.onclick = function() { 
          	// يغير اون خلفية العنصر إلى الأصفر
            ya.style.backgroundColor = "yellow";
        }
        var ya2 = document.getElementById("pra2");
        ya2.onclick = function() {
            ya2.style.backgroundColor = "yellow";
        }
        var ya3 = document.getElementById("pra3");
        ya3.onclick = function() {
            ya3.style.backgroundColor = "yellow";
        }
        var ya4 = document.getElementById("pra4");
        ya4.onclick = function() {
            ya4.style.backgroundColor = "yellow";
        }
        var ya5 = document.getElementById("pra5");
        ya5.onclick = function() {
            ya5.style.backgroundColor = "yellow";
        }
		
        /*ondblclick none*/
        /*نفس الفكرة وعند الضغط على كليك مراتين متتاليتين سوف يحذف العنصر */
        ya.ondblclick = function() {
            ya.style.display = "none";
            
        }
        ya2.ondblclick = function() {
            ya2.style.display = "none";
            
        }
        ya3.ondblclick = function() {
            ya3.style.display = "none";
            
        }
        ya4.ondblclick = function() {
            ya4.style.display = "none";
            
        }