JSFiddle - React, Tailwind, and code Playground

by sridhar reddy

HTML

<div class="main">
    <h2>JavaScript CRUD Bookmark</h2>
    <form>
        <input type="text" placeholder="search">
    </form>
    <ul>

    </ul>
    <div>
        <input class="add-text" type="text" placeholder="Add Text">
        <button id="add">Add</button>
        <button id="update">update</button>
    </div>
</div>

CSS

.main {
    position: relative;
    margin: 0 auto;
    width: 500px;
    height: 600px;
    padding-top: 50px;
    background: #f1efef;
    }

h2 {
  position: absolute;
  top: 0;
  left: 18%;
  color: navy;
}

form {
  position: relative;
  width: 80%;
  height: 5vh;
  left: 10%;
  margin-top: 20px;
}

input {
  position: absolute;
  width: 100%;
  height: 100%;
  font-size: 19px;
}

ul {
  position: relative;
  width: 80%;
  left: 10%;
  height: 350px;
  border: 1px solid #e1dfdf;
  padding: 0;
  margin-top: 20px;
  overflow-y: scroll;
  overflow-x: hidden;
  box-sizing: content-box;
  list-style: none;
}

li {
  position: relative;
  width: 100%;
  height: 6vh;
  margin-bottom: 20px;
  background: #eaeaea;
  border-left: 2px solid blue;
  box-sizing: border-box;
  color: white;
}

li h1 {
  position: relative;
  font-size: 20px;
  color: navy;
  float: left;
  width: 60%;
  height: 5vh;
  top: -5px;
  margin-left: 10px;
  left: 0;
}

li button {
  position: relative;
  outline: none;
  border: none;
  font-size: 15px;
  padding: 0 6px;
  top: 1vh;
  height: 4vh;
  background: blue;
  float: right;
  margin: 0 5px;
  color: white;
  cursor: pointer;
  display: block;
}

div div {
  position: absolute;
  bottom: 60px;
  width: 100%;
  height: auto;
}

div div input {
  position: relative;
  left: 10%;
  width: 80%;
  height: 5vh;
  margin-bottom: 20px;
  display: block;
}

div div button {
  position: relative;
  left: 8%;
  width: 40%;
  height: 5vh;
  margin: 0 5px;
  outline: none;
  border: none;
  display: inline-block;
  background: blue;
  color: white;
  cursor: pointer;
}

JavaScript

const search = document.querySelector('form input');
    const input = document.querySelector('.add-text');
    const container = document.querySelector('ul');
    let currentItem = null;
    let array = [];

    const searchItems = function (e) {
        const items = container.children || container.childNodes;

        if (items && items.length) {
            let word = e.target.value.toLowerCase();
            for (let item of items) {
                if (item.firstChild.textContent.toLowerCase().indexOf(word) !== -1) {
                    item.style.display = 'block';
                } else {
                    item.style.display = 'none';
                }
            }
        }
    }

    const deleteItem = function (e) {
        const index = e.parentNode.dataset.index;
        array.splice(parseInt(index, 10), 1);
        storeArray(array);
        loaddata();
    }

    const editItem = function (e) {
        currentItem = e.parentNode;
        input.value = currentItem.firstElementChild.textContent;
    }

    const updateItem = function (e) {
        if (currentItem) {
            const index = currentItem.dataset.index;
            array.splice(parseInt(index, 10), 1);
            currentItem.firstElementChild.textContent = input.value;
            array.splice(index, 0, input.value);
            input.value = '';
            storeArray(array)
            loaddata()
        } else {
            alert('No Selected Text Here to Update');
            return;
        }
    }

    const storeArray = (arr) => {
        let stringified = JSON.stringify(array);
        localStorage.setItem('list', stringified);
    }

    const constructItem = (index, item) => {
        let li = document.createElement('li');
        li.dataset.index = index;
        let inner = '<h1 class="text">' + item + '</h1>';
        inner += '<button class="delete" onclick="deleteItem(this)">Delete</button>';
        inner += '<button class="edit"...