diff --git a/css/master.css b/css/master.css new file mode 100644 index 0000000..e69de29 diff --git a/document.html b/document.html new file mode 100644 index 0000000..f370a4a --- /dev/null +++ b/document.html @@ -0,0 +1,26 @@ + + + + + this is demo + + + +
+
+

Mostafa Kamal

+

software engineer

+
+
+

Nishi IT Ltd

+
+
+

Daffodil International University

+
+
+ + + + + + diff --git a/element.html b/element.html new file mode 100644 index 0000000..17e924b --- /dev/null +++ b/element.html @@ -0,0 +1,23 @@ + + + + + this is demo + + + +
+
+

Mostafa Kamal

+

software engineer

+
+
+

Nishi IT Ltd

+
+
+

Daffodil International University

+
+
+ + + diff --git a/event.html b/event.html new file mode 100644 index 0000000..3185fa0 --- /dev/null +++ b/event.html @@ -0,0 +1,24 @@ + + + + + this is demo + + + +
+
+

Mostafa Kamal

+

software engineer

+ +
+
+

Nishi IT Ltd

+
+
+

Daffodil International University

+
+
+ + + diff --git a/eventTarget.html b/eventTarget.html new file mode 100644 index 0000000..a7f88a5 --- /dev/null +++ b/eventTarget.html @@ -0,0 +1,58 @@ + + + + + + + + +
+
+ e.currentTarget means attached el with event +

click any line

+ +

outside content of ul lists

+
+
+ e.target means clicked el inside event el +

click any line

+ +

outside content of ul lists

+
+
+ + + diff --git a/form.html b/form.html new file mode 100644 index 0000000..5781fb8 --- /dev/null +++ b/form.html @@ -0,0 +1,29 @@ + + + + + + + + +
+ + +
+
+ + + +
+

kamal is here ok dear

+ + + diff --git a/js/document/app.js b/js/document/app.js new file mode 100644 index 0000000..096e667 --- /dev/null +++ b/js/document/app.js @@ -0,0 +1,58 @@ +/* document -------------- +var doc = document; +console.log(doc); +--------------------------*/ + +/* document all -------------- +var doc = document.all; +console.log(doc); +--------------------------*/ + + +// var doc = document.characterSet +// console.log(doc); + + +// var doc = document.charset +// console.log(doc); + +// var doc = document.compatMode +// console.log(doc); + + +// var doc = document.contentType +// console.log(doc); + +// var doc = document.doctype +// console.log(doc); + +// var doc = document.domain +// console.log(doc); + +// var doc = document.documentURI +// console.log(doc); + +// var doc = document.documentElement +// console.log(doc); + +// var doc = document.forms +// console.log(doc); + +// var doc = document.head +// console.log(doc); + + +// var doc = document.implementation +// console.log(doc); + +// var doc = document.images +// console.log(doc); + +// var doc = document.scripts +// console.log(doc); + +// var doc = document.title +// console.log(doc); + +// var doc = document.URL +// console.log(doc); diff --git a/js/document/create.js b/js/document/create.js new file mode 100644 index 0000000..317c8f7 --- /dev/null +++ b/js/document/create.js @@ -0,0 +1,13 @@ +// var comment = document.createComment('this is comment'); +// console.log(comment); + +var create = document.createElement('div'); + create.id = 'new-div'; + var content = 'kamal'; + create.classList = 'new-div-class'; + create.textContent = content; + + // console.log(create); + +var test = document.getElementById('profile'); + test.appendChild(create); diff --git a/js/document/getme.js b/js/document/getme.js new file mode 100644 index 0000000..8ce8db2 --- /dev/null +++ b/js/document/getme.js @@ -0,0 +1,9 @@ + +// var kamal = document.getElementById('main'); +// console.log(kamal); + +// var kamal = document.getElementsByClassName('main-area'); +// console.log(kamal); + +var kamal = document.querySelector('#main.main-area'); +console.log(kamal); diff --git a/js/element/app.js b/js/element/app.js new file mode 100644 index 0000000..1d98718 --- /dev/null +++ b/js/element/app.js @@ -0,0 +1,45 @@ + + + // var doc = document.getElementById('bio'); + // var attr = doc.attributes; + // console.log(attr); + + + // var doc = document.getElementById('bio'); + // doc.classList.add('class-add'); + // doc.classList.remove('class-remove'); + // console.log(doc); + + +// var doc = document.getElementById('main'); +// if(doc.className === 'main-area'){ +// console.log('yes, bio class is here'); +// }else{ +// console.log('sorry, no bio class'); +// } + +// var doc = document.getElementById('bio'); +// var newChild = document.createElement('div') +// newChild.id = 'newChild'; +// newChild.classList.add('new-child'); +// newChild.textContent = 'this is new child boss'; +// newChild.style.color = 'red'; +// doc.appendChild(newChild); +// console.log(document.getElementById('newChild')) + +// var doc = document.getElementById('bio'); +// var innerMe = ` +//

welcome here

+//

this is another

+// code4mk +// ` +// doc.style.color = 'red'; +// doc.innerHTML = innerMe; +// console.log(doc); + +doc.addEventListener("mouseenter", (event) => { + // highlight the mouseenter target + event.target.style.color = "purple"; + + // reset the color after a short delay + }, false); diff --git a/js/event/app.js b/js/event/app.js new file mode 100644 index 0000000..00de33f --- /dev/null +++ b/js/event/app.js @@ -0,0 +1,30 @@ +var doc = document.getElementById('btn-me'); + +doc.addEventListener('click', (e) => { + var test = document.getElementById('profile'); + test.style.color = 'green'; +}); + + + + +// doc.addEventListener('mouseenter', (e) => { +// var test = document.getElementById('profile'); +// test.style.color = 'yellow'; +// }); + + + + +// function testme(){} ===> testme = () =>{} + +testme = () =>{ + var test = document.getElementById('profile'); + var mestyle = ` + color: red; + border: 2px solid red; + box-sizing: border-box; + ` + test.style.cssText = mestyle; +} +doc.addEventListener('mouseenter',testme); diff --git a/js/eventTarget/app.js b/js/eventTarget/app.js new file mode 100644 index 0000000..e2c55b0 --- /dev/null +++ b/js/eventTarget/app.js @@ -0,0 +1,13 @@ +// e.currentTarget always mainArea + +mainArea.addEventListener('click', (e) => { + let attachEle = e.currentTarget; + attachEle.classList.toggle('boss'); + console.log(attachEle); +}); +// e.target clicked element inside mainarea +mainAreaTwo.addEventListener('click', (e) => { + let clickTargetEle = e.target; + clickTargetEle.classList.toggle('boss'); + console.log(clickTargetEle); +}); diff --git a/js/form/app.js b/js/form/app.js new file mode 100644 index 0000000..115a199 --- /dev/null +++ b/js/form/app.js @@ -0,0 +1,12 @@ +let form = document.forms; +console.log(form); + +// let form = document.forms.kamal; +// let elem = form.elements.userName; +// console.log(elem.value); + + +// let form = document.forms.kamal; +// let elem = form.elements.mySelect[2]; +// elem.selected = true; +// console.log(elem.value); diff --git a/js/node/app.js b/js/node/app.js new file mode 100644 index 0000000..6fb8d23 --- /dev/null +++ b/js/node/app.js @@ -0,0 +1,45 @@ +// var doc = document.getElementById('main'); +// var doc1 = doc.childNodes; +// console.log(doc1); + +// var doc = document.getElementById('main'); +// var doc1 = doc.childNodes[1].parentNode; +// console.log(doc1); + +// var doc = document.getElementById('main'); +// var doc1 = doc.childNodes[1].parentNode; +// console.log(doc1); + +// var doc = document.getElementById('main'); +// var doc1 = doc.childNodes[1].nextElementSibling; +// console.log(doc1); + +// var doc = document.getElementById('main'); +// var doc1 = doc.childNodes[3].previousElementSibling; +// var doc2 = doc1.cloneNode(true); +// console.log(doc2); + + + +// var docParent = document.getElementById('bio').parentNode +// var doc = document.getElementById('bio') +// var newNode = document.createElement("div"); +// newNode.id = 'before-node'; +// newNode.textContent = 'kamal is here ok before bio'; +// newNode.style.color = 'red'; +// docParent.insertBefore(newNode, doc); +// console.log(document); + +var doc = document.getElementById('bio') +var img1 = new Image(); // HTML5 Constructor +img1.src = 'http://res.cloudinary.com/duzdotcoi/image/upload/c_scale,h_500,w_890/v1522890619/sample.jpg'; +img1.alt = 'alt'; +img1.height = '200'; +img1.width = '200'; +img1.style.borderRadius = '50%'; +doc.appendChild(img1); + + +var doc = document.getElementById('main'); + var doc1 = doc.childNodes[1].isConnected; + console.log(doc1); diff --git a/node.html b/node.html new file mode 100644 index 0000000..d3bc79b --- /dev/null +++ b/node.html @@ -0,0 +1,24 @@ + + + + + this is demo + + + +
+
+

Mostafa Kamal

+

software engineer

+
+
+

Nishi IT Ltd

+
+
+

Daffodil International University

+
+
+ + + +