Learn JavaScript In Arabic 2021 - #101 - DOM Challenge

DOM Challenge

Study Plan:

Code & Notice:

Assignments:

=============================

Support Me on Patreon to Help me Create More Videos

I will be Very Happy if you Support my Channel.

Join Our Facebook Group:

Follow My Facebook Profile:

Like Facebook Page:

Follow Me On Twitter:

[youssefbelghiti]

Solution =>

// body styling
document.body.style.cssText = "margin: 0px; background-color: rgb(236, 236, 236); font-family:Tahoma, Arial;";



/* header */



// create header
let head =
head.style.cssText = "display:flex; padding: 20px; background-color: rgb(255, 255, 255); justify-content: space-between; align-items : center;";





// create logo
let logo =
logo.classList.add("logo");
logo.title = "website logo";
logo.style.cssText = "font-weight: bold; color:rgb(35, 169, 110); font- size: 26px;";
logo.innerHTML = "Elzero";
head.appendChild(logo);



// ul elements
let ul =
let headEle = ["Home", "About", "Service", "Contact"];
for (i= 0;i< headEle.length;i++ ){
let li =
li.style.margin = "5px";
li.style.color = "rgb(234 200 133)";
li.innerHTML = headEle[i];
ul.appendChild(li);
}
ul.classList.add("content");
ul.style.cssText = "paddig: 0px; margin: 0px; display: flex; list-style: none;";
head.appendChild(ul);



/* body */



// create content
let content =


content.style.cssText = "display: flex; padding: 20px; flex-wrap: wrap; justify-content: center; gap: 20px; min-height:calc(100vh - 142px); box-sizing: border-box;";



// create product
for(i= 0;i< 15;i++){
let product =

product.style.cssText = "padding: 20px; background-color: rgb(255, 255, 255); border: 1px solid rgb(221, 221, 221); width: calc((100% - 40px) / 3); box-sizing: border-box; text-align: center; color: rgb(136, 136, 136); border-radius: 6px";
let span =
span.style.cssText = "font-size: 40px; color: black; font-weight:normal; display: block; margin-bottom: 10px; margin-top: 10px;";
span.textContent = i+1;
product.appendChild(span);
product.append("Product");

}



/* footer */



// create footer
let foot =

foot.style.cssText = "background-color: rgb(35, 169, 110); font-size: 26px; text-align: center; padding: 20px; color: rgb(255, 255, 255);";
foot.append("Copyright 2021");

[ahmdsleman]

انا من سوريا وقد وصلت النمسا منذ اقل من شهر أول مصاري رح أوفرها رح اشتري لابتوب لكي أتعلم البرمجة الحمد لله الذي هداني لهذه القناة قبل غيرها التي حببتني بالبرمجة وجزاك الله خيرا يا صاحب القناة

[medemirbouhamar]

هو في احلى من انك تدخل عاليوتيوب و تلاقي الزيرو منزل فيديوهات جديدة ؟ ❤️

[ahmadhajnajeeb]

يعطيك العافية كوتش أسامة, شغل حضرتك أكتر من رائع ❤️❤️❤️

[sayedashraf]

تحدي تحفة جزاك الله خيرا، فعلا استمتعت و أنا أحله أخذ مني ساعة بس الحمد لله اتوفقت في حله
حل التحدي
// DOM Challenge

// Creating Header

let header =
let logoDiv =
let logo = document.createElement('a')
let ul = document.createElement('ul')
let li1 = document.createElement('li')
let li2 = document.createElement('li')
let li3 = document.createElement('li')
let li4 = document.createElement('li')
let a1 = document.createElement('a')
let a2 = document.createElement('a')
let a3 = document.createElement('a')
let a4 = document.createElement('a')

let logotext =
let text1 =
let text2 =
let text3 =
let text4 =

// Appending Elements Into The Header


header.appendChild(logoDiv)
header.appendChild(ul)
logoDiv.appendChild(logo)
ul.appendChild(li1)
ul.appendChild(li2)
ul.appendChild(li3)
ul.appendChild(li4)
li1.appendChild(a1)
li2.appendChild(a2)
li3.appendChild(a3)
li4.appendChild(a4)
logo.appendChild(logotext)
a1.appendChild(text1)
a2.appendChild(text2)
a3.appendChild(text3)
a4.appendChild(text4)

// Styling Header

document.body.style.cssText = 'font-family: arial'
header.style.cssText = 'display: flex; justify-content: space-between; align-items: center; padding: 10px'
logo.style.cssText = 'color: green; font-weight: 700; font-size: 25px '
ul.style.cssText = 'display: flex; align-items:center;'
li1.style.cssText = 'list-style: none'
li2.style.cssText = 'list-style: none'
li3.style.cssText = 'list-style: none'
li4.style.cssText = 'list-style: none'
a1.style.cssText = 'color: gray; padding: 10px; cursor: pointer; margin-right: 10px'
a2.style.cssText = 'color: gray; padding: 10px; cursor: pointer; margin-right: 10px'
a3.style.cssText = 'color: gray; padding: 10px; cursor: pointer; margin-right: 10px'
a4.style.cssText = 'color: gray; padding: 10px; cursor: pointer; margin-right: 10px'

// Creating Content

let Content =
Content.className = 'content'
header.after(Content)
for(let i = 1; i < 16; i++){
let product =
let span =
span.textContent = i
let product_text =
product.className = 'product'

// Appending Elmenets
Content.append(product)
product.prepend(span)
product.append(product_text)

// Styling Content
Content.style.cssText = 'display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; background-color: #f1f1f1; padding: 20px'
product.style.cssText = 'background-color: white; display: flex; flex-direction: column; text-align: center; padding: 20px; border: 2px solid balck; border-radius: 5px; color: gray; font-size: 14px '
span.style.cssText = 'font-size: 30px; color: black; margin-bottom: 10px'
// = '14px'
}

// Footer Section

// Creating Footer

let footer =
footer.textContent = "Copyright 2021"

// Styling Footer

footer.style.cssText = 'font-size: 25px; background-color: green; text-align: center; color: white; padding: 20px '

Content.after(footer)

[ibrahimtemmar]

يارب يوفقك ويعطيك ماتمنى تعلمت منك كثير جعلها الله في ميزان حسناتك .اخوك من الجزائر 🇩🇿 🇩🇿

[tmhgjft]

شرحك ممتع حبيبي, ربنا يحشرك مع رسول الله, فهمت الدرس بنسبة 100% انتي ملهم ما شاء الله عليك

[gamersyriapubgmobile]

جزاك الله خيرا يا بشمهندس و شكرا على هذا المجهود الرائع
زادك الله علمًا ورفعك قدرًا و جعل هذا العلم النافع فى ميزان حسناتك

[niha]

ربنا يوفقك ويجزاك خير علي الي بتقدمه للناس من علم

[FartakaTechnology]

عظمة علي عظمة كالعادة يا بشمهندس

ربنا يوفقك ويجزاك خير علي الي بتقدمه للناس من علم بكل حب

هفضل احطلك الكومنت دا علي كل فيديو اذاكره في الكورس دا لحد ما يخلص

[AhmedEmad-pvtq]

جزاك الله على هذا العلم الي تقدمه ، وزادك فيه❤

[abdelhamidesadek]

شكرا يا أفضل أستاذ
ومبروووك مليون مشترك وعقبال عشرة مليون إن شاء الله 3>

[aymaneamen]

تحدي تحفة جزاك الله خيرا، فعلا استمتعت و أنا أحله صحيح أخذ مني ساعتين بس الحمد لله اتوفقت في حله ❤❤

[abdalrzakal-mustafa]

❤❤ جزاك الله ووالديك عنا خير الجزاء ❤❤

[abdallhth.]

let div =
div.className = "contanr";
let header =
let logo = document.createElement('h2')
logo.innerHTML = 'Abdallh'
logo.style.color ='green';
logo.style.fontSize ='35px';
logo.style.margin= '5px';
logo.style.marginLeft= '20px';
let ul = document.createElement('ul');
ul.innerHTML = `
<li>home</li>
<li>home</li>
<li>home</li>
<li>home</li>
<li>home</li>
`;
ul.style.listStyle ='none'
header.style.display = 'flex';
header.style.justifyContent= 'space-between';
ul.style.gap= '30px';
ul.style.margin= '15px';
ul.style.marginRight= '10%';
ul.style.fontSize ='20px';
ul.style.display = 'flex';
let body = document.body
body.style.margin ='0px'
body.style.padding ='0px'
let divBody =

for(let i = 1 ; i<=30 ;i++){
var box
box.innerHTML =`
<h2>${i}</h2>
<p>prodct</p>
` ;
divBody.appendChild(box)
box.style.width = "220px"
divBody.style.flexGrow ='1'
box.style.height= "120px"
box.style.background ='#642642'
box.style.margin ='10px'
box.style.padding ='20px'
box.style.textAlign ='center'

}
divBody.style.display ='flex'
divBody.style.flexWrap ='wrap'
divBody.style.margin ='10px'
divBody.style.width ='100%'
let divEnd = document.createElement('div')
divEnd.innerHTML = "Abdallh 2024";
divEnd.style.background ="#009688";
divEnd.style.textAlign ='center';
divEnd.style.height ='30px';
divEnd.style.width ='100%';
divEnd.style.padding ='8px';
divEnd.style.color ='#fff';
divEnd.style.fontSize = '20px';
divEnd.style.position = 'fixed';
divEnd.style.bottom = '0';
body.appendChild(div)
div.appendChild(header)
header.appendChild(logo)
header.appendChild(ul)
div.appendChild(divBody)
div.appendChild(divEnd)

[justabdullrahman]

يمكن هذا واحد من أسهل التحديات الى الأن😂😂

[docter-hood]

التكليف كامل بعد يوم

// Font
const allItems =
allItems.forEach((item) => {
item.style.cssText = "font-family: Arial; margin: 0; padding: 0";
});
// Header
let header =
header.className = "website-head";
header.style.cssText = "display: flex; padding: 20px; background-color: rgb(255, 255, 255);justify-content: space-between;align-items: center;";

// Logo
let Logo =
let LogoText =
Logo.style.cssText = "color:#3CB371;font-weight: bold;font-size: 30px;";
Logo.appendChild(LogoText);

// Menu
let Menu = document.createElement("ul")


// li 1
let li_1 = document.createElement("li")
let liText_1 =

li_1.appendChild(liText_1);
// li 2
let li_2 = document.createElement("a")
let liText_2 =

li_2.appendChild(liText_2);

// li 3
let li_3 = document.createElement("a")
let liText_3 =

li_3.appendChild(liText_3);

// li 4
let li_4 = document.createElement("a")
let liText_4 =

li_4.appendChild(liText_4);

Menu.append(li_1)
Menu.append(li_2)
Menu.append(li_3)
Menu.append(li_4)

header.append(Logo)
header.append(Menu)
document.body.append(header)


//content
let content =
content.style.cssText = 20px;;box-sizing: border-box;padding:10px;";

// Product
for (let i = 1; i < 16; i++) {
let product =
color:black;border-radius: calc((100% - 200px) / 3);text-align:center;"

let span =
let spanText =

span.appendChild(spanText)

let pargh = document.createElement("p");
let parghText =

pargh.appendChild(parghText)

product.appendChild(span);
product.appendChild(pargh)
content.appendChild(product)
}


// Footer
let Footer =
let FooterText = 2021")
Footer.append(FooterText)
Footer.style.cssText ="text-align: center; font-size: 1.5rem; color: white; background-color: #126c51; padding: 16px";

[AhmedReda-lley]

تكاليف

let element1 =
let element2 =

=
=
element1.innerHTML = element2.innerHTML;
element2.innerHTML = element2.className
.toUpperCase()

[MustafaPersonal]

// Week 13 Assignment 2 Challenge

let addClasses =
let removeClasses =
let classesContainer = div");
let p = document.createElement("p");
p.append("No Classes To Show");

//function to add classes into the container
addClasses.addEventListener("blur", function () {
let inputToAdd = ");
//sort the classes
inputToAdd.sort();
for (let i = 0; i < inputToAdd.length; i++) {
// check if input is empty or space exists
if (inputToAdd[i] === '') continue;
let classElement =
classElement.innerHTML = `${inputToAdd[i]}`

}
addClasses.value = "";
// check if class list is empty
if {
classesContainer.append(p);
} else if (classesContainer.children[0] === p) {

}
})

// function to remove classes from the container
removeClasses.addEventListener("blur", function () {
let inputToRemove = ");
for (let i = 0; i < inputToRemove.length; i++) {
// check if input is empty or space exists
if (inputToRemove[i] === '') continue;
//search on classes to remove
for (let j = 0; j < j++) {
if === inputToRemove[i]) {

}
}
}
removeClasses.value = "";
// check if class list is empty
if {
classesContainer.append(p);
} else if (classesContainer.children[0] === p) {

}
})

[tonofcurses]

تحدي حلو وسهل انا تقريبا عملته بدماغي قبل ما ابدأ