Hello friends , hope you all are doing good . I am back with a new article on firebase CRUD with javascript . In this article I am going to show you how you can make firebase CRUD (Create , Read , Update ,Delete) operations with vanilla javascript .So without wasting any time let’s get started.

Requirements

Now to make CRUD operations with firebase database you need to setup and integrate firebase with your web project .If you have not done setting up your firebase project and integrate with your web project then you can read below articles .

  1. Setup firebase project : https://bepractical.tech/how-to-setup-a-firebase-project/
  2. Integrate firebase in your project : https://bepractical.tech/integrate-firebase-database-in-your-web-project/

Now after integrating firebase with your web project let’s move forward towards making CRUD operations with firebase database.

First of all make a file named as index.html and write the following html code in it.

<!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">
    <meta name="Description" content="Enter your description here" />
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.6.0/css/bootstrap.min.css">
    <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css">
    <link rel="stylesheet" href="style.css">
    <title>OTT Buddy</title>
</head>

<body>
    <!-- add new OTT show modal -->

    <div class="modal fade add_data" id="addOTTModal" tabindex="-1" aria-labelledby="addOTTModalLabel" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="addOTTModalLabel">Add New OTT Show</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body">
                    <div class="form-group">
						<label>OTT</label>
						<input type="text" class="form-control OTT_name" placeholder = "Enter OTT name here" required="">
					</div>
					<div class="form-group">
						<label>Show</label>
						<input type="email" class="form-control show_name" placeholder="Enter show name here" required="">
					</div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
                    <button type="button" class="btn btn-success submit">Save</button>
                </div>
            </div>
        </div>
    </div>

    <!-- add new OTT show modal end -->

    <!-- edit OTT modal start -->

    <div class="modal fade edit_modal" id="editOTTModal" tabindex="-1" aria-labelledby="editOTTModalLabel" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="editOTTModalLabel">Edit OTT Show</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body">
                    <div class="form-group">
						<label>OTT</label>
						<input type="text" class="form-control edit_OTT_name" required="">
					</div>
					<div class="form-group">
						<label>Show</label>
						<input type="email" class="form-control edit_show_name" required="">
					</div>
                    <input type="hidden" class = "edit_key">
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
                    <button type="button" class="btn btn-success save_edited_data">Save changes</button>
                </div>
            </div>
        </div>
    </div>

    <!-- edit OTT modal end -->

    <!-- hero section starts from here -->

    <section id="hero">
        <div class="main_container">
            <div class="head">
                <div class="left">
                    <h5>OTT <span class="">Buddy</span></h5>
                </div>
                <div class="right">
                    <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#addOTTModal">
                        Add new show
                    </button>
                </div>
            </div>
            <div class="body">
                <div class="table-responsive">
                    <table class="table">
                        <thead class="thead-dark">
                            <tr>
                                <th scope="col">OTT</th>
                                <th scope="col">Show</th>
                                <th scope="col">Action</th>
                            </tr>
                        </thead>
                        <tbody>
                            
                        </tbody>
                    </table>
                </div>
                
            </div>
        </div>
    </section>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.1/umd/popper.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.6.0/js/bootstrap.min.js"></script>
    <script src="https://www.gstatic.com/firebasejs/7.15.5/firebase-app.js"></script>
    <script src="https://www.gstatic.com/firebasejs/7.15.5/firebase-auth.js"></script>
    <script src="https://www.gstatic.com/firebasejs/7.15.5/firebase-database.js"></script> 
    <script src="firebase.js"></script>
    <script src="index.js"></script>
</body>

</html>

Now make a file named as style.css and write the below css code in it

*{
    padding:0px;
    margin:0px;
    border:none;
}
body{
    font-family: Helvetica, sans-serif;
    background-color: #F5F5F5;
    box-sizing: border-box;
}
section#hero{
    width:100%;
    height:100vh;
    padding:50px 100px;
    display:flex;
    justify-content: center;
    align-items: center;
}
section#hero .main_container{
    width:90%;
    min-height: 450px;
    background-color:white;
    display:flex;
    flex-direction: column;
}
section#hero .main_container .head{
    background-color: #435D7D;
    padding:0px 30px;
    height:70px;
    display:flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
}
section#hero .main_container .head .left h5{
    color:white;
}
section#hero .main_container .head .right button{
    background-color:#28a745;
}
section#hero .main_container .body table .edit{
    color:#FFC107;
}
section#hero .main_container .body table .delete{
    color:#F44336;
}
@media screen and (max-width:576px){
    section#hero {
        padding: 30px 0px;
        align-items: flex-start;
    }
    section#hero .main_container .head{
        padding:0px 5px;
    }
    section#hero .main_container .body table td{
        padding:10px;
    }
}

Now it’s time to implement the javascript code for CRUD operations . First of all make a file named as index.js and write the below vanilla js code in it.

const dbRef = firebase.database().ref();
const listShowsRef = dbRef.child('list_shows');
const tbody = document.getElementsByTagName("tbody")[0];
const submitButton = document.getElementsByClassName("submit")[0];
const OTTName = document.getElementsByClassName("OTT_name")[0];
const showName = document.getElementsByClassName('show_name')[0];
const saveEditedDataButton = document.getElementsByClassName("save_edited_data")[0];
const editedOTTName = document.getElementsByClassName("edit_OTT_name")[0];
const editedShowName = document.getElementsByClassName("edit_show_name")[0];
const editedKey = document.getElementsByClassName("edit_key")[0];
 listShowsRef.on("child_added", snap => {
     tbody.innerHTML +=  `<tr data-id=` + snap.key + `> 
                    <td>` + snap.val().OTT + `</td>
                    <td>` + snap.val().show + `</td>
                    <td>
                        <a href="#editOTTModal" class="edit" data-toggle="modal">
                            <i class="material-icons edit_icon" data-toggle="tooltip" title="Edit">&#xE254;</i>
                        </a>
                        <a href="#deleteOTTModal" class="delete" data-toggle="modal">
                            <i class="material-icons delete_icon" data-toggle="tooltip" title="Delete">&#xE872;</i>
                        </a>
                    </td>
                </tr>`;
 });
 $(document).ready(function () {
     submitButton.addEventListener("click", function () {
         const OTT_name = OTTName.value;
         const show_name = showName.value;
         const new_data = {
             OTT: OTT_name,
             show: show_name
         }
         listShowsRef.push(new_data, function () {
             console.log("new data added");
         });
         OTTName.value = "";
         showName.value = "";
     });
     saveEditedDataButton.addEventListener("click", function () {
         var edited_OTT_name = editedOTTName.value;
         var edited_show_name = editedShowName.value;
         var edited_key = editedKey.value;
         const editedData = {
             OTT: edited_OTT_name,
             show: edited_show_name
         }
         var listShowRef = dbRef.child('list_shows/' + edited_key).update(editedData);

     })
 })
 document.addEventListener('click', function(e){
    if(e.target.className.includes("edit_icon")){
     var key = e.target.parentElement.parentElement.parentElement.getAttribute("data-id");
      var listShowRef = dbRef.child('list_shows/' + key);
     listShowRef.on("value", snap => {
         editedOTTName.value = snap.val().OTT;
         editedShowName.value = snap.val().show;
         editedKey.value = snap.key;
     }) 
    }
    /* console.log(e.target.className); */
    
    if(e.target.className.includes("delete_icon")){
      var delete_key = e.target.parentElement.parentElement.parentElement.getAttribute("data-id");
       var listShowRef = dbRef.child('list_shows/' + delete_key).remove();
       var element = e.target.parentElement.parentElement.parentElement.style.display = "none";
    } 
});

Now you are ready to go .Just open the index.html file in a browser and you can see the data of your firebase database if any , in your web page.

Note : index.js file should linked below the fierbase.js file

You can also go through this youtube playlist of firebase CRUD operations where all functions are explained in detail .

For getting regular updates you can follow me on :

Linkedin : https://www.linkedin.com/in/anand-raj-7ba6431a8

Twitter : https://twitter.com/anand__346

Youtube : https://www.youtube.com/channel/UC1DcIKA0zixS5LOJ1wV1lAg

and join my telegram channel for tech related tips & tricks and free courses

Telegram : https://t.me/bepracticaltech

Note : if you are interested in making your own chat application with the help of firebase , javascript and jquery then enroll the below course .You will get in-depth knowledge of firebase realtime database working with firebase auth.

Udemy Course link : https://www.udemy.com/course/chat-application-with-javascript-jquery-and-firebase/?referralCode=1747A5E2136F2B76D21C

Thank you for reading this article hope you reached your goal

see you again , peace out ✌