Skip to content

Commit

Permalink
Merge pull request #184 from bhumika-1127/appointment
Browse files Browse the repository at this point in the history
appointment page
  • Loading branch information
Anishka Gupta authored May 19, 2024
2 parents 4df6e5a + 0c96988 commit 0274ff3
Show file tree
Hide file tree
Showing 4 changed files with 261 additions and 13 deletions.
104 changes: 104 additions & 0 deletions Html-Files/Css-Files/appointStyle.css
Original file line number Diff line number Diff line change
@@ -0,0 +1,104 @@
body {
margin: 0;
padding: 0;
background-color: #f9f9f9;
}

header {
background-color: #007074d5;
color: white;
padding: 15px;
text-align: center;
}

header .logo {
font-size: 24px;
font-weight: bold;
}

main {
padding: 20px;
}

h1 {
color: #333;
}

form {
background: white;
padding: 20px;
border-radius: 5px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}

.form-section {
margin-bottom: 20px;
}

label {
display: block;
margin-bottom: 5px;
}

input[type="text"],
input[type="email"],
input[type="tel"],
input[type="date"],
textarea,
select {
width: 100%;
padding: 10px;
margin-bottom: 10px;
border: 1px solid #ccc;
border-radius: 4px;
}

textarea {
height: 100px;
}

button {
background-color: #007074d5;
color: white;
padding: 15px 20px;
border: none;
border-radius: 4px;
cursor: pointer;
font-size: 16px;
}

button:hover {
background-color: #3fbcc0a4;
}

.contact-info-doc {
padding: 20px;
background-color: #f1f1f1;
margin-top: 20px;
border-radius: 5px;
}

footer {
background-color: #333;
color: white;
text-align: center;
padding: 10px 0;
width: 100%;
bottom: 0;
}

footer ul {
list-style-type: none;
padding: 0;
margin: 0;
}

footer ul li {
display: inline;
margin: 0 15px;
}

footer ul li a {
color: white;
text-decoration: none;
}
50 changes: 50 additions & 0 deletions Html-Files/appointScript.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,50 @@
document.addEventListener("DOMContentLoaded", function() {
const existingPatientCheckbox = document.getElementById('existing-patient');
const patientIdInput = document.getElementById('patient-id');
const appointmentForm = document.getElementById('appointment-form');
const previewSection = document.getElementById('preview-section');
const previewDetails = document.getElementById('preview-details');
const doctorSelect = document.getElementById('doctor-select');
const appointmentDate = document.getElementById('appointment-date');
const timeSlotsDiv = document.getElementById('time-slots');

existingPatientCheckbox.addEventListener('change', function() {
if (this.checked) {
patientIdInput.style.display = 'block';
} else {
patientIdInput.style.display = 'none';
}
});

window.previewAppointment = function() {
const formData = new FormData(appointmentForm);

let details = `
<strong>Doctor:</strong> ${formData.get('doctor')}<br>
<strong>Date:</strong> ${formData.get('date')}<br>
<strong>Time:</strong> ${formData.get('time-slot')}<br>
<strong>Name:</strong> ${formData.get('full-name')}<br>
<strong>Date of Birth:</strong> ${formData.get('dob')}<br>
<strong>Email:</strong> ${formData.get('email')}<br>
<strong>Phone:</strong> ${formData.get('phone')}<br>
<strong>Reason for Visit:</strong> ${formData.get('reason')}<br>
<strong>Existing Patient:</strong> ${formData.get('existing-patient') ? 'Yes' : 'No'}<br>
<strong>Patient ID:</strong> ${formData.get('patient-id')}
`;
previewDetails.innerHTML = details;
previewSection.style.display = 'block';
appointmentForm.style.display = 'none';
};

window.confirmAppointment = function() {
alert('Submitted successfully');
appointmentForm.reset();
previewSection.style.display = 'none';
appointmentForm.style.display = 'block';
};

window.editAppointment = function() {
previewSection.style.display = 'none';
appointmentForm.style.display = 'block';
};
});
94 changes: 94 additions & 0 deletions Html-Files/appointment.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,94 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Book an Appointment</title>
<link rel="stylesheet" href="./Css-Files/appointStyle.css">
</head>
<body>
<header>
<div class="logo">Doctor's Clinic</div>
</header>

<main>
<h1>Book an Appointment</h1>
<p>Schedule your visit with our expert doctors easily.</p>

<form id="appointment-form">
<div class="form-section">
<label for="doctor-select">Select a Doctor:</label>
<select id="doctor-select" name="doctor">
<option value="doctor1">Dr. Vikas Chopra - Cardiologist</option>
<option value="doctor2">Dr. Ajay Aggarwal - Cardiologist</option>
<option value="doctor3">Dr. Soni Gupta - Dermatologist</option>
<option value="doctor4">Dr. Jayant Jaswal - ENT Specialist</option>

</select>
</div>

<div class="form-section">
<label for="appointment-date">Choose a Date:</label>
<input type="date" id="appointment-date" name="date" required>
</div>

<div class="form-section">
<label for="time-slot">Select a Time:</label>
<select id="time-slot" name="time-slot" required>
<option value="10:00 AM">10:00 AM</option>
<option value="11:00 AM">11:00 AM</option>
<option value="12:00 PM">12:00 PM</option>
<option value="01:00 PM">01:00 PM</option>
<option value="04:00 PM">04:00 PM</option>
</select>
</div>

<div class="form-section">
<label for="full-name">Full Name:</label>
<input type="text" id="full-name" name="full-name" required>

<label for="dob">Date of Birth:</label>
<input type="date" id="dob" name="dob" required>

<label for="email">Email Address:</label>
<input type="email" id="email" name="email" required>

<label for="phone">Phone Number:</label>
<input type="tel" id="phone" name="phone" required>

<label for="reason">Reason for Visit:</label>
<textarea id="reason" name="reason"></textarea>

<label>
<input type="checkbox" name="existing-patient" id="existing-patient">
Existing Patient
</label>
<input type="text" id="patient-id" name="patient-id" placeholder="Patient ID" style="display:none;">
</div>

<button type="button" onclick="previewAppointment()">Preview Appointment</button>
</form>

<div id="preview-section" style="display:none;">
<h2>Preview Appointment Details</h2>
<p id="preview-details"></p>
<button type="button" onclick="confirmAppointment()">Submit</button>
<button type="button" onclick="editAppointment()">Edit</button>
</div>
</main>

<div class="contact-info-doc">
<h2>Doctor's Contact Information</h2>
<p>123 Clinic Street, MediCity</p>
<p>Phone: +91 1234567890</p>
<p>Email: [email protected]</p>
</div>

<footer>
<p>&copy; 2024 Doctor's Clinic</p>
<p>Opening Hours: Mon-Fri 10:00am - 5:00pm</p>
</footer>

<script src="appointScript.js"></script>
</body>
</html>
26 changes: 13 additions & 13 deletions Html-Files/doc.html
Original file line number Diff line number Diff line change
Expand Up @@ -48,7 +48,7 @@ <h1><a href="#">RapiDoc</a></h1>

<button class="button home-button" onclick="window.location.href='/index.html'">Return Home</button>

<div class="slide-container swiper">
<div class="slide-container swiper">
<div class="slide-content">
<div class="card-wrapper swiper-wrapper">
<div class="card swiper-slide">
Expand All @@ -61,7 +61,7 @@ <h1><a href="#">RapiDoc</a></h1>
<div class="card-content">
<h2 class="name">Dr. Satbir Singh</h2>
<p class="discription">Cardiologist</p>
<button class="button">Make an Appointment</button>
<a href="appointment.html"><button class="button">Make an Appointment</button></a>
</div>
</div>
<div class="card swiper-slide">
Expand All @@ -74,7 +74,7 @@ <h2 class="name">Dr. Satbir Singh</h2>
<div class="card-content">
<h2 class="name">Dr. Vikas Chopra</h2>
<p class="discription">Cardiologist</p>
<button class="button">Make an Appointment</button>
<a href="appointment.html"><button class="button">Make an Appointment</button></a>
</div>
</div>
<div class="card swiper-slide">
Expand All @@ -87,7 +87,7 @@ <h2 class="name">Dr. Vikas Chopra</h2>
<div class="card-content">
<h2 class="name">Dr. Ajay Aggarwal</h2>
<p class="discription">Cardiologist</p>
<button class="button">Make an Appointment</button>
<a href="appointment.html"><button class="button">Make an Appointment</button></a>
</div>
</div>
<div class="card swiper-slide">
Expand All @@ -100,7 +100,7 @@ <h2 class="name">Dr. Ajay Aggarwal</h2>
<div class="card-content">
<h2 class="name">Dr. Rajeev Kumar Rajput</h2>
<p class="discription">Cardiologist</p>
<button class="button">Make an Appointment</button>
<a href="appointment.html"><button class="button">Make an Appointment</button></a>
</div>
</div>
<div class="card swiper-slide">
Expand All @@ -113,7 +113,7 @@ <h2 class="name">Dr. Rajeev Kumar Rajput</h2>
<div class="card-content">
<h2 class="name">Dr. Nityanand Tripathi</h2>
<p class="discription">Cardiologist</p>
<button class="button">Make an Appointment</button>
<a href="appointment.html"><button class="button">Make an Appointment</button></a>
</div>
</div>
<div class="card swiper-slide">
Expand All @@ -126,7 +126,7 @@ <h2 class="name">Dr. Nityanand Tripathi</h2>
<div class="card-content">
<h2 class="name">Dr. Soni Gupta</h2>
<p class="discription">Dermatologist</p>
<button class="button">Make an Appointment</button>
<a href="appointment.html"><button class="button">Make an Appointment</button></a>
</div>
</div>
<div class="card swiper-slide">
Expand All @@ -139,7 +139,7 @@ <h2 class="name">Dr. Soni Gupta</h2>
<div class="card-content">
<h2 class="name">Dr. Ranjan Upadhyay</h2>
<p class="discription">Dermatologist</p>
<button class="button">Make an Appointment</button>
<a href="appointment.html"><button class="button">Make an Appointment</button></a>
</div>
</div>
<div class="card swiper-slide">
Expand All @@ -152,7 +152,7 @@ <h2 class="name">Dr. Ranjan Upadhyay</h2>
<div class="card-content">
<h2 class="name">Dr. Deepti Shrivastava</h2>
<p class="discription">Dermatologist</p>
<button class="button">Make an Appointment</button>
<a href="appointment.html"><button class="button">Make an Appointment</button></a>
</div>
</div>
<div class="card swiper-slide">
Expand All @@ -165,7 +165,7 @@ <h2 class="name">Dr. Deepti Shrivastava</h2>
<div class="card-content">
<h2 class="name">Dr. Manisha Chopra</h2>
<p class="discription">Dermatologist</p>
<button class="button">Make an Appointment</button>
<a href="appointment.html"><button class="button">Make an Appointment</button></a>
</div>
</div>
<div class="card swiper-slide">
Expand All @@ -178,7 +178,7 @@ <h2 class="name">Dr. Manisha Chopra</h2>
<div class="card-content">
<h2 class="name">Dr. Pradeep Bansal</h2>
<p class="discription">Dermatologist</p>
<button class="button">Make an Appointment</button>
<a href="appointment.html"><button class="button">Make an Appointment</button></a>
</div>
</div>
<div class="card swiper-slide">
Expand All @@ -191,7 +191,7 @@ <h2 class="name">Dr. Pradeep Bansal</h2>
<div class="card-content">
<h2 class="name">Dr. Jayant Jaswal</h2>
<p class="discription">Ear-nose-throat (ENT)</p>
<button class="button">Make an Appointment</button>
<a href="appointment.html"><button class="button">Make an Appointment</button></a>
</div>
</div>
<div class="card swiper-slide">
Expand All @@ -204,7 +204,7 @@ <h2 class="name">Dr. Jayant Jaswal</h2>
<div class="card-content">
<h2 class="name">Dr. Vibhuti</h2>
<p class="discription">Ear-nose-throat (ENT)</p>
<button class="button">Make an Appointment</button>
<a href="appointment.html"><button class="button">Make an Appointment</button></a>
</div>
</div>
</div>
Expand Down

0 comments on commit 0274ff3

Please sign in to comment.