১৯-৪ : 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;
}

Previous১৯-৩ : লগ-ইন ও রেজিস্ট্রেশন Next১৯-৫ : user ডিটেইলস -২

Last updated 2 years ago

<!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 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>

<!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 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>