JSFiddle - React, Tailwind, and code Playground

by sunil puvvada

HTML

<html>
<body>
<div id="users">

  <input id="filterValue" type="text" name="filterValue">
  <button class="sort" onclick="myFunction()">
    Filter
  </button>

    <div id="todo">
        <h2>Todo List</h2>
        <ul id="toDOList">
        </ul>
    </div>
	<div id="completedTask">
        <h2>Completed List</h2>
        <ul id="completedList">
        </ul>
    </div>

</div> 
</body>
</html>

JavaScript

const todos = [
    {
        title: "waterplants",
        user: "A",
        completed: true
    },
    {
        title: "take snoopy out",
        user: "B",
        completed: false
    },
    {
        title: "groceries",
        user: "C",
        completed: false
    },
    {
        title: "phonebill",
        user: "A",
        completed: true

    },
    {
        title: "waterbill",
        user: "A",
        completed: true
    },
    {
        title: "healthinsurance",
        user: "A",
        completed: false
    },
    {
        title: "cooking",
        user: "C",
        completed: true
    },
    {
        title: "Help mom",
        user: "C",
        completed: false
    },
    {
        title: "readjust your wardrobe",
        user: "C",
        completed: false
    },
    {
        title: "laundry",
        user: "B",
        completed: true
    }
];


function populateData(){
	var completedList = document.getElementById("completedList");
	var toDOList = document.getElementById("toDOList");
	todos.forEach(function(element) {
		if(element.completed){
			completedList.insertAdjacentHTML( 'beforeend',"<li>" + element.title + " : " + element.user+ " </li>");
		}
		else {
			toDOList.insertAdjacentHTML( 'beforeend',"<li>" + element.title + " : " + element.user+ " </li>");
		}
	});
}
populateData();

var inputValue = document.getElementById("filterValue");
function myFunction() {
  if(inputValue.value){  
	  const foundData = todos.filter(d => d.user == inputValue.value);
	  var completedList = document.getElementById('completedList');
	  completedList.innerHTML = '';
	  var toDOList = document.getElementById('toDOList');
	  toDOList.innerHTML = '';
	  var completedList = document.getElementById("completedList");
	  var toDOList = document.getElementById("toDOList");
	  foundData.forEach(function(element) {
			if(element.completed){
				completedList.insertAdjacentHTML( 'beforeend',"<li>" + element.title + " : " + element.user+ "...