مدرس دوره

مدرس دوره

نبی عبدی

مدت زمان ویدیو

زمان ویدیو

23:04 دقیقه

دیگر جلسات دوره

برو به دیگر جلسات

آموزش HTML و CSS

دانلود ویدیو

برای دانلود ویدیو

وارد شوید

نمایش و پنهان کردن رمز عبور در جاوا اسکریپت

منتشر شده در تاریخ : 1, مرداد, 1401

در این آموزش ویدیویی از سری آموزش‌های مینی پروژه جاوا اسکریپت و مینی پروژه های HTML و CSS می خواهیم یک فیلد پسورد طراحی کنیم که قابلیت نمایش و پنهان کردن رمز عبور را داشته باشد، در این پروژه از html و css و جاوا اسکریپت استفاده خواهیم کرد و البته از فونت آیکون فونت آسوم هم استفاده خواهیم کرد، پس با این آموزش جذاب همراه وبکیما باشید.

قابلیت نمایش و پنهان کردن رمز در فیلد پسورد

معمولا اگر وب سایت های خیلی معروف را دیده باشید، این سایت ها چون از برنامه نویس های حرفه‌ای در طراحی سایت خود استفاده می‌کنند، معمولا یک سری امکانات دارند که سایت های معمولی ندارند، یکی از این امکانات باحال همین قابلیت نمایش و پنهان کردن رمز در فیلد پسورد است که در این ویدیوی آموزشی قرار است که این مورد را به صورت پروژه محور یاد بگیرید.

کدهای HTML پروژه

در زیر می‌توانید کدهای html مربوط به پروژه قابلیت نمایش و پنهان کردن رمز در فیلد پسورد را مشاهده کنید.

<!DOCTYPE html>
<!-- Created By Navid Dev -->
<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>Navid Dev - Password Show-Hide Button</title>
    <link rel="stylesheet" href="style.css" />
    <link
      rel="stylesheet"
      href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css"
    />
  </head>
  <body>
    <div class="content">
      <div class="lock">
        <div class="fa fa-lock"></div>
      </div>
      <input type="password" placeholder="Enter Password" required />
      <span class="show-hide">
        <i class="fa fa-eye"></i>
      </span>
    </div>
    <script src="app.js"></script>
  </body>
</html>

کدهای CSS پروژه

در زیر می‌توانید کدهای CSS مربوط به پروژه قابلیت نمایش و پنهان کردن رمز در فیلد پسورد را مشاهده کنید.

@import url('https://fonts.googleapis.com/css?family=Poppins:400,500,600&display=swap');

* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}
body {
  background: #d8efff;
  display: flex;
  min-height: 100vh;
  align-items: center;
  justify-content: center;
  text-align: center;
}
.content {
  height: 50px;
  width: 280px;
  display: flex;
  position: relative;
  transition: transform 0.3s ease-in-out;
  overflow: hidden;
}
.lock {
  position: absolute;
  height: 50px;
  width: 50px;
  background: #48b3fb;
  color: #fff;
  line-height: 48px;
  font-size: 20px;
  border-radius: 3px 0 0 3px;
  border: 1px solid #48b3fb;
}
input {
  background: #f9fdff;
  height: 100%;
  width: 100%;
  border-radius: 3px;
  border: 1px solid #48b3fb;
  padding-left: 60px;
  outline: none;
  color: #48b3fb;
  font-family: 'Poppins', sans-serif;
  transition: all 0.2s ease;
}
input:focus {
  background: #fff;
  box-shadow: 0 0 0 4px #48b3fb69;
}
.show-hide {
  position: absolute;
  right: 15px;
  top: 50%;
  transform: translateY(-50%);
}
.show-hide i {
  font-size: 19px;
  color: #48b3fb;
  cursor: pointer;
  transform: translateX(200%);
  transition: transform 0.3s ease-in-out;
}
.show-hide i.hide::before {
  content: '\f070';
}
input:valid ~ .show-hide i {
  transform: translateX(0);
}
/* Responsive */
@media screen and (max-width: 768px) {
  .content {
    transform: scale(0.8);
  }
}

کدهای جاوا اسکریپت پروژه

در زیر می‌توانید کدهای جاوا اسکریپت مربوط به پروژه قابلیت نمایش و پنهان کردن رمز در فیلد پسورد را مشاهده کنید.

const passField = document.querySelector('input'),
  showBtn = document.querySelector('i');

showBtn.addEventListener('click', () => {
  if (passField.type === 'password') {
    passField.type = 'text';
    showBtn.classList.add('hide');
  } else {
    passField.type = 'password';
    showBtn.classList.remove('hide');
  }
});

جمع بندی

در انتها امیدواریم که آموزش نحوه نمایش و پنهان کردن رمز عبور در فیلد پسورد در جاوا اسکریپت را یاد گرفته باشید، اگر سوالی در رابطه با این آموزش دارید در انتهای همین جلسه و در بخش کامنت ها با ما در ارتباط باشید.

به این محتوا امتیاز دهید

دیدگاهتان را بنویسید

نشانی ایمیل شما منتشر نخواهد شد.

تا 90 درصد تخفیف روی تمامی دوره‌های سایت 😍 به مدت محدود...برو به جشنواره
+