PARKING LOT MANAGEMENT SYSTEM USING JAVASCRIPT

Demo👀

How Do You Make A Parking Lot Management System Using JavaScript!

1st Step:-

First you open your HTML Editor like - Notepad++,Subline Text,Brackets, etc.

Then start program use Html, CSS, Javascript.

2nd Step:-

Copy the CSS code and then Paste your HTML Editor into <head> here </head> section.

CSS Code :-

  <link href="https://fonts.googleapis.com/css?family=Roboto&display=swap" rel="stylesheet">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
    
    
    <style type="text/css">
      *{
    font-family: 'Roboto', sans-serif;
    padding:0;
    margin:0;
    border:0
}
header{
    background-color: #0a3d53;
}
#header-logo{
    width:64px;
    height:64px;
}
#header-msg{
    font-size: 25px;
    color: white;
}
#btnOne{
    
    color:black;
}
#btnOne:focus,#btnOne:hover{
    box-shadow: none;
    outline:none;
}

#tableHead{
    background-color:rgb(25, 120, 197);
}
#searchInput{
    height: calc(1.5em + .75rem + 2px);
    padding: .375rem .75rem;
    border-bottom: 1px solid #ced4da;
}
#searchInput:hover,#searchInput:focus{
    box-shadow: none;
    outline:none;
}
    </style>

3rd Step:-

Copy the html code and then Paste your HTML Editor into <body> here </body> section.

HTML Code :-

 
<header class="shadow">
        <div class="header-content d-flex justify-content-center p-2">
            <img src="./Images/parking.svg" alt="" id="header-logo">
            <h1 class="text-center text-light">
Parking Lot Management</h1>
<div id="header-msg" class="ml-5 align-self-center">
</div>
</div>
</header>
    <div class="form-container mt-5">
        <form class="w-50 mx-auto" id="entryForm">
            <h5 class="text-center">
Add Car to Parking Lot</h5>
<div class="form-group">
                <label for="owner">Owner:</label>
                <input type="text" class="form-control rounded-0 shadow-sm" id="owner" placeholder="Owner">
            </div>
<div class="form-group">
                <label for="car">Car:</label>
                <input type="text" class="form-control rounded-0 shadow-sm" id="car" placeholder="Car">
            </div>
<div class="form-group">
                <label for="licensePlate">License Plate:</label>
                <input type="text" class="form-control rounded-0 shadow-sm" id="licensePlate" placeholder="NN-NN-LL,NN-LL-NN,....etc">
            </div>
<div class="row">
                <div class="col-6">
                    <label for="entryDate">Entry Date:</label>
                    <input type="date" class="form-control rounded-0 shadow-sm" id="entryDate">
                </div>
<div class="col-6">
                    <label for="exitDate">Exit Date:</label>
                    <input type="date" class="form-control rounded-0 shadow-sm" id="exitDate">
                </div>
</div>
<button type="submit" class="btn btn-warning mx-auto d-block mt-5 rounded-0 shadow" id="btnOne">Add Car</button>
        </form>
</div>
<div class="table-container mt-5 mb-5 w-75 mx-auto" >
            <h5 class="text-center mb-3">
List of Cars in Parking Lot</h5>
<input type="text" class="w-100 mb-3" id="searchInput" placeholder="Search...">
            <table class="table table-striped shadow " id="parkingTable">
                    <thead class="text-white" id="tableHead">
<tr>
                        <th scope="col">Owner</th>
                        <th scope="col">Car</th>
                        <th scope="col">License Plate</th>
                        <th scope="col">Entry Date</th>
                        <th scope="col">Exit Date</th>
                        <th scope="col">Actions</th>
                      </tr>
</thead>
                    <tbody id="tableBody">
                     
                    </tbody>
                  </table>
</div>

4th Step:-

Copy the JavaScript code and then Paste your HTML editor into the upper </body>.

Javascript Code:-

 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
    <script>
      //Entry Class: Represent each entry in the parking lot
class Entry{
    constructor(owner,car,licensePlate,entryDate,exitDate){
        this.owner = owner;
        this.car = car;
        this.licensePlate = licensePlate;
        this.entryDate = entryDate;
        this.exitDate = exitDate;
    }
}
//UI Class: Handle User Interface Tasks
class UI{
    static displayEntries(){
   
        const entries = Store.getEntries();
        entries.forEach((entry) => UI.addEntryToTable(entry));
    }
    static addEntryToTable(entry){
        const tableBody=document.querySelector('#tableBody');
        const row = document.createElement('tr');
        row.innerHTML = `   <td>${entry.owner}</td>
                            <td>${entry.car}</td>
                            <td>${entry.licensePlate}</td>
                            <td>${entry.entryDate}</td>
                            <td>${entry.exitDate}</td>
                            <td><button class="btn btn-danger delete">X</button></td>
                        `;
        tableBody.appendChild(row);
    }
    static clearInput(){
        //Selects all the inputs
        const inputs = document.querySelectorAll('.form-control');
        //Clear the content of each input
        inputs.forEach((input)=>input.value="");
    }
    static deleteEntry(target){
        if(target.classList.contains('delete')){
            target.parentElement.parentElement.remove();
        }
    }
    static showAlert(message,className){
        const div = document.createElement('div');
        div.className=`alert alert-${className} w-50 mx-auto`;
        div.appendChild(document.createTextNode(message));
        const formContainer = document.querySelector('.form-container');
        const form = document.querySelector('#entryForm');
        formContainer.insertBefore(div,form);
        setTimeout(() => document.querySelector('.alert').remove(),3000);
    }
    static validateInputs(){
        const owner = document.querySelector('#owner').value;
        const car = document.querySelector('#car').value;
        const licensePlate = document.querySelector('#licensePlate').value;
        const entryDate = document.querySelector('#entryDate').value;
        const exitDate = document.querySelector('#exitDate').value;
        var licensePlateRegex = /^(?:[A-Z]{2}-\d{2}-\d{2})|(?:\d{2}-[A-Z]{2}-\d{2})|(?:\d{2}-\d{2}-[A-Z]{2})$/;
        if(owner === '' || car === '' || licensePlate === '' || entryDate === '' || exitDate === ''){
            UI.showAlert('All fields must me filled!','danger');
            return false;
        }
        if(exitDate < entryDate){
            UI.showAlert('Exit Date cannot be lower than Entry Date','danger');
            return false;
        }
        
        return true;
    }
}
//Store Class: Handle Local Storage
class Store{
    static getEntries(){
        let entries;
        if(localStorage.getItem('entries') === null){
            entries = [];
        }
        else{
            entries = JSON.parse(localStorage.getItem('entries'));
        }
        return entries;
    }
    static addEntries(entry){
        const entries = Store.getEntries();
        entries.push(entry);
        localStorage.setItem('entries', JSON.stringify(entries));
    }
    static removeEntries(licensePlate){
        const entries = Store.getEntries();
        entries.forEach((entry,index) => {
            if(entry.licensePlate === licensePlate){
                entries.splice(index, 1);
            }
        });
        localStorage.setItem('entries', JSON.stringify(entries));
    }
}
//Event Display
    document.addEventListener('DOMContentLoaded',UI.displayEntries);
//Event Add
    document.querySelector('#entryForm').addEventListener('submit',(e)=>{
        e.preventDefault();
        
        //Declare Variables
        const owner = document.querySelector('#owner').value;
        const car = document.querySelector('#car').value;
        const licensePlate = document.querySelector('#licensePlate').value;
        const entryDate = document.querySelector('#entryDate').value;
        const exitDate = document.querySelector('#exitDate').value;
        if(!UI.validateInputs()){
            return;
        }
        //Instatiate Entry
        const entry = new Entry(owner, car, licensePlate, entryDate, exitDate);
        //Add the entry do de UI table
        UI.addEntryToTable(entry);
        Store.addEntries(entry);
        //Delete content of input's
        UI.clearInput();

        UI.showAlert('Car successfully added to the parking lot','success');

    });
//Event Remove
    document.querySelector('#tableBody').addEventListener('click',(e)=>{
        //Call to UI function that removes entry from the table
        UI.deleteEntry(e.target);
        //Get license plate to use as unique element of an entry
        var licensePlate = e.target.parentElement.previousElementSibling.previousElementSibling.previousElementSibling.textContent;
        //Call to Store function to remove entry from the local storage
        Store.removeEntries(licensePlate);
        //Show alert that entry was removed
        UI.showAlert('Car successfully removed from the parking lot list','success');
    })

//Event Search
    document.querySelector('#searchInput').addEventListener('keyup', function searchTable(){
        //Get value of the input search
        const searchValue = document.querySelector('#searchInput').value.toUpperCase();
        //Get all lines of table body
        const tableLine = (document.querySelector('#tableBody')).querySelectorAll('tr');
        //for loop #1 (used to pass all the lines)
        for(let i = 0; i < tableLine.length; i++){
            var count = 0;
            //Get all collumns of each line
            const lineValues = tableLine[i].querySelectorAll('td');
            //for loop #2 (used to pass all the collumns)
            for(let j = 0; j < lineValues.length - 1; j++){
                //Check if any collumn of the line starts with the input search string
                if((lineValues[j].innerHTML.toUpperCase()).startsWith(searchValue)){
                    count++;
                }
            }
            if(count > 0){
                //If any collumn contains the search value the display block
                tableLine[i].style.display = '';
            }else{
                //Else display none 
                tableLine[i].style.display = 'none';
            }
        }
    });
    </script>

How To Download This Project

The first step you click on the ''Download Project'' button you will see a new popup, then click on again the ''Download'' button. Now your project will be downloaded.

1Add

PARKING LOT MANAGEMENT SYSTEM USING JAVASCRIPT

Demo👀

How Do You Make A Parking Lot Management System Using JavaScript!

How To Download This Project

Project source Code

Related Project

Post a Comment

0 Comments

Followers

Followers

Popular Posts

DATE OF BIRTH | Age Calculator Using JavaScript | Beginner

Work Time Calculator Using JavaScript | Beginner

BINARY TO TEXT TRANSLATOR USING JAVASCRIPT | BEGINNER

1Add

PARKING LOT MANAGEMENT SYSTEM USING JAVASCRIPT

Demo👀

How Do You Make A Parking Lot Management System Using JavaScript!

How To Download This Project

Project source Code

Parking Lot Management Project Source Code

Related Project

You may like these posts

Post a Comment

0 Comments

Followers

Followers

Social Plugin

Popular Posts

DATE OF BIRTH | Age Calculator Using JavaScript | Beginner

Work Time Calculator Using JavaScript | Beginner

BINARY TO TEXT TRANSLATOR USING JAVASCRIPT | BEGINNER