Skip to content
Advertisements

Bootstrap Library System

Overview

https://codepen.io/guldus/pen/YMWeLe

Github: https://github.com/Furkan-Gulsen/Library-System


HTML

<!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="Free Library System">
    <meta name="keywords" content="Library System, Book System">
    <meta name="author" content="Codeblogger">
    <title>Library System</title>

    <!-- Bootstrap -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/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>

    <!-- JQuery -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

    <!-- FontAwesome -->
    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.2/css/all.css">

    <!-- Pages -->
    <link rel="stylesheet" href="/CSS/main.css">
    <link rel="stylesheet" href="/CSS/book_list.css">
    <link rel="stylesheet" href="/CSS/insertion_section.css">
    <script src="/JS/main.js"></script>
</head>
<body>

    <section id="one-page">
        <div class="container">
            <!-- Title -->
            <div class="row">
                <h1 class="text-light">Library System</h1>
            </div>

            <div class="row mt-4">
                <!-- insertion section -->
                <div class="col-lg-5" id="insertion_section">
                    <form class="form-group justify-content-center">
                        <div class="row" id="name-section">
                            <label for="bookName" class="text-light">Name</label>
                            <input type="text" class="form-control" id="bookName">
                        </div>
                        <div class="row" id="author-section">
                            <label for="authorName" class="text-light">Author</label>
                            <input type="text" class="form-control" id="authorName">
                        </div>
                        <div class="row" id="publisher-section">
                            <label for="publisherName" class="text-light">Publisher</label>
                            <input type="text" class="form-control" id="publisherName">
                        </div>
                        <div class="row" id="two-section">
                            <div class="col-6">
                                <label for="numberPage" class="text-light">Number of pages</label>
                                <input type="number" class="form-control" id="numberPage">
                            </div>
                            <div class="col-6">
                                <label for="serialNumber" class="text-light">Serial Number</label>
                                <input type="number" class="form-control" id="serialNumber">
                            </div>
                        </div>
                        <div class="add-button mt-4">
                            <button type="button" class="btn btn-danger btn-block" id="add" >ADD</button>
                        </div>
                      </from>
                </div>

                <!-- Book List -->
                <div class="col-lg-7" id="book_list">
                    <table class="table table-borderless table-striped mt-3 ">
                        <thead>
                            <tr>
                                <th scope="col">Name</th>
                                <th scope="col">Author</th>
                                <th scope="col">Publisher</th>
                                <th scope="col">Page</th>
                                <th scope="col">Serial</th>
                                <th></th>
                            </tr>
                        </thead>
                        <tbody id="tabs">
                            <tr class="tab">
                                <th scope="row">The Hunger Games</th>
                                <td>Suzanne Collins</td>
                                <td>Alfa</td>
                                <td>478</td>
                                <td>1</td>
                                <td>
                                  <button type="button" class="close" aria-label="Close">
                                    <span aria-hidden="true">X</span>
                                  </button>
                                </td>
                            </tr>
                            <tr class="tab">
                                <th scope="row">Harry Potter</th>
                                <td>J.K. Rowling</td>
                                <td>Beta</td>
                                <td>398</td>
                                <td>2</td>
                                <td>
                                  <button type="button" class="close" aria-label="Close">
                                    <span aria-hidden="true">X</span>
                                  </button>
                                </td>
                            </tr>
                            <tr class="tab">
                                <th scope="row">To Kill a Mockingbird</th>
                                <td>Harper Lee  </td>
                                <td>Omega</td>
                                <td>685</td>
                                <td>3</td>
                                <td>
                                  <button type="button" class="close" aria-label="Close">
                                    <span aria-hidden="true">X</span>
                                  </button>
                                </td>
                            </tr>
                            <tr class="tab">
                                <th scope="row">Pride and Prejudice</th>
                                <td>Jane Austen</td>
                                <td>Sky</td>
                                <td>425</td>
                                <td>4</td>
                                <td>
                                  <button type="button" class="close" aria-label="Close">
                                    <span aria-hidden="true">X</span>
                                  </button>
                                </td>
                            </tr>
                            <tr class="tab">
                                <th scope="row">Twilight</th>
                                <td>Stephenie Meyer</td>
                                <td>Sun</td>
                                <td>556</td>
                                <td>5</td>
                                <td>
                                  <button type="button" class="close" aria-label="Close">
                                    <span aria-hidden="true">X</span>
                                  </button>
                                </td>
                            </tr>
                            <tr class="tab">
                                <th scope="row">The Book Thief</th>
                                <td>Markus Zusak</td>
                                <td>Child</td>
                                <td>475</td>
                                <td>6</td>
                                <td>
                                  <button type="button" class="close" aria-label="Close">
                                    <span aria-hidden="true">X</span>
                                  </button>
                                </td>
                            </tr>
                            <tr class="tab">
                                <th scope="row">Narnia</th>
                                <td>C.S. Lewis</td>
                                <td>Alfa</td>
                                <td>358</td>
                                <td>7</td>
                                <td>
                                  <button type="button" class="close" aria-label="Close">
                                    <span aria-hidden="true">X</span>
                                  </button>
                                </td>
                            </tr>
                            <tr class="tab">
                                <th scope="row">Animal Farm</th>
                                <td>George Orwell</td>
                                <td>Dog</td>
                                <td>277</td>
                                <td>8</td>
                                <td>
                                  <button type="button" class="close" aria-label="Close">
                                    <span aria-hidden="true">X</span>
                                  </button>
                                </td>
                            </tr>
                            <tr class="tab">
                                <th scope="row">Les Misérables</th>
                                <td>Victor Hugo</td>
                                <td>Dog</td>
                                <td>369</td>
                                <td>9</td>
                                <td>
                                  <button type="button" class="close" aria-label="Close">
                                    <span aria-hidden="true">X</span>
                                  </button>
                                </td>
                            </tr>
                            <tr class="tab">
                                <th scope="row">The Alchemist</th>
                                <td>Paulo Coelho</td>
                                <td>Omega</td>
                                <td>247</td>
                                <td>10</td>
                                <td>
                                  <button type="button" class="close" aria-label="Close">
                                    <span aria-hidden="true">X</span>
                                  </button>
                                </td>
                            </tr>
                            <tr class="tab">
                                <th scope="row">The Help</th>
                                <td>Kathryn Stockett</td>
                                <td>Clock</td>
                                <td>159</td>
                                <td>11</td>
                                <td>
                                  <button type="button" class="close" aria-label="Close">
                                    <span aria-hidden="true">X</span>
                                  </button>
                                </td>
                            </tr>
                            <tr class="tab">
                                <th scope="row">Charlotte's Web</th>
                                <td>E.B. White</td>
                                <td>Book</td>
                                <td>437</td>
                                <td>12</td>
                                <td>
                                  <button type="button" class="close" aria-label="Close">
                                    <span aria-hidden="true">X</span>
                                  </button>
                                </td>
                            </tr>
                            <tr class="tab">
                                <th scope="row">Dracula</th>
                                <td>Bram Stoker</td>
                                <td>Beta</td>
                                <td>346</td>
                                <td>13</td>
                                <td>
                                  <button type="button" class="close" aria-label="Close">
                                    <span aria-hidden="true">X</span>
                                  </button>
                                </td>
                            </tr>
                        </tbody>
                    </table>
                </div>
            </div>
        </div> 
    </section>
    
</body>
</html>

CSS(main)

body{
    padding: 0;
    margin: 0;
    height: 100vh;
}
/* 
Wallpaper
Source: https://wallpapersafari.com/hd-library-wallpaper/ 
*/
#one-page{
    height: 100%;
    background-image: url("/images/wallpaper.jpg");
    background-size: auto;
    -webkit-background-size: auto;
    -moz-background-size: auto;
    -o-background-size: auto ;
    
}
.container{
    position: relative;
    top: 15%;
}
h1{
    font-size: 50px;
}

@media (max-width: 976px){
    #one-page{
        height: 150%;
        background-image: url("/images/wallpaper.jpg");
        background-size: auto;
        -webkit-background-size: auto;
        -moz-background-size: auto;
        -o-background-size: auto ; 
    }
}

CSS( insertion_section )

#insertion_section{
    background: rgba(0,0,0,.75);
    border-radius: 7.5px;
    padding: 15px 10px 15px 10px;
    width: 100%;
    .form-group{
        width: 90%;
        margin-left: 10%;

        input,label{
            width: 90%;
        }
        input{
            opacity: .20;
            transition: .5s;
            outline: none;
        }

        #two-section{
            margin-left: -7.5%;
            input{
                width: 85%;
            }
        }
        button{
            margin-left: -5%;
        }

    }

}

CSS ( book list )

#book_list{
    background: rgba(0,0,0,.75);
    width: 92.5%;
    height: 385px;
    left: 25px;
    overflow-y: scroll;
    border-radius: 7.5px;
    &::-webkit-scrollbar {
        display: none;
    }
    table{
        background: rgba(256,256,256,.75);
        border-radius: 7.5px;
        
        thead{
            color: #1a1a1a;
        }
        tbody{
            color: #262626;
        }
        
    }
}

JavaScript

 $(document).ready(function(){

 // insertion_section
    $("input").focus(function() {
        $(this).css("opacity",1)
    })
    $("input").blur(function() {
        $(this).css("opacity",.2)
    })

    // close tr event
    $(".close").click(function(){
        $(this).parents(".tab").hide(500)
    })

    // add book info
    $("#add").click(function(){
        let book_name = $("#bookName").val(),
            book_author = $("#authorName").val(),
            book_publisher = $("#publisherName").val(),
            book_number = $("#numberPage").val(),
            book_serial = $("#serialNumber").val(),
            new_tr = document.createElement("tr"),
            new_th_book_name = document.createElement("th"),
            new_th_book_author = document.createElement("td"),
            new_th_book_publisher = document.createElement("td"),
            new_th_book_page = document.createElement("td"),
            new_th_book_serial = document.createElement("td"),
            table_book_name = document.createTextNode(book_name),
            table_book_author = document.createTextNode(book_author),
            table_book_publisher = document.createTextNode(book_publisher),
            table_book_number = document.createTextNode(book_number),
            table_book_serial = document.createTextNode(book_serial);

        // add txt
        new_th_book_name.appendChild(table_book_name);
        new_th_book_author.appendChild(table_book_author);
        new_th_book_publisher.appendChild(table_book_publisher);
        new_th_book_page.appendChild(table_book_number);
        new_th_book_serial.appendChild(table_book_serial);
        

        // add new_tr --> td
        let name_tab = new_tr.appendChild(new_th_book_name);
        let author_tab = new_tr.appendChild(new_th_book_author);
        let publisher_tab = new_tr.appendChild(new_th_book_publisher);
        let page_tab = new_tr.appendChild(new_th_book_page);
        let serial_tab = new_tr.appendChild(new_th_book_serial);
        new_th_book_name.setAttribute("scope","row")

        // add new_tr --> table
        let new_table = document.getElementById("tabs");
        new_table.appendChild(new_tr);
        new_tr.setAttribute("class","tab");
        

        // close button
        let but_td = document.createElement("td"),
            but = document.createElement("button"),
            but_span = document.createElement("span"),
            span_txt = document.createTextNode("X");

        but_td.appendChild(but);
        but.appendChild(but_span);
        but_span.appendChild(span_txt);
        new_tr.appendChild(but_td);

        but.setAttribute("type","button");
        but.setAttribute("class","close");
        but.setAttribute("aria-label","Close");
        but_span.setAttribute("aria-hidden","true");

        // click --> form reset
        this.form.reset();

        // close form item
        $(".close").click(function(){
            $(this).parents(".tab").hide(500)

        })

        
    })
    
})
Advertisements

1 Comment »

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

This site uses Akismet to reduce spam. Learn how your comment data is processed.

%d bloggers like this: