Hey everyone! Norbert B.M. here,
your friendly YouTuber and Course creator. I’m the guy who hits the bag and makes web development fun.
In this web development tutorial you are going to build a Leave request form Web Application using HTML Bootstrap and JavaScript.
I also recently lunched a Podcast for the web community about Web Technology. it is called Weekly code quickies with Norbert B.M. and its focus is to inform you about the latest innovations, technology’s, and tip & trikes that the industry provides.
You check it out by following this links:
YouTube Weekly Code Quickies a.k.a. WCQ
Course Updates
I am planning on realizing a bunch of courses in the upcoming 2022 . I am extremely excited for the new/updated technologies that are out there and I cant wait to share with you dis knowledge.
Upcoming courses for 2022
- Git & GitHub
- Node.js, Express, MongoDB
- React for Full stack
- MERN Stack
- Hydrogen Shopify Framework for Dynamic E-commerce
- Monthly Projects for your portfolio
The future is looking great 🙂
Black Friday Sales!
As always I am offering you the lowest price possible for the following courses:
- Complete Bootstrap 5 for Beginners with real world Projects
- 30 HTML CSS & JavaScript projects in 30 Days for Beginners
- Visual Studio Code – Master the Complete VS Code environment
- Master Responsive Web Design CSS Grid, Flexbox & Animations
- Modern JavaScript from Beginner to Advanced
- Advanced CSS & SASS: Framework, Flexbox, Grid, Animations
- Web Development HTML CSS & JS a Beginner to Advance guide
Have a lovely and productive day!
Norbert B.M.
Source Code :
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<!-- Bootstrap CDN -->
<link
href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css"
rel="stylesheet"
integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3"
crossorigin="anonymous"
/>
<!-- Bootstrap Icons CDN -->
<link
rel="stylesheet"
href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.7.1/font/bootstrap-icons.css"
/>
<!-- FontAwesome CDN -->
<link
rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css"
integrity="sha512-Fo3rlrZj/k7ujTnHg4CGR2D7kSs0v4LLanw2qksYuRlEzO+tcaEPQogQ0KaoGN26/zrn20ImR1DfuLWnOo7aBA=="
crossorigin="anonymous"
referrerpolicy="no-referrer"
/>
<title>Document</title>
</head>
<body>
<div class="container mt-5 m-lg-auto p-5 shadow">
<section class="leave-request">
<header class="text-center mb-5">
<i
class="bi bi-person-fill display-1 text-primary"
style="font-size: 10rem"
></i>
<h1 class="display-1 h1">Leave request form</h1>
</header>
<!-- Form -->
<form id="LeaveRequestForm">
<!-- Name -->
<div class="row mb-3">
<label class="form-label">Name</label>
<div class="col">
<input
type="text"
class="form-control"
placeholder="First Name"
id="FirstName"
/>
</div>
<div class="col">
<input
type="text"
class="form-control"
placeholder="Last Name"
id="LastName"
/>
</div>
</div>
<!-- Employee ID Remaining vacation days-->
<div class="row mb-3">
<div class="col">
<label class="form-label">Employee ID</label
><input
type="number"
class="form-control"
id="EmployeeID"
placeholder="Your Employee ID"
/>
</div>
<div class="col">
<label class="form-label">Remaining leave days</label
><input
type="number"
class="form-control"
id="RemainingDays"
placeholder="Your remaining days of vacation"
/>
</div>
</div>
<div class="row mb-3">
<div class="col">
<label class="form-label"
>Start date<small class="text-muted"
>(incl. 1st day)</small
></label
><input type="date" class="form-control" id="StartDate" />
</div>
<div class="col">
<label class="form-label"
>End date
<small class="text-muted">(incl. last day)</small></label
><input type="date" class="form-control" id="EndDate" />
</div>
</div>
<button
type="submit
"
class="btn btn-primary w-100 shadow-sm"
>
Submit
</button>
</form>
</section>
</div>
<!-- Create leave request -->
<script src="main.js"></script>
</body>
</html>
JavaScript
// DOM Elements
const leaveRestForm = document.getElementById("LeaveRequestForm"),
firstName = document.getElementById("FirstName"),
lastName = document.getElementById("LastName"),
employeeID = document.getElementById("EmployeeID"),
initialRemainingDays = document.getElementById("RemainingDays"),
startDate = document.getElementById("StartDate"),
endDate = document.getElementById("EndDate");
leaveRestForm.onsubmit = (e) => {
e.preventDefault();
(firstName.vale === "",
lastName.value === "",
employeeID.value === "",
initialRemainingDays.value === "")
? alert("Complete all fields!")
: createLeaveRequest();
function createLeaveRequest() {
let leaveRequest = document.createElement("div");
leaveRequest.innerHTML = `
<header class="text-center mb-5">
<i
class="bi bi-person-fill display-1 text-primary"
style="font-size: 10rem"
></i>
<h1 class="display-1 h1">Leave request form</h1>
</header>
<main class="container">
<section class="row mb-3">
<div class="col font-medium">
<label for="">First Name:</label>
<span class="text-primary">${firstName.value}</span>
</div>
<div class="col ">
<label class="text-lg ">Last Name:</label>
<span class="text-primary" >${lastName.value}</span>
</div>
</section>
<section class="row mb-3">
<div class="col font-medium">
<label for="">Employee ID:</label>
<span class="text-primary">${employeeID.value}</span>
</div>
<div class="col ">
<label class="text-lg ">Initial leave days:</label>
<span class="text-primary" >${initialRemainingDays.value}</span>
</div>
</section>
</section>
<section class="row mb-3">
<div class="col font-medium">
<label for="">Start Date:</label>
<span class="text-primary">${startDate.value}</span>
</div>
<div class="col leading-6 font-medium">
<label class="text-lg ">End Date:</label>
<span class="text-primary" >${endDate.value}</span>
</div>
</section>
</section>
<section class="row mb-3">
<div class="col font-medium">
<label for="">Requesting leave:</label>
<span class="text-primary">${employeeID.value}</span>
</div>
<div class="col ">
<label class="text-lg ">Remaining leave day/s:</label>
<span class="text-primary" >${initialRemainingDays.value}</span>
</div>
</section>
<section class="mb-3 row">
<div class="col leading-6 font-medium">
<label >Requesting leave:</label>
<span class="text-indigo-700"
>${calculateLeaveDays(startDate.value, endDate.value)} </span
>
</div>
<div class="col leading-6 font-medium">
<label >Remaining leave day/s:</label>
<span class="text-indigo-700"
>${calculateRemainingLeaveDays(initialRemainingDays.value)}
</span
>
</div>
</section>
<div class="col ">
<label >Submitted:</label>
<span class="text-primary">${getSubmissionTimeStamp()} </span>
</div>
<!-- todo: buttons -->
<section class="d-flex justify-content-between mt-3">
<button type="submit" class="btn btn-success btn-lg " onclick="onLeaveApproval()"><i class="bi bi-emoji-smile-fill me-2 "></i>Approve</button>
<button type="submit" class="btn btn-danger btn-lg" onclick="onLeaveReject()"><i class="bi bi-emoji-frown-fill me-2"></i>Decline</button>
</section>
</main>
`;
document.querySelector(".leave-request").remove();
document.querySelector(".container").appendChild(leaveRequest);
}
};
function getSubmissionTimeStamp() {
this.today = new Date();
const date = `${today.getFullYear()}-${
today.getMonth() + 1
}-${today.getDate()}`;
const time = ` ${today.getHours()}:${today.getMinutes()}:${today.getSeconds()}`;
const dateTime = `${date} / ${time}`;
return dateTime;
}
// Calculate the exact leave days
function calculateLeaveDays(start, end) {
const startDate = new Date(start);
const endDate = new Date(end);
let leaveDays = endDate.workingDaysFrom(startDate);
return leaveDays;
}
// Calculate remaining leave days
function calculateRemainingLeaveDays(initialRemainingDays) {
return (
initialRemainingDays - calculateLeaveDays(startDate.value, endDate.value)
);
}
Date.prototype.workingDaysFrom = function (fromDate) {
if (!fromDate || isNaN(fromDate) || this < fromDate) {
return -1;
}
let frDay = new Date(fromDate.getTime()),
toDay = new Date(this.getTime()),
numOfWorkingDays = 1;
frDay.setHours(0, 0, 0, 0);
toDay.setHours(0, 0, 0, 0);
while (frDay < toDay) {
frDay.setDate(frDay.getDate() + 1);
let day = frDay.getDay();
if (day != 0 && day != 6) {
numOfWorkingDays++;
}
}
console.log(numOfWorkingDays);
return numOfWorkingDays;
};
// On Approve
function onLeaveApproval() {
document.querySelector(".container").innerHTML = `
<header class="text-center mb-5">
<i class="bi bi-emoji-smile-fill h1 display-1 text-success m-auto"style="font-size: 10rem"></i>
<h1 class="h1 display-1">Your leave was approved</h1>
<button class="btn btn-dark btn-lg mt-5" onclick="location.reload()">Back</button>
</header>
`;
}
// On Reject
function onLeaveReject() {
document.querySelector(".container").innerHTML = `
<header class="text-center mb-5">
<i class="bi bi-emoji-frown-fill h1 display-1 text-danger m-auto" style="font-size: 10rem"></i>
<h1 class="h1 display-1">Your leave was declined</h1>
<button class="btn btn-dark btn-lg mt-5" onclick="location.reload()">Back</button>
</header>
`;
}