TO DO LIST कैसे बनाये Using Javascript | How to Create TO DO LIST | Javascript Mini Project

नमस्कार आपका Technovichar में स्वागत है। इस Article का Topic है TO DO LIST कैसे बनाये Using Javascript | How to Create TO DO LIST | Javascript Mini Project। तो चलिए जानते है की TO DO LIST kaise Create करे .....

Javascript_se_TO_DO_LIST_Kaise_banaye_in_Hindi_Javascript_Mini_Project


Page Content


HTML FILE (File Name -> index.html)

CSS FILE ( File Name -> style.css )

Javascript FILE ( File Name -> index.js )

Conclusion



HTML FILE (File Name -> index.html)



<!DOCTYPE html>
<html lang="en">
<head> <meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Javascript To DO List</title>
<link rel="stylesheet" href="style.css"> </head>
<body>
<div class="container">
<h1 style="color: white;text-align: center;text-transform: uppercase;">Javascript TO DO LIST</h1>
<input type="text" id="textinput">
<button id="Addbutton">ADD</button>
<button id="clearAll">Clear</button>
<div id="maincontainer">
</div>
</div>
<script src="index.js"></script>
</body>
</html>


CSS FILE ( File Name -> style.css )




.container{
width:400px;
background-color: black;
border-radius: 30px;;
height:auto;

padding:20px 20px;
margin:30px auto; }
#textinput{
width:100%;
outline:none;
border:2px solid blueviolet;
border-radius: 10px;
height:50px;
font-size: 20px;
padding-left: 10px;
font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;

}
#Addbutton{
margin-top: 10px;
width:100%;
font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
background-color: blueviolet;
color:white;
font-size: 40px;;
outline:none;
transition: 0.5s; }
#clearAll{
margin-top: 10px;
width:100%;
font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
background-color: blueviolet;
color:white;
font-size: 40px;
outline:none;
transition: 0.5s; }
#Addbutton:hover{
background-color: white;

color:black;
cursor: pointer; }
#clearAll:hover{
background-color: white;
color:black;
cursor: pointer; }
.mypara{ color:white;
font-size: 20px;
font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
text-align: center; }
#mybutton{
width:100%;
background-color: red;
outline:none;
color:white;
border-radius: 20px; font-size: 20px;
font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
margin:auto; }
#editlist{
width:100%;;
background-color: red;
outline:none;
color:white;
border-radius: 20px;; font-size: 20px;;
font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
margin:auto;
margin-top:10px; }


Javascript FILE ( File Name -> index.js )




let input = document.getElementById("textinput");
let Addbutton = document.getElementById("Addbutton");
let maincontainer = document.getElementById("maincontainer");

let clearAll = document.getElementById("clearAll");
Addbutton.addEventListener('click',function(){
let paragraph = document.createElement('p');
let mybutton = document.createElement('button');
let edit = document.createElement('button');
let hr = document.createElement('HR');
paragraph.classList.add('mypara');
mybutton.setAttribute('id','mybutton');
edit.setAttribute('id','editlist');
paragraph.innerText=input.value;
mybutton.innerText="Delete";
edit.innerText="Edit";
maincontainer.appendChild(paragraph);
maincontainer.appendChild(mybutton);
maincontainer.appendChild(edit);
maincontainer.appendChild(hr);
mybutton.addEventListener('click',function(){ maincontainer.removeChild(paragraph);
maincontainer.removeChild(mybutton);
maincontainer.removeChild(edit);
maincontainer.removeChild(hr); })
edit.addEventListener('click',function(){ let editvalue = prompt("Enter Value Here");
paragraph.innerHTML = editvalue; }) })
clearAll.addEventListener('click',function(){
maincontainer.innerHTML=" ";
input.innerHTML=" "; })



Demo :





Conclusion


हमें उम्मीद है की आपको आज का हमारा यह यानी TO DO LIST कैसे बनाये Using Javascript | How to Create TO DO LIST | Javascript Mini Project पूरी तरह से समज में आया होगा और मुझे यकीन है की आपको इस Article को पढ़कर काफी जानकारी भी मिली होगी.



यदि आपको हमारा यह लेख TO DO LIST कैसे बनाये Using Javascript | How to Create TO DO LIST | Javascript Mini Project पसंद आया है तो आप इसे अपने दोस्तों और अपने सोशल मीडिया पर शेयर जरुर करे. जिससे वह लोग भी इस जानकारी का फायदा उठा सके और यह जान सके. 



मुझे यकीन है की अब तक आपने यह TO DO LIST कैसे बनाये Using Javascript | How to Create TO DO LIST | Javascript Mini Project शेयर भी कर दिया होगा. हमारी हंमेशा से ही यह कोशिश रहती है की हम हमारे Readers को एकदम सही और सटीक जानकरी प्रदान करे. ताकि आप लोगो को  इन्टरनेट पर कही और जा कर Search करने की जरुरत न पड़े और आपका समय भी बच सके.



अगर अभी भी आपके मन में TO DO LIST कैसे बनाये Using Javascript | How to Create TO DO LIST | Javascript Mini Project इसके बारे में कोई सवाल या डाउट है तो आप हमें कमेंट बॉक्स में जरुर बताये. हम आपको जानकारी देने की पूरी कोशिश करेंगे ।

Post a Comment

0 Comments