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

ইউজারের প্রোফাইল দেখার জন্য userDetails.html ও userDetails,js ফাইল ক্রিয়েট করে ফেলি-

Code:: 19.4.4 userDetails.html

Code:: 19.4.5 userDetails.js

style.css ফাইলে নিচের ক্লাসগুলো এ্যাড করে ফেলি -

Code:: 18.4.6 style.css

.

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

Last updated