Creating Editable Div Using JavaScript: Exercise 2 | JavaScript Tutorial In Hindi #21

This video is a part of my JavaScript In Hindi Course. JavaScript is a high-level, interpreted programming language that conforms to the ECMAScript specification. JavaScript has dynamic typing, prototype-based object-orientation, and first-class functions.

Alongside HTML and CSS, JavaScript is one of the best and most demanded technologies of the World Wide Web. JavaScript enables interactive web pages and is a crucial part of web applications. The vast majority of sites use it, and major web browsers have a dedicated JavaScript engine in order to execute it.

As a multi-paradigm language, it supports event-driven, functional, and imperative programming fashion. It has APIs for dealing with text, arrays, regular expressions, and the DOM, but the language itself does not include any I/O, such as networking, storage, or graphics facilities. It relies upon the host machine environment in which it is embedded to provide these features.

Best Hindi Videos For Learning Programming:

Follow Me On Social Media

[subhraprakashmohanty]

//I add a new highLighting text feature on the text.
// Creating a new Div element
let div =
div.setAttribute("id", "edit")
div.innerText = "Double Click on me to Edit";

// It will increase the text size when mouseover on it.
div.addEventListener('mouseover', function(){
div.style.fontSize = '150%'
})

// Appending the element to the body


// Creating the editable element
//Whenever someone double click on the text it will turn to editable.
let inpt =
inpt.setAttribute("value", "")
document.getElementById('edit').addEventListener('dblclick', function(){
div.replaceWith(inpt)
});

// Click outside to save the text into local storage as (Edited) name.
inpt.addEventListener('blur', function(){
localStorage.setItem('Edited', JSON.stringify(inpt.value))
})

[rohittewari]

Easiest solution to make div element editable and save the inner text inside local storage:

// Creating the header and injecting it into body
const body = document.body;
const heading =
heading.innerText = "Welcome to CodeWithHarry";
body.append(heading);

// Creating div and injecting into body
const div =
div.innerText = "This is an editable div";
div.id = "edit";
body.append(div);

// Whenever user Clicks on the div
document.getElementById("edit").addEventListener("click", () => {
div.contentEditable = "true"; // It will make the content inside the div editable
});

// Whenever user Clicks away from the div, save the content inside local storage
document.getElementById("edit").addEventListener("blur", () => {
localStorage.setItem("editable-div", // Saving the content inside local storage
});

[shafiimam]

this is my solution to this problem and i think it is more dynamic

let body =
let div =
let input =
let parra = document.createElement('p');

div.className = 'new_div';

input.className = 'new_input';
input.placeholder = 'enter a value';
input.value = 'enter something';

parra.className = 'parra';
parra.innerText = 'enter something';

input.style.display = 'none';

body.appendChild(div);




parra.addEventListener('click', () => {

parra.style.display = 'none';
input.style.display = 'block';

});

input.addEventListener('blur', () => {

input.style.display = 'none';
parra.style.display = 'block';
parra.innerText = input.value;
if (parra.innerText.length == 0) {
parra.innerText = 'enter something new';
localStorage.setItem('input', 'no value enterd');
} else {
localStorage.setItem('input', input.value);
}


});

[nehaparmar]

Firstly i created (in body)
<div id="edit">Double Click To enter the Text</div>

Then in JavaScript,
let
console.log(edit);

edit.addEventListener('dblclick', func1);
//when user double clicks on the text
function func1(){
let i
i.id="inputid";
i.type="text";

i.innerText="";
edit.appendChild(i);

let
u.addEventListener('click', func2);
// when user clicks on The entered value
function func2(){
let getval=u.value;
localStorage.setItem('Data Entered', getval);
}

}

[pawansingh-xoiz]

document.querySelector('.container').addEventListener('click', function(e) {
= "true";

})

* here I used 'para' as the id of a paragraph in div*

[sayedhussain]

Thank you sir for the wonderful tutorials ... 👍👍👍

[gvpranktv]

<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>JS TUTSs</title>

</head>
<body>
<h1 id="id1">This is heading</h1>
<div id="div1" style="outline: none">
This is the statement inside the div
</div>
<script>
edit=
edit.addEventListener('click', editthis);
function editthis(event) {
edit.contentEditable="true";
}
let overhere=
overhere.addEventListener("blur", overfunc);

function overfunc(){

console.log(saveToLocal);
localStorage.setItem('Value', `${saveToLocal}`)
}
</script>
</body>
</html>

[sumansaha]

1st comment or like maine kiya harry bhai ak dil to banta hai

[kayakalpbokaro]

// solution


//Creating an element
let element =
let eleTextNode= document.createTextNode('The user can happily edit this which will get saved in the local storage');
element.setAttribute('id', 'editableDiv');
element.setAttribute('contenteditable', 'true');

element.style.border = '2px solid black'



//Injecting it inside a parent

let parent =
parent.appendChild(element);

console.log(parent);
console.log(element);



//Storing the user edited value in the local storage
element.addEventListener('blur', function blur() {
eleValue = element.innerText;
localStorage.setItem('userText', eleValue);
});

[kiranchodavadiya]

// Part-1 :You Have to create a div and enter into the page.

let createElem =
createElem.id = 'createElem';
createElem.innerText = 'Submit Text To Local Storage By Clicking on Text : ';




// Part-2 :Whenever someone clicks on the div, it should be converted into an editable item.

let getText =
console.log(getText);
getText = addEventListener('dblclick', func1);

function func1(){
let createinputElem =
createinputElem.id = 'createinputElem';
createinputElem.type = 'text';
createinputElem.innerText = '';

};

// Part-3 :and whenever user clicks away(blur). save the note into the local storage.

let getTextvalue =
getTextvalue = addEventListener('click', func2);

function func2(){
let getValueof = createinputElem.value;
localStorage.setItem('DataEntered', getValueof);
};

[swatibhagat]

//Created the element Div
let createdDiv =
createdDiv.className = 'task';
createdDiv.id="task";
createdDiv.setAttribute('title', 'Will change it.');
from the JS.`;
//Inserted element on the DOM on specific location. This can be done by append. here i have done with the insertBefore.
let getposition =
getposition[0].parentNode.insertBefore(createdDiv,

//Get the inserted element
let getInsertedDiv =
getInsertedDiv.addEventListener('click', function(){
let creatInputFiled =

creatInputFiled.setAttribute('name', 'InsertedFromJs');
creatInputFiled.setAttribute('placeholder', 'insert for local storage');

creatInputFiled.addEventListener('keyup', function(){
localStorage.setItem('input value', creatInputFiled.value);
});
});

[amanshah]

Concise Solution:
let div =
div.innerText="i am an editable div";
div.setAttribute('contentEditable', 'true');


console.log(div);

div.addEventListener('blur', func1);
function func1() {
localStorage.clear();
localStorage.setItem('div', `${div.innerText}`)
}

[gksmca]

let div =
div.innerText = 'Hello, This is Headlines'
div.setAttribute("id", "editDiv");
div.setAttribute("contenteditable", "true");
document.body.insertBefore(div, DomManipulate);

document.getElementById('editDiv').addEventListener("input", function() {
localStorage.setItem("Content", div.innerText);
});

[omamu]

It can be done by 2 types.
Crating direct div at html file
And
Create let at java and do further process

[AshTech_]

// Firstly you create a div
//And the write js code here
let body = document.body
body.addEventListener("click", ()=>{
let div =
localStorage.setItem("our", div.innerHTML)
})

show=()=>{
let div =
div.innerHTML = localStorage.getItem("our")

}

if
show()
}
// END CODE 😊

[harshitgupta]

sir mujhse nhi bna. fir mene comment me solution dekh liya

[Raj-jzfc]

bhai ese ese project ache hai socha hi nhi tha bro maina thanku bhaiya

[sumansaha]

node.js ke uppar ek video series banao please harry

[skynetwork]

Bhaiya data structure ki serise v banana plzzz

[Blackfeather]

* USING CONTENTEDITABLE*.







// Creating div
let divElem =
divElem.setAttribute('id', 'elem');
divElem.setAttribute('style', 'border:2px solid black; width: 154px; margin: 34px; padding:23px;');
// divElem.setAttribute('contenteditable', 'true');


// Appending text to created div
let val =
let tnode
if(val == null){
tnode = document.createTextNode('This is an editable div');
}
else{
tnode = document.createTextNode(val)
}

// Grabbing the main components and positioning div on the page
let container =
let first =
divElem.appendChild(tnode);
container.insertBefore(divElem, first);

// Adding event listeners to divElem
divElem.addEventListener('click', function(){
divElem.setAttribute('contenteditable', 'true');


divElem.addEventListener('blur', function(){
let value = elem.innerHTML;
localStorage.setItem('tnode', value);
})
})