Javascript CRUD Small Project
Tags: javascript, crud, html
Published: 2020-11-25 09:34:48

---
title: Javascript CRUD Small Project
published: true
description: Javascript Crud tutorial, In this tutorial we are gonna learn javascript crud operation.


tags: js, javascript, CRUD, html
//cover_image: https://direct_url_to_image.jpg
---

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

<strong> CRUD stand for CREATE READ UPDATE DELETE </strong>
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>

```
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>
    


```
**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)
            }
        }

```
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>
                `
            }
        }
```
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'))
        }

```

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>
```
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();
        }
```
that's it.
** Our CRUD is ready **

for full code, you can follow [Github Repository](https://github.com/nikhilroy2/Front_End_2020_Practice/blob/master/2020/november/js_crud/dev_index.html)

#### For Hire me your project or like this project at,[Freelancer.com](https://www.freelancer.com/u/nikhilroyjs)