DEV Community

loading...

Javascript CRUD Small Project

nikhilroy2 profile image Nikhil Chandra Roy ・3 min read

Today we are going to do a small javascript crud project.

CRUD stand for CREATE READ UPDATE DELETE
so, in our small project we will do first, create, read, update and delete.

we will use html,css, javascript and bootstrap for css frameworks.

First,

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.3/css/bootstrap.min.css'/>
</head>
<body>

</body>
</html>

Enter fullscreen mode Exit fullscreen mode

and now we are going to make HTML bootstrap structure first.

paste inside the body,

 <div class="container p-5">
        <div class="form-group">
          <input type="text" class="form-control" name="" id="typeText" aria-describedby="helpId" placeholder="Enter website name">
        </div>

        <table class="table shadow-sm rounded-lg table-borderless ">
            <tbody>
                <tr>
                    <td><span class="text">trickbd.com</span> <span class="update float-right btn btn-primary badge mx-2">Update</span> <span class="delete float-right btn btn-primary badge mx-2">delete</span> </td>
                </tr>
            </tbody>
        </table>
    </div>



Enter fullscreen mode Exit fullscreen mode

**our html,css work done. Now we are going to use javascript to create table row.

Create

create script tag below the body and paste there,

const $ = nikhil=> document.querySelector(nikhil);
        $('#typeText').onkeypress = textPress;


        function textPress(){
            if(event.key==='Enter'){
                let self_value = this.value
                console.log(self_value)
            }
        }

Enter fullscreen mode Exit fullscreen mode

this script will show you the current value inside the console when you hit enter.
So, we will use the same way to update the dom when we hit enter.

Be sure to remove the tr tag in tbody cause we will apply every tr from javascript.

const $ = nikhil=> document.querySelector(nikhil);
        $('#typeText').onkeypress = textPress;

        let data_row = 0;
        function textPress(){
            if(event.key==='Enter'){
                data_row++;
                let self_value = this.value
                $('tbody').innerHTML += 
                `
                <tr data-row="${data_row}">
                    <td><span class="text">${self_value}</span> <span  class="update float-right btn btn-primary badge mx-2">Update</span> <span class="delete float-right btn btn-primary badge mx-2">delete</span> </td>
                </tr>
                `
            }
        }
Enter fullscreen mode Exit fullscreen mode

now, replace the above script.
you can see how it will create a new tr.
** We can also remove the input value by doing this.value = ''; below the textPress function.
So, our Create is done out of CRUD.

Read ----- you can read each value, right?

Update

now, we are going to update each tr
so, for this we will write new code and improve our existing code.

const $ = nikhil => document.querySelector(nikhil);
        $('#typeText').onkeypress = textPress;
        let data_row = 0;
        function textPress() {
            if (event.key === 'Enter') {
                data_row++;
                let self_value = this.value
                if (!this.hasAttribute('data-update')) {
                    $('tbody').innerHTML +=
                        `
                <tr data-row="${data_row}">
                    <td><span class="text">${self_value}</span> <span class="delete float-right btn btn-primary badge mx-2">delete</span> <span onclick="Update(this)"  class="update float-right btn btn-primary badge mx-2">Update</span>  </td>
                </tr>
                `;
                }
                let update_attr = this.getAttribute('data-update');
                //console.log(update_attr);
                if (this.hasAttribute('data-update')) {
                    $(`[data-row='${this.getAttribute('data-update')}'] td .text`).textContent = self_value;
                    this.removeAttribute('data-update');
                }
                this.value = '';
            }
        }
        function Update(val) {
            let updateText = val.parentElement;
            $('#typeText').value = updateText.children[0].textContent;
            $('#typeText').setAttribute('data-update', updateText.parentElement.getAttribute('data-row'))
        }

Enter fullscreen mode Exit fullscreen mode

now, we can CREATE, READ, UPDATE.

so, final thing is Delete

DELETE.

so, for delete we have to add onclick our delete span

<span onclick="Delete(this)" class="delete float-right btn btn-primary badge mx-2">delete</span>
Enter fullscreen mode Exit fullscreen mode

and create new function with the name of function Delete(this) and paste below code for Delete function

function Delete(val){
            val.parentElement.parentElement.remove();
        }
Enter fullscreen mode Exit fullscreen mode

that's it.
** Our CRUD is ready **

for full code, you can follow Github Repository

For Hire me your project or like this project at,Freelancer.com

Discussion (0)

Forem Open with the Forem app