১৮-৭ : Modal এর ব্যবহার
এই মডিউলে ডক্টর ডিটেইলস পেজে Take Appointment বাটনে ক্লিক করলে একটি মোডাল শো করার কাজ করা হবে।
docDetails.js ফাইল নিচের মত করে লিখে ফেলি-
Code:: 18.7.1 docDetails.js
const getparams = () => {
const param = new URLSearchParams(window.location.search).get("doctorId");
loadTime(param);
fetch(`https://testing-8az5.onrender.com/doctor/list/${param}`)
.then((res) => res.json())
.then((data) => displayDetails(data));
fetch(`https://testing-8az5.onrender.com/doctor/review/?doctor_id=${param}`)
.then((res) => res.json())
.then((data) => doctorReview(data));
};
const doctorReview = (reviews) => {
reviews.forEach((review) => {
const parent = document.getElementById("doc-details-review");
const div = document.createElement("div");
div.classList.add("review-card");
div.innerHTML = `
<img src="./Images/girl.png" alt="" />
<h4>${review.reviewer}</h4>
<p>
${review.body.slice(0, 100)}
</p>
<h6>${review.rating}</h6>
`;
parent.appendChild(div);
});
};
const displayDetails = (doctor) => {
console.log(doctor);
const parent = document.getElementById("doc-details");
const div = document.createElement("div");
div.classList.add("doc-details-container");
div.innerHTML = `
<div class="doctor-img">
<img src=${doctor.image} alt="" />
</div>
<div class="doc-info">
<h1>${doctor.full_name} </h1>
${doctor.specialization.map((item) => {
return `<button class="doc-detail-btn">${item}</button>`;
})}
${doctor.designation.map((item) => {
return `<h4 >${item}</h4>`;
})}
<p class="w-50">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Et quibusdam
quis excepturi tempore. Eius, qui!
</p>
<h4>Fees: ${doctor.fee} BDT</h4>
<button
type="button"
class="btn btn-primary"
data-bs-toggle="modal"
data-bs-target="#exampleModal"
>
Take Appointment
</button>
</div>
`;
parent.appendChild(div);
};
getparams();
HTML ফাইলে মোডাল এ্যাড করে নিচের মত লিখি-
Code:: 18.1.2 docDetails.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" />
<title>Detail</title>
<link
href="https://cdn.jsdelivr.net/npm/bootstrap@5/dist/css/bootstrap.min.css"
rel="stylesheet"
integrity="..."
/>
<link
href="https://cdn.jsdelivr.net/npm/swiffy-slider@1.6.0/dist/css/swiffy-slider.min.css"
rel="stylesheet"
crossorigin="anonymous"
/>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<nav class="d-flex justify-content-around align-items-center p-4">
<div class="logo-container d-flex align-items-center gap-2">
<img src="./Images/stethoscope 1.png" alt="" />
<h3>SmartCare</h3>
</div>
<div class="menu-container d-flex gap-3">
<li class="menu">Home</li>
<li class="menu">Services</li>
<li class="menu">Contact us</li>
<li class="menu">Login</li>
</div>
</nav>
<div id="doc-details"></div>
<div class="review-container p-5 mt-5 w-75 m-auto">
<h1 class="title">Clients Review</h1>
<p class="description text-center w-50 m-auto">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Adipisci
<br />
quis sit, aperiam deserunt at accusamus!
</p>
<div class="reviews">
<div
class="swiffy-slider slider-item-show2 slider-item-reveal slider-nav-outside slider-nav-round slider-nav-visible slider-indicators-outside slider-indicators-round slider-indicators-dark slider-nav-animation slider-nav-animation-fadein slider-item-first-visible"
>
<ul id="doc-details-review" class="slider-container py-4"></ul>
<button
type="button"
class="slider-nav"
aria-label="Go left"
></button>
<button
type="button"
class="slider-nav slider-nav-next"
aria-label="Go left"
></button>
<div class="slider-indicators">
<button class="active" aria-label="Go to slide"></button>
<button aria-label="Go to slide"></button>
<button aria-label="Go to slide"></button>
<button aria-label="Go to slide"></button>
<button aria-label="Go to slide" class=""></button>
</div>
</div>
</div>
</div>
<!-- modal area -->
<!-- Button trigger modal -->
<!-- Modal -->
<div
class="modal fade"
id="exampleModal"
tabindex="-1"
aria-labelledby="exampleModalLabel"
aria-hidden="true"
>
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">Submit Your Info</h5>
<button
type="button"
class="btn-close"
data-bs-dismiss="modal"
aria-label="Close"
></button>
</div>
<div class="modal-body">
<input type="radio" name="status" value="Offline" /> Offline
<input type="radio" name="status" value="Online" /> Online<br />
<input id="symptom" type="text" placeholder="Type Your symptom" />
<br />
<select id="time-container" class="p-2 mt-2" id="time" name="time">
<!-- <option value="none" selected>available Time</option>
<option value="male">Male</option>
<option value="female">Female</option>
<option value="other">other</option> -->
</select>
</div>
<div class="modal-footer">
<button
type="button"
class="btn btn-secondary"
data-bs-dismiss="modal"
>
Close
</button>
<button
onclick="handleAppointment()"
type="button"
class="btn btn-primary"
>
Take Appointment
</button>
</div>
</div>
</div>
</div>
<button onclick="handlePdf()">dddd</button>
<footer class="p-5">
<div class="container w-75 m-auto row p-5">
<div class="col-md-6">
<p><small>Copyright © Smartcare. All Rights Reserved</small></p>
<h5>Follow US</h5>
<div class="icons">
<img class="icon" src="./Images/LinkedIn.png" alt="" />
<img class="icon" src="./Images/YouTube.png" alt="" />
<img class="icon" src="./Images/LinkedIn.png" alt="" />
</div>
</div>
<div class="col-md-3">
<h5>Company</h5>
<li>ABout</li>
<li>Contact us</li>
<li>Culture</li>
<li>Blog</li>
</div>
<div class="col-md-3">
<h5>Company</h5>
<li>ABout</li>
<li>Contact us</li>
<li>Culture</li>
<li>Blog</li>
</div>
</div>
<hr />
<p class="text-center mt-3">
<small>Copyright © Smartcare. All Rights Reserved</small>
</p>
</footer>
<!-- add script file -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/html2pdf.js/0.9.3/html2pdf.bundle.js"></script>
<script src="./app.js"></script>
<script src="./docDetails.js"></script>
<script
src="https://cdn.jsdelivr.net/npm/bootstrap@5/dist/js/bootstrap.bundle.min.js"
integrity="..."
></script>
<script
src="https://cdn.jsdelivr.net/npm/swiffy-slider@1.6.0/dist/js/swiffy-slider.min.js"
crossorigin="anonymous"
defer
></script>
</body>
</html>Take Appointment বাটনে ক্লিক করলে মোডালটি দেখা যাবে।
.
Last updated