সিএসএস এবং জাভাস্ক্রিপ্ট দিয়ে টু-ডু লিস্ট তৈরি করা

সিএসএস এবং জাভাস্ক্রিপ্ট ব্যবহার করে একটি টু-ডু লিস্ট তৈরি করার কোড নিচে দেওয়া হলো −

উদাহরণ

<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1" /> <style>    html {       font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;    }    body {       max-width: 500px;       margin: 10px auto;    }    .todoInput {       margin-top: 10px;       padding: 10px;       width: 500px;       height: 60px;       font-size: 40px;       border: 2px solid black;       color: purple;    }    li {       text-align: left;       font-size: 22px;       list-style: none;       border: 1px solid rgb(212, 212, 212);       padding: 5px;       margin-bottom: 10px;    }    li:hover {       color: red;    } </style> </head> <body> <div style="border: 1px solid black;"> <h1 style="text-align: center;color: red;">টু-ডু লিস্ট উদাহরণ</h1> <input class="todoInput" placeholder="কিছু যোগ করুন" /> <ul id="list"></ul> </div> <script>    function addItem() {       var todoItem = document.querySelector(".todoInput").value;       var ul = document.getElementById("list");       var li = document.createElement("li");       li.appendChild(document.createTextNode("- " + todoItem));       ul.appendChild(li);       todoItem = "";       li.onclick = deleteItem;    }    document.body.onkeyup = function(ele) {       if (ele.keyCode == 13) {          addItem();       }    };    function deleteItem(ele) {       ele.target.parentElement.removeChild(ele.target);    } </script> </body> </html>

আউটপুট

উপরের কোড নিচের আউটপুট দেবে −

এন্টার চাপিয়ে লিস্টে কিছু যোগ করলে −