Library books entry mini project using bootstrap and pure javascript

Shreyesh kolhe
December 02, 2021

 Library books entry mini project using bootstrap and pure javascript.



        First of all there is the administrative side project. In this project showing the book information in table format. First the administrator submits the book name, book author and book type and all the data will be shown in the table.  

Source Code. 


Library.html 
<!DOCTYPE html>
<html lang="en">
<head>
    <title>library app</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
</head>
<body>
    <nav class="navbar navbar-expand-lg navbar-dark bg-dark">
        <div class="container-fluid">
          <a class="navbar-brand" href="#">Navbar</a>
          <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>
          </button>
          <div class="collapse navbar-collapse" id="navbarSupportedContent">
            <ul class="navbar-nav me-auto mb-2 mb-lg-0">
              <li class="nav-item">
                <a class="nav-link active" aria-current="page" href="#">Home</a>
              </li>
            </ul>
            <form class="d-flex">
              <input class="form-control me-2" type="search" placeholder="Search" aria-label="Search">
              <button class="btn btn-outline-success" type="submit">Search</button>
            </form>
          </div>
        </div>
      </nav>
    <div class="container">
        <h4 class="py-3">Book Entry</h2>
        <div class="container mx-3">
            <form id="libForm">
            <div class="mb-3">
              <label class="form-label">Book Name</label>
              <input type="text" class="form-control" id="bname" placeholder="Enter Book Name">
            </div>
            <div class="mb-3">
              <label class="form-label">Author</label>
              <input type="text" class="form-control" id="bauthor" placeholder="Enter book Author">
            </div>  
            <div class="check">
                <label class="form-label">Type of Books</label>

            <div class="form-check">
                <input class="form-check-input" type="radio" name="type" value="scientific" id="scientific">
                <label class="form-check-label" >
                  Scientific book
                </label>
              </div>
              <div class="form-check">
                <input class="form-check-input" type="radio" name="type" value="Historical" id="Historical" checked>
                <label class="form-check-label" >
                  Historical Stories
                </label>
              </div>     
              <div class="form-check">
                <input class="form-check-input" type="radio" name="type" value="Biography" id="Biography" checked>
                <label class="form-check-label" >
                  Biography
                </label>
              </div>     
              
            </div>     
            <button type="submit" class="btn btn-primary my-3">Submit</button>
          </form></div>
          <h4 class="py-3">Book information</h2>
            <div class="container mx-3">
                <table class="table">
                    <thead>
                      <tr>
                        <th scope="col">Book Name</th>
                        <th scope="col">Author</th>
                        <th scope="col">Book Type</th>
                      </tr>
                    </thead>
                    <tbody id="infobody">
                      
                      
                    </tbody>
                  </table>
            </div>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script> 
<script src="./library.js"></script>
</body>
</html>
Library.js 
// prototypes
function Book(name, author, type){
    this.name = name;
    this.author = author;
    this.type = type;
}

// disply constructor
function Display(){

}

Display.prototype.add = function(b1){
    console.log("adding html element ");
    tablebodyl = document.getElementById('infobody')
    let html = ` <tr>
                    <td>${b1.name}</td>
                    <td>${b1.author}</td>
                    <td>${b1.type}</td>
                </tr>`;

    tablebodyl.innerHTML += html;
}
Display.prototype.clear = function(){
    let libForm = document.getElementById('libForm');
    libForm.reset();
}

// eventlistener button form
let libForm = document.getElementById('libForm');
libForm.addEventListener('submit', libFormSubmit);

function libFormSubmit(e){
    e.preventDefault();

    console.log("you have submited libform");
    let name =document.getElementById('bname').value;
    let author=document.getElementById('bauthor').value;
    let type;
    // Scientific, Historical, Biography

    let scientific  = document.getElementById('scientific');
    let historical = document.getElementById('Historical');
    let biography = document.getElementById('Biography');
    
    if(scientific.checked){
        type = scientific.value;
    }else 
    if(historical.checked){
        type = historical.value;
    }
    if(biography.checked){
        type = biography.value;
    }
    
    let b1 = new Book(name, author, type);
    console.log(b1);
    let display = new Display();
    display.add(b1);
    display.clear();

}