Open In App

GEEKSFORGEEKS
Employee Database Management System using HTML CSS and JavaScript
In this article, we will be building an employee database management system using JavaScript.

Employee Database Management System is the collection of Employees’ data like names, first and last, email, contact numbers, salary and date of birth, etc. It provides an easy way to access and manage the list of employees in one place. A new employee can be added with valid details along with optional image src given in the add form and can also be removed from the database.



On completion, it will look like:


Screenshot-from-2023-08-08-13-28-42
Approach
First create a sample database with employee data like first name, last name, email, contact number, date of birth, salary and optional profile pic and store all in the data.json file as shown below in code.
Create a basic webpage structure with html and the data in the data.json file to show dummy html page using title and add employee button in header tag, form and inputs to get the new user data and divs, spans to display the employee data along with the relevent classes and ids.
Style the webpage with CSS properties using class names, ids and elements with properties like box-sizing, margin, padding , background color, display, curser, border, font-family, hower, overflow etc.
Using JavaScript get all date from data.json file using fetch() functiona and render it to the webpage using HTML dom methods.
Use addEventListener method to add click event to the add employee button and link it with callback function that takes userinput and add new employee data to the database and rerender all data on the page using renderemployees function.
Define a function named renderSingleEmployee that takes employee id and display all data on the side.
Link click event to the cross sign to delete that specific employee data from the database using deleteEmployee function with array.filter method.
 



Example:

<!DOCTYPE html> 

<html lang="en"> 

  

<head> 

    <meta charset="UTF-8" /> 

    <meta name="viewport" 

          content="width=device-width, initial-scale=1.0" /> 

    <link rel="stylesheet" href="style.css" /> 

    <title>Employee Database Management System</title> 

</head> 

  

<body> 

    <div id="app"> 

        <header class="header"> 

            <h1>Employee Database Management</h1> 

            <button class="createEmployee"> 

                Add Employee 

            </button> 

        </header> 

  

        <div class="employees"> 

            <div class="employees__names"> 

                <span class="employees__names--title"> 

                      Employee List 

                  </span> 

                <div class="employees__names--list"></div> 

            </div> 

            <div class="employees__single"> 

                <div class="employees__single--title"> 

                    Employee Information 

                </div> 

                <div class="employees__single--info"></div> 

            </div> 

        </div> 

        <!-- Add Employee Code - START -->

        <div class="addEmployee"> 

            <form class="addEmployee_create"> 

                Add a new Employee 

                <div> 

                    <input type="text" name="firstName" 

                           placeholder="First Name" required /> 

                    <input type="text" name="lastName" 

                           placeholder="Last Name" required /> 

                </div> 

                <input type="text" name="imageUrl" 

                       placeholder="Image URL (Optional)" /> 

                <input type="email" name="email" 

                       placeholder="Email" required /> 

                <input type="number" name="contactNumber" 

                       placeholder="Contact" required /> 

                <input type="number" name="salary" 

                       placeholder="Salary" required /> 

                <input type="text" name="address" 

                       placeholder="Address" required /> 

                <input type="date" name="dob" 

                       placeholder="Date of Birth" 

                       class="addEmployee_create--dob" 

                       required /> 

                <input type="submit" 

                       class="addEmployee_create--submit" 

                       value="Submit" /> 

            </form> 

        </div> 

        <!-- Add Employee Code - END -->

    </div> 

  

    <script src="script.js"></script> 

</body> 

  

</html>
Output:



Article Tags : JavaScriptWeb Technologies JavaScript-Projects
Recommended Articles
1. How to build Employee Management System using Node.js ?
2. Create an Employee Management using React-Native
3. How to create Pay Role Management Webpage using HTML CSS JavaScript ?
4. Create a Product Review and Rating System Using HTML CSS and JavaScript
5. Online Learning Management System using Tailwind CSS
6. Create a database on Relational Database Service (RDS) of Amazon Web Services(AWS)
7. How to create Budget Management Tool using JavaScript and Tailwind CSS ?
8. How to Create Event Management Card using JavaScript and Tailwind CSS ?
9. Create a Hospital Management System using PHP and MySQL
10. Student Management System using Express.js and EJS Templating Engine
11. Task Management System using Node and Express.js
12. Content Management System (CMS) using React and Express.js
13. Design a webpage for online food delivery system using HTML and CSS
14. How to fetch data from localserver database and display on HTML table using PHP ?
15. Design an Online Voting System Card using Tailwind CSS and JavaScript
16. How to build Hospital Management System using Node.js ?
17. Building a Toll Road Management System using Node.js
18. How to build User Management System using Node.js ?
19. How to build Hostel Management System using Node.js ?
20. Appointment Management System using React
21. How to build Library Management System using Node.js?
22. Expense Management System using MERN Stack
23. Volunteer Management System using MERN Stack
24. Document Management System using NextJS
25. How to make responsive sliding login and registration form using HTML CSS and JavaScript ?
Read Full Article
geeksforgeeks-footer-logo
A-143, 9th Floor, Sovereign Corporate Tower, Sector-136, Noida, Uttar Pradesh - 201305
GFG App on Play Store
GFG App on App Store
Company
About Us
Legal
Careers
In Media
Contact Us
Advertise with us
GFG Corporate Solution
Placement Training Program
Explore
Job-A-Thon Hiring Challenge
Hack-A-Thon
GfG Weekly Contest
Offline Classes (Delhi/NCR)
DSA in JAVA/C++
Master System Design
Master CP
GeeksforGeeks Videos
Geeks Community
Languages
Python
Java
C++
PHP
GoLang
SQL
R Language
Android Tutorial
DSA
Data Structures
Algorithms
DSA for Beginners
Basic DSA Problems
DSA Roadmap
DSA Interview Questions
Competitive Programming
Data Science & ML
Data Science With Python
Data Science For Beginner
Machine Learning Tutorial
ML Maths
Data Visualisation Tutorial
Pandas Tutorial
NumPy Tutorial
NLP Tutorial
Deep Learning Tutorial
Web Technologies
HTML
CSS
JavaScript
TypeScript
ReactJS
NextJS
NodeJs
Bootstrap
Tailwind CSS
Python Tutorial
Python Programming Examples
Django Tutorial
Python Projects
Python Tkinter
Web Scraping
OpenCV Tutorial
Python Interview Question
Computer Science
GATE CS Notes
Operating Systems
Computer Network
Database Management System
Software Engineering
Digital Logic Design
Engineering Maths
DevOps
Git
AWS
Docker
Kubernetes
Azure
GCP
DevOps Roadmap
System Design
High Level Design
Low Level Design
UML Diagrams
Interview Guide
Design Patterns
OOAD
System Design Bootcamp
Interview Questions
School Subjects
Mathematics
Physics
Chemistry
Biology
Social Science
English Grammar
Commerce
Accountancy
Business Studies
Economics
Management
HR Management
Finance
Income Tax
UPSC Study Material
Polity Notes
Geography Notes
History Notes
Science and Technology Notes
Economy Notes
Ethics Notes
Previous Year Papers
Preparation Corner
Company-Wise Recruitment Process
Resume Templates
Aptitude Preparation
Puzzles
Company-Wise Preparation
Companies
Colleges
Competitive Exams
JEE Advanced
UGC NET
SSC CGL
SBI PO
SBI Clerk
IBPS PO
IBPS Clerk
More Tutorials
Software Development
Software Testing
Product Management
Project Management
Linux
Excel
All Cheat Sheets
Free Online Tools
Typing Test
Image Editor
Code Formatters
Code Converters
Currency Converter
Random Number Generator
Random Password Generator
Write & Earn
Write an Article
Improve an Article
Pick Topics to Write
Share your Experiences
Internships
@GeeksforGeeks, Sanchhaya Education Private Limited, All rights reserved

HTML Online Editor & Compiler

Write, Run & Share HTML code online using OneCompiler's HTML online Code editor for free. It's one of the robust, feature-rich online Code editor for HTML language, running on the latest version HTML5. Getting started with the OneCompiler's HTML compiler is simple and pretty fast. The editor shows sample boilerplate code when you choose language as HTML. You can also specify the stylesheet information in styles.css tab and scripts information in scripts.js tab and start coding.

About HTML

HTML(Hyper Text Markup language) is the standard markup language for Web pages, was created by Berners-Lee in the year 1991. Almost every web page over internet might be using HTML.

Syntax help

Fundamentals

  • Any HTML document must start with document declaration <!DOCTYPE html>
  • HTML documents begin with <html> and ends with </html>
  • Headings are defined with <h1> to <h6> where <h1> is the highest important heading and <h6> is the least important sub-heading.
  • Paragrahs are defined in <p>..</p> tag.
  • Links are defined in <a> tag.

    Example:

    <a href="https://onecompiler.com/html">HTML online compiler</a>
  • Images are defined in <img> tag, where src attribute consists of image name.
  • Buttons are defined in <button>..</button> tag
  • Lists are defined in <ul> for unordered/bullet list and <ol> for ordered/number list, and the list items are defined in <li>.

HTML Elements and Attributes

  • HTML element is everything present from start tag to end tag.
  • The text present between start and end tag is called HTML element content.
  • Anything can be a tagname but it's preferred to put the meaningful title to the content present as tag name.
  • Do not forget the end tag.
  • Elements with no content are called empty elements.
  • Elements can have attributes which provides additional information about the element.
  • In the below example, href is an attribute and a is the tag name.

    Example:

    <a href="https://onecompiler.com/html">HTML online compiler</a>

CSS

CSS(cascading style sheets) describes how HTML elements will look on the web page like color, font-style, font-size, background color etc.

Example:

Below is a sample style sheet which displays heading in green and in Candara font with padding space of 25px.

body{
  padding: 25px;
}
.title {
	color: #228B22;
	font-family: Candara;
}

HTML Tables

  • HTML Tables are defined in <table> tag.
  • Table row should be defined in <tr> tag
  • Table header should be defined in <th> tag
  • Table data should be defined in <td> tag
  • Table caption should be defined in <caption> tag

HTML-Javascript

  • Javascript is used in HTML pages to make them more interactive.
  • <script> is the tag used to write scripts in HTML
  • You can either reference a external script or write script code in this tag.

Example

<script src="script.js"></script>