D3 Examples - List that filters HTML UI

xxxxxxxxxx
 
<!DOCTYPE html>
<html lang="en">
​
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Filter List</title>
    <style>
        .header {
            background: #ddd;
            margin-bottom: 4.8rem;
            padding: 1.6rem 0;
            color: white;
        }
        .header__title {
            font-size: 3.2rem;
            margin: 0;
        }
​
        .header__subtitle {
            color: white;
            font-size: 1.6rem;
            font-weight: 500;
            margin: 0;
        }
        * {
            box-sizing: border-box;
        }
        .container {
            max-width: 60rem;
            margin: 0 auto;
            padding: 0 1rem;
        }
        input {
            width:100%;
            font-size: 16px; /* Increase font-size */
            border: 1px solid #ddd; /* Add a grey border */
            margin-bottom: 12px; /* Add some space below the input */
            padding: 12px 20px 12px 10px; /* Add some padding */
​
        }
        #myInput{
            background-image: url('https://www.w3schools.com/css/searchicon.png'); /* Add a search icon to input */
            background-position: 10px 12px; /* Position the search icon */
            background-repeat: no-repeat; /* Do not repeat the icon image */
            padding: 12px 20px 12px 40px; /* Add some padding */
​
        }
​
        #myUL {
            /* Remove default list styling */
            list-style-type: none;
            padding: 0;
            margin: 0;
        }
        #addInput{
            width:93.2%;
        }
        @media(max-width:965px){
            button{
                width:100%;
            }
            #addInput{
                width:100%;
            }
        }
        button{
            background: #0982ec;
            color: white;
            padding:13px 5px 13px 5px;
            font-size: 15px;
            cursor: pointer;
            outline: none;
            border: none;
        }
        #myUL li {
            border: 1px solid #ddd;
            margin-top: -1px;
            /* Prevent double borders */
            background-color: #fff;
            padding: 12px;
            text-decoration: none;
            font-size: 18px;
            color: black;
            display: flex;
            justify-content: space-between;
            display: block
        }
        .remove {
            float:right;
            color:dodgerblue;
            text-decoration: underline;
            cursor: pointer;
        }
        .remove:hover{
            color:blue;
        }
        #myUL li:nth-child(odd) {
            background-color: #f6f6f6;
        }
​
        #myUL li:hover {
            background-color: #eee;
        }
    </style>
</head>
​
<body>
    <div class="container">
        <h1>Filter List</h1>
        <input type="text" id="myInput" onkeyup="filter()" placeholder="Search for items..">
        <form id="noSub">
            <input type="text" id="addInput" placeholder="Add Item" name="psw">
            <button>Submit</button>
        </form>
        <br>
        <ul id="myUL">
​
        </ul>
    </div>
​
</body>
<script>
    if (localStorage.getItem("filter-list") == null) {
        var flt = []
        var ft = JSON.stringify(flt)
        localStorage.setItem("filter-list", ft)
        var items = []
    } else {
        var items = JSON.parse(localStorage.getItem("filter-list"))
        for (let i = 0; i < items.length; i++) {
            var item = items[i];
            var element = document.createElement("li");
            var span = document.createElement("span")
            var spanRemove = document.createElement("span")
            spanRemove.innerHTML = "Remove"
            spanRemove.className = "remove"
            spanRemove.onclick = function (evt) {
                document.getElementById("myUL").removeChild(evt.target.parentElement)
                var index = items.indexOf(evt.target.parentElement.childNodes[0].innerHTML)
                items.splice(index, 1)
                localStorage.setItem("filter-list", JSON.stringify(items))
​
            }
            span.innerHTML = item
            element.appendChild(span)
            element.appendChild(spanRemove)
            document.getElementById("myUL").appendChild(element)
        }
    }
    document.getElementById("noSub").addEventListener("submit", (evt) => {
        evt.preventDefault()
        var item = document.getElementById("addInput").value;
        var element = document.createElement("li");
        var span = document.createElement("span")
        var spanRemove = document.createElement("span")
        spanRemove.innerHTML = "Remove"
        spanRemove.className = "remove"
        spanRemove.onclick = function (evt) {
            document.getElementById("myUL").removeChild(evt.target.parentElement)
            var index = items.indexOf(evt.target.parentElement.childNodes[0].innerHTML)
            items.splice(index, 1)
            localStorage.setItem("filter-list", JSON.stringify(items))
        }
        if (item.trim() && items.includes(item) == false) {
            span.innerHTML = item
            element.appendChild(span)
            element.appendChild(spanRemove)
            document.getElementById("myUL").appendChild(element)
            items.push(item)
            localStorage.setItem("filter-list", JSON.stringify(items))
            var item = document.getElementById("addInput").value = "";
        } else {
            alert("Enter valid value")
        }
    })
​
    function removeItem() {
​
    }
​
    function filter() {
        var filterinp = document.querySelector("#myInput");
        var filt = filterinp.value.toUpperCase();
        var ul = document.querySelector("#myUL");
        var li = ul.getElementsByTagName("li");
        for (var i = 0; i < li.length; i++) {
            var value = li[i].innerHTML;
            if (value.toUpperCase().indexOf(filt) > -1) {
                li[i].style.display = "";
            } else {
                li[i].style.display = "none";
            }
​
        }
    }
</script>
​
</html>
    