index.gtlm

<!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>Document</title>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>

<body>

    <div class="container mt-5 mb-5">
        <div class="jumbotron">
            <h1 class="display-4">C.R.U.D Without Database Just Single File HTML !</h1>
            <p class="lead">This is a Crud demo whithout database sql or no sql, just using single file html and some
                javascript code.</p>
            <hr class="my-4">
            <p>Created by <a href="http://facebook.com/fachry.ansyah/10">fahriansyah</a>.</p>
            <button class="btn btn-primary" data-toggle="modal" data-target="#modalAdd">Add Todo</button>
        </div>


        <div class="row">
            <div class="col-md-12 col-12 mt-4">
                <table class="table table-striped table-hover">
                    <thead class="thead-dark">
                        <tr>
                            <th scope="col">#</th>
                            <th scope="col">Name</th>
                            <th scope="col">Description</th>
                            <th scope="col">Action</th>
                        </tr>
                    </thead>
                    <tbody id="list">

                    </tbody>
                </table>
            </div>
        </div>
    </div>

    <!-- Modal Add Data -->
    <div class="modal fade" id="modalAdd" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel"
        aria-hidden="true">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="exampleModalLabel">Add Todo</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body">
                    <form id="formAdd">
                        <div class="form-group">
                            <label>Name</label>
                            <input id="txtAddName" type="text" class="form-control form-control-sm">
                        </div>
                        <div class="form-group">
                            <label>Description</label>
                            <textarea id="txtAddDescription" cols="4" rows="4"
                                class="form-control form-control-sm"></textarea>
                        </div>
                    </form>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
                    <button type="button" class="btn btn-info" onclick="onSave()">Save changes</button>
                </div>
            </div>
        </div>
    </div>

    <!-- Modal Update Data -->
    <div class="modal fade" id="modalUpdate" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel"
        aria-hidden="true">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="exampleModalLabel">Update Todo</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body">
                    <form id="formUpdate">
                        <div class="form-group">
                            <label>Name</label>
                            <input id="txtUpdateName" type="text" class="form-control form-control-sm">
                        </div>
                        <div class="form-group">
                            <label>Description</label>
                            <textarea id="txtUpdateDescription" cols="4" rows="4"
                                class="form-control form-control-sm"></textarea>
                        </div>
                    </form>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
                    <button id="btnUpdate" type="button" class="btn btn-info" onclick="onUpdate()" data-key="">Save changes</button>
                </div>
            </div>
        </div>
    </div>

    <!-- Modal Remove Todo  -->
    <div class="modal fade" id="modalRemove" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel"
        aria-hidden="true">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="exampleModalLabel">Remove Todo</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body">
                    <h4>Are you sure want to remove this todo ?</h4>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
                    <button id="btnRemove" type="button" class="btn btn-outline-danger" onclick="onRemove()" data-key="">Yes, do it!</button>
                </div>
            </div>
        </div>
    </div>

</body>

<script>
    let database = {
        tableTodo: []
    }

    const addTodo = ({ name, description }) => {
        database.tableTodo.push({ name, description })
    }

    const getTodo = () => {
        const todoList = document.getElementById('list')
        todoList.innerHTML = ''

        database.tableTodo.map((item, key) => {
            todoList.insertAdjacentHTML('beforeend', `
                <tr>
                    <th scope="row">${key + 1}</th>
                    <td>${item.name}</td>
                    <td>${item.description}</td>
                    <td>
                        <button class="btn btn-outline-danger btn-sm" onclick="onShowModalRemove(${key})">REMOVE</button>
                        <button class="btn btn-primary btn-sm" onclick="onShowModalUpdate(${key})">UPDATE</button>
                    </td>
                </tr>
            `)
        })

    }

    const updateTodo = (key, {name, description}) => {
        database.tableTodo[key].name = name
        database.tableTodo[key].description = description
    }

    const removeTodo = (key) => {
        database.tableTodo.splice(key, 1);
    }

    /*
        EVENT LISTENER
        call some function when DOM event called
    */
    const onSave = () => {
        const name = document.getElementById('txtAddName').value
        const description = document.getElementById('txtAddDescription').value

        addTodo({ name, description })
        getTodo()

        document.getElementById('formAdd').reset()
        $('#modalAdd').modal('hide')
    }

    const onShowModalRemove = (key) => {
        const data = database.tableTodo[key]
        const buttonRemove = document.getElementById('btnRemove')
        buttonRemove.setAttribute('data-key', key)
        $('#modalRemove').modal('show')
    }

    const onRemove = () => {
        const buttonRemove = document.getElementById('btnRemove')
        const key = buttonRemove.getAttribute('data-key')
        removeTodo(key)
        $('#modalRemove').modal('hide')
        getTodo()
    }

    const onShowModalUpdate = (key) => {
        const data = database.tableTodo[key]
        document.getElementById('txtUpdateName').value = data.name
        document.getElementById('txtUpdateDescription').value = data.description
        const buttonUpdate = document.getElementById('btnUpdate')
        buttonUpdate.setAttribute('data-key', key)
        $('#modalUpdate').modal('show')
    }

    const onUpdate = () => {
        const buttonUpdate = document.getElementById('btnUpdate')
        const key = buttonUpdate.getAttribute('data-key')
        const name = document.getElementById('txtUpdateName').value
        const description = document.getElementById('txtUpdateDescription').value

        updateTodo(key, {
            name,
            description
        })

        $('#modalUpdate').modal('hide')

        getTodo()
    }

</script>

</html>