----------------
<!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>
<div class="container">
<h1 id="heading" class="A B C">Playing with DOM - 2020</h1>
<div class="class" id="green">class1</div>
<ul class="this">
<li class="list">this</li>
<li class="list">is</li>
<li class="list">my</li>
<li class="list">dream</li>
</ul>
<div class="class" id="white">class2</div>
<div class="class" id="red">class3</div>
<div class="class" id="blue">class4</div>
</div>
<form action="noaction.php">
<input type="text" name="input" id="input1" />
<input type="SUBMIT" id="btn" value="Submit" />
<!-- <button id="btn">Submit</button> -->
<br />
<a href="//google.com">Google</a> <br />
<a href="//facebook.com">Fb</a><br />
<a href="//codewithharry.com">CWH</a><br />
<a href="//gmail.com">Gmaail</a><br />
</form>
<script src="index.js"></script>
</body>
</html>
index.js :
----------
// creating elemnt and adding text
let firstClass = document.getElementById("green");
let heading = document.getElementById("heading");
let container = document.querySelector(".container");
// console.log("query selctr ",container);
// let container1 = document.getElementsByClassName("container");
let divElem = document.createElement("div");
let val = localStorage.getItem("text");
let text;
console.log(val);
if (val == null) {
text = document.createTextNode("this element is added by java script");
} else {
text = document.createTextNode(val);
}
divElem.appendChild(text);
divElem.setAttribute("id", "elem");
divElem.setAttribute(
"style",
"border:2px solid black; width:154px; margin:34px; padding:23px;"
);
// insering elment in our website brfore element with id green
container.insertBefore(divElem, firstClass);
// add event listner to the divElem
divElem.addEventListener("click", function () {
let numOfTextArea = document.getElementsByClassName("textarea").length;
if (numOfTextArea == 0) {
let html = elem.innerHTML;
divElem.innerHTML = `<textarea class="textarea" id="textarea" row="3">${html}</textarea>`;
}
let textArea = document.getElementById("textarea");
textArea.addEventListener("blur", function () {
elem.innerHTML = textArea.value;
localStorage.setItem("text", elem.innerHTML);
});
});
0 Comments