Advance JavaScripting:
Callback functions:
Example:
/* What are callback Functions: A callback is a function passed into another
function.
Callbacks exists becuase soemthing needs to happen after another task
finishes.*/
function prepareTea(callback){
[Link]("Preapring tea.....");
setTimeout(()=>{
[Link]("Tea is ready");
callback();
},5000);
}
function serveCustomer(){
[Link]("Serving customer");
}
prepareTea(serveCustomer);
Patient Status Application:
[Link]: <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Hospital Management System</title>
<link rel="stylesheet" href="[Link]">
</head>
<body>
<div class="container">
<h1>Hospital Patient Flow System</h1>
<div class="card">
<input type="text" id="patientname" placeholder="Enter the patient
name">
<button onclick="registerPatient()">Register Patient</button>
</div>
<div class="card">
<h2>Patient Status</h2>
<ul id="patientList">
</ul>
</div>
</div>
<script src="[Link]"></script>
</body>
</html>
[Link]:
body{
font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
background-color: #f4f6f9;
margin:0;
padding:0;
}
.container{
max-width: 700px;
margin:auto;
}
h1{
text-align: center;
color:#2c3e50;
}
.card{
background-color: white;
padding:20px;
margin-top: 20px;
border-radius: 10px;
box-shadow: 0 0 10px rgba(0,0,0,0.7);
}
input{
width:70%;
padding:10px;
font-size:16px;
}
button{
padding: 10px 15px;
font-size:16px;
background-color: darkblue;
color:white;
cursor: pointer;
}
[Link]:
function registerPatient(){
const patientInput=[Link]("patientname");
const patientName=[Link] .trim();
if(patientName===""){
alert("Please enter patient name");
return;
}
const patientList=[Link]("patientList");
const li=[Link]("li");
[Link]=`
<strong>${patientName}</strong>
<span class="status">
Registered</span>`;
[Link](li);
[Link]="";
doctorConsultation(li);
}
function doctorConsultation(patient){
setTimeout(()=>{
[Link](".status").textContent="Doctor Cosultation
Completed";
medicinIssue(patient);
},7000);
}
function medicinIssue(patient){
setTimeout(()=>{
[Link](".status").textContent="Medicine Issued";
}, 9000);
}