১৯-৪ : user ডিটেইলস -১
এই মডিউলে আমরা একজন ইউজারের ডিটেইলস দেখানোর জন্য HTML page ডিজাইন করব।
শুরুতেই ন্যাভবারে Profile Dropdown তৈরি করে ফেলি-
Code:: 19.4.1 index.html
...
...
...
<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"><a href="index.html"></a></li>
<li class="menu">Services</li>
<li class="menu">Contact us</li>
<li class="menu"><a target="_blank" href="login.html">Login</a></li>
<div class="dropdown">
<button
class="btn btn-secondary dropdown-toggle"
type="button"
id="dropdownMenuButton2"
data-bs-toggle="dropdown"
aria-expanded="false"
>
profile
</button>
<ul
class="dropdown-menu dropdown-menu-dark"
aria-labelledby="dropdownMenuButton2"
>
<li>
<a class="dropdown-item active" href="userDetails.html"
>profile</a
>
</li>
<li>
<a class="dropdown-item" href="allAppointments.html"
>all Appointment</a
>
</li>
<li onclick="handlelogOut()">
<a class="dropdown-item">logout</a>
</li>
</ul>
</div>
</div>
</nav>
...
...
...Dropdown এ All Appointment অপশন রয়েছে, allAppointments.html ফাইল ক্রিয়েট করে ফেলি-
Code:: 19.4.2 allAppointments.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>All Appointments</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" />
<link rel="stylesheet" href="login.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"><a href="index.html"></a></li>
<li class="menu">Services</li>
<li class="menu">Contact us</li>
<div class="dropdown">
<button
class="btn btn-secondary dropdown-toggle"
type="button"
id="dropdownMenuButton2"
data-bs-toggle="dropdown"
aria-expanded="false"
>
profile
</button>
<ul
class="dropdown-menu dropdown-menu-dark"
aria-labelledby="dropdownMenuButton2"
>
<li>
<a class="dropdown-item active" href="userDetails.html"
>profile</a
>
</li>
<li><a class="dropdown-item" href="#">all Appointment</a></li>
<li><a class="dropdown-item" href="#">logout</a></li>
</ul>
</div>
</div>
</nav>
<div class="all-appointment-container">
<table class="table">
<thead>
<tr>
<th>ID</th>
<th>symptom</th>
<th>type</th>
<th>status</th>
<th>doctor</th>
<th>fees</th>
<th>action</th>
</tr>
</thead>
<tbody id="table-body">
</tbody>
</table>
</div>
<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>
<!-- script tag from here -->
<script src="./app.js"></script>
<script src="./auth.js"></script>
<script src="./docDetails.js"></script>
<script src="./allAppointment.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>ইউজারের প্রোফাইল দেখার জন্য userDetails.html ও userDetails,js ফাইল ক্রিয়েট করে ফেলি-
Code:: 19.4.4 userDetails.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>user Details</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" />
<link rel="stylesheet" href="login.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"><a href="index.html"></a></li>
<li class="menu">Services</li>
<li class="menu">Contact us</li>
<div class="dropdown">
<button
class="btn btn-secondary dropdown-toggle"
type="button"
id="dropdownMenuButton2"
data-bs-toggle="dropdown"
aria-expanded="false"
>
profile
</button>
<ul
class="dropdown-menu dropdown-menu-dark"
aria-labelledby="dropdownMenuButton2"
>
<li><a class="dropdown-item active" href="#">profile</a></li>
<li>
<a class="dropdown-item" href="allAppointments.html"
>all Appointment</a
>
</li>
<li><a class="dropdown-item" href="#">logout</a></li>
</ul>
</div>
</div>
</nav>
<div
id="user-detais-container"
class="user-detais-container d-flex justify-content-around align-items-center gap-5"
>
</div>
<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>
<!-- script tag from here -->
<script src="./app.js"></script>
<script src="./auth.js"></script>
<script src="./docDetails.js"></script>
<script src="./userDetails.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>
Code:: 19.4.5 userDetails.js
const loadUserDetails = () => {
const user_id = localStorage.getItem("user_id");
fetch(`https://testing-8az5.onrender.com/users/${user_id}`)
.then((res) => res.json())
.then((data) => {
const parent = document.getElementById("user-detais-container");
const div = document.createElement("user-all");
div.classList.add("user-all");
div.innerHTML = `
<div class="user-img">
<img src="./Images/man-1.jpg" alt="" />
</div>
<div class="user-info">
<h1>${data.username}</h1>
<h3>${data.first_name + data.last_name}</h3>
<h3>${data.email}</h3>
</div>
`;
parent.appendChild(div);
});
};
loadUserDetails();style.css ফাইলে নিচের ক্লাসগুলো এ্যাড করে ফেলি -
Code:: 18.4.6 style.css
...
...
...
.user-detais-container{
height: 100vh;
width: 75%;
margin: auto;
}
.user-img img{
width: 200px;
height: 200px;
border-radius:100px;
}
.user-all{
display: flex;
justify-content: center;
align-items: center;
gap: 50px;
}
.all-appointment-container{
width: 90%;
margin: auto;
height: 100vh;
}
.
Last updated
