You are on page 1of 8

Doctors Appointment - V1

Grade settings: Maximum grade: 100


Run: Yes Evaluate: Yes
Automatic grade: Yes Maximum memory used: 512 MiB Maximum number of processes:
10000
Objective:
To add scripting to existing web page and work with JavaScript basic activities. The basic
Javascript concepts like DOM, Date functions, String functions and Control Statements are
covered.

Problem Description:
The hospital wants to fix a unique appointment for all the patients and hence it has decided to
create an application that will fix the appointment from the given data of the patients.
Following are the files that contains code snippets.
HTML for webpage (complete implementation is given for
index.html you). You only have to run this. No change needs to be done
in this file.
script.js Add your code in this file for the functions given.

Procedure to complete the exercise


1.    Required function is already available in the javascript file
Hint : Do NOT change the function names.
Fill the following functions with required code
Booking() On Clicking Submit button, this function is invoked. 

Fetch the patient's name, appointment date, preferred specialty an

Invoke the function validateDate(appointmentdate) and get the


value. If its true, then invoke fixappointment function. Else disp
current date"

Invoke the function fixappointment() as in :


fixappointment(patientname,appointmentdate,speciality,preffered

The function will return the string :  <patientname> your appoi


on <appDate> for the speciality <speciality> at <appointmen
calculation - based on time preference (table given below). Rec
display the result statement in div tag with id "result"

fixappointment(patientname, This function calculates the appointment date & time for a patien
appointmentdate,speciality,prefferedtime submitted. Then, sets the appstatus variable with the string : <pa
) appointment is confirmed on <appDate> for the speciality <s
<appointmentTime> after calculating the appointment time bas
preference & return this variable.
How is appDate or appointment date calculated (based on th
Use new Date().getHours(); javascript function to get the curren

If
Current hour is >= 8:00 and <= 12:00 & slot preferred is Mornin
Current hour is >=16.00 and <=22.00 & slot preferred is Evening
then 
appointment time is the current hour & appointment date is the c

if
Current hour is >12:00 and < 16:00 & slot preferred is Morning (
Current hour is >=16.00 and <=22.00 & slot preferred is Mornin
then 
appointment time is the next morning 8.00 and 9.00, respectivel
appointment date - next day is represented as : app_year-app_mo
where 
getDate() + 1, .getMonth() and .getFullYear() are the relevant m
new Date()
Remember to precede date and month number with 0, if they
digit.  Similarly, build logic for row2 & row4 in the table given b

Table : Rules for fixing appointment when time preference is en

Current Time Current Time Time A


(24hr clock) (24 hr clock) Preference T

>= 8:00 <= 12:00 Morning C


>= 8:00 <= 12:00 Evening 1
> 12:00 <16:00 Morning N
> 12:00 <16:00 Evening C
>=16:00 <=22:00 Morning N
>=16:00 <=22:00 Evening C
validateDate(appointmentdate) This function should validate the appointmentdate

If appointmentdate is equal to current date then return true else re

Return the value to Booking()

Screenshot 1
Screenshot 2

Screenshot 3
Solution:

index.html
1 <html>
2 <head>
3
4 <style>
5 h1
6 {
7 color:#000000;
8 font-family:verdana;
9 text-align:center;
10 }
11
12 table{
13 border-collapse:separate;
14 border-spacing: 0 15px;
15 }
16 th{
17 background-color: #E9EBE2;
18 color: white;
19 }
20 th,td{
21 width: 150px;
22 text-align: center;
23 border: 1px solid black;
24 padding: 5px;
25 }
26
27 tr:hover {background-color: #a1a1a1;}
28
29 body
30 {
31 background-color:#E9EBE2;
32 }
33
34
35 </style>
36
37 <script src="script.js" lang="text/javascript"></script>
38
39 </head>
40
41 <body>
42
43 <center>
44 <h1>ONLINE DOCTOR APPOINTMENT</h1>
45
46 <table>
47 <tr>
48 <td>Patient Name
49 <td><input type="text" name="patientname" id="patientname" required
placeholder="Enter the patient name">
50 </tr>
51
52 <tr>
53 <td>Patient Age
54 <td><input type="text" name="patientage" id="patientage" required
placeholder="Enter the patient age">
55 </tr>
56
57 <tr>
58 <td>Mobile Number</td>
59 <td><input type="text" name="mobile" id="mobile" required
placeholder="Enter the patient mobile number"></td>
60 </tr>
61
62 <tr>
63 <td>Appointment Date
64 <td><input type="date" name="appointmentdate" id="appointmentdate"
required>
65 </tr>
66
67 <tr>
68 <td>Preferred Speciality
69 <td>
70 <select name="speciality" id="speciality" required>
71 <option value="General">General</option>
72 <option value="Pediatrics">Pediatrics</option>
73 <option value="ENT">ENT</option>
74 <option value="Neurology">Neurology</option>
75 <option value="Gastrology">Gastrology</option>
76 </select>
77 </tr>
78
79 <tr>
80 <td>Preffered Time
81 <td>
82 <select name="prefferedtime" id="prefferedtime" required>
83 <option value="Morning">Morning</option>
84 <option value="Evening">Evening</option>
85 </select>
86 </tr>
87
88 <tr>
89 <td><input type="submit" name="submit" value="Submit"
onclick="Booking()">
90 </tr>
91
92 </table>
93
94 <div id="result">
95 </div>
96
97 </center>
98 </body>
99 </html>
100
script.js
1
2 function
fixappointment(patientname,appointmentdate,speciality,prefferedtime)
3 {
4 // TODO - Write your logic here to check whether all the inputs
are valid based on the description to fix an appointment
5
6 var d=new Date();
7 var currentHour=d.getHours();
8 var appointmenttime;
9 var currentMonth=d.getMonth();
10 var currentYear=d.getFullYear();
11 var currentDate=new Date().getDate();
12
13 if((currentHour>=8 && currentHour<=12 &&
prefferedtime==='Morning')||(currentHour>=16 && currentHour<=22 &&
prefferedtime==='Evening'))
14 appointmenttime=currentHour;
15 else if(currentHour>=8 && currentHour<=12 &&
prefferedtime==='Evening')
16 appointmenttime=16;
17 else if(currentHour>=12 && currentHour<=16 &&
prefferedtime==='Morning')
18 {
19 appointmenttime=8;
20 appointmentdate=d.getDate()+1;
21 }
22 else if(currentHour>=12 && currentHour<=16 &&
prefferedtime==='Evening')
23 appointmenttime=currentHour+3;
24 else if(currentHour>=16 && currentHour<=22 &&
prefferedtime==='Morning')
25 {
26 appointmenttime=9;
27 appointmentdate=d.getDate()+1;
28 }
29
30 var appstatus=patientname + " your appointment is confirmed on
"+appointmentdate+" for the speciality "+speciality+" at
"+appointmenttime+":00";
31 return appstatus;
32 }
33
34
35 function Booking()
36 {
37 var patientname= document.getElementById("patientname").value;
38 var appointmentdate=
document.getElementById("appointmentdate").value;
39 var speciality= document.getElementById("speciality").value;
40 var prefferedtime=
document.getElementById("prefferedtime").value;
41 // Use document.getElementById() method to get the value of
patientname,appointmentdate,speciality,prefferedtime
42 if(validateDate(appointmentdate))
43 {
44 var appstatus =
fixappointment(patientname,appointmentdate,speciality,prefferedtime);
45 document.getElementById("result").innerHTML=appstatus;
46 }
47 else
48 document.getElementById("result").innerHTML="Please select the
current date";
49 // Invoke validateDate(appointmentdate) function and get the
returned boolean value. If its true, Invoke fixappointment function. Else
display the error message in <div> with id as result
50 // Invoke
fixappointment(patientname,appointmentdate,speciality,prefferedtime) function
and get the return value.
51 // Based on the return value display the results in div tag with id
as "result"
52 // Use document.getElementById("result").innerHTML to display
the output
53 }
54
55
56 function validateDate(appointmentdate){
57
58 //Validate the appointmentdate against current Date
59 var currentDate=new Date().getDate();
60 // If the appointmentdate is equal to current date then return
boolean true else return false
61 if(appointmentdate===currentDate)
62 return true;
63 else
64 return false;
65 }

You might also like