Computer >> कंप्यूटर >  >> प्रोग्रामिंग >> Javascript

जावास्क्रिप्ट के साथ एक टू-डू सूची बनाएं

<घंटा/>

उदाहरण

कार्य सूची बनाने के लिए निम्नलिखित कोड है -

<!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>
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<body>
   <input type="text" placeholder="Please Enter your Task Here.." id="txtData">
   <button onclick="todoList()">AddTaskToDo</button>
   <ul id="to_do_list">
   </ul>
</body>
<script>
   function todoList() {
      const myTask = document.getElementById('txtData');
      const addToDoList = document.getElementById('to_do_list');
      let originalValue = `<li> ${myTask.value} </li>`;
      myTask.value = '';
      addToDoList.insertAdjacentHTML('beforeend', originalValue);
   }
</script>
</html>

उपरोक्त प्रोग्राम को चलाने के लिए, फ़ाइल नाम "anyName.html(index.html)" को सेव करें। फ़ाइल पर राइट क्लिक करें और VSCode संपादक में "लाइव सर्वर के साथ खोलें" विकल्प चुनें -

यह निम्नलिखित आउटपुट देगा -

जावास्क्रिप्ट के साथ एक टू-डू सूची बनाएं

अब यहाँ, मैं पहला कार्य दर्ज करने जा रहा हूँ।

जावास्क्रिप्ट के साथ एक टू-डू सूची बनाएं

पहला कार्य दर्ज करने के बाद, बटन पर क्लिक करें।

आउटपुट

यह कंसोल पर निम्न आउटपुट उत्पन्न करेगा -

जावास्क्रिप्ट के साथ एक टू-डू सूची बनाएं

फिर से, मैं एक और कार्य में प्रवेश कर रहा हूँ।

जावास्क्रिप्ट के साथ एक टू-डू सूची बनाएं

बटन पर क्लिक करने के बाद, आपको निम्न आउटपुट मिलेगा -

जावास्क्रिप्ट के साथ एक टू-डू सूची बनाएं


  1. जावास्क्रिप्ट के साथ आंतरिक HTML सेट करें

    आंतरिक HTML सेट करने के लिए सही सिंटैक्स इस प्रकार है - document.getElementById(“yourIdName”).innerHTML=”yourValue”; आइए अब देखें कि आंतरिक HTML कैसे सेट करें - उदाहरण <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8">

  1. जावास्क्रिप्ट - HTML बटन पर क्लिक करने पर अलर्ट बनाएं

    एक बटन के क्लिक पर अलर्ट सक्रिय करने के लिए, addEventListener() का उपयोग करें। मान लें कि HTML वेब पेज पर हमारा बटन निम्नलिखित है - <button type="button">Please Press Me</button> उदाहरण निम्नलिखित कोड है - <!DOCTYPE html> <html lang="en"> <head> &nb

  1. कैसे सीएसएस और जावास्क्रिप्ट के साथ एक सूची ग्रिड दृश्य बनाने के लिए?

    सूची ग्रिड दृश्य बनाने के लिए, कोड इस प्रकार है - उदाहरण <!DOCTYPE html> <html> <head> <style>    * {       box-sizing: border-box;    }    body {       font-family: "Segoe UI", Tahoma, Geneva, Verdana, san