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

منتشر شده در تاریخ : 11 مرداد 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 - Random Password Generator</title>
    <!-- Add Font Awesome -->
    <link
      rel="stylesheet"
      href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.2/css/all.min.css"
      integrity="sha512-1sCRPdkRXhBV2PBLUdRb4tMg1w2YPf37qatUFeS7zlBy7jJI8Lf4VHwWfZZfpXtYSLy85pkm9GaYVYMfw5BC1A=="
      crossorigin="anonymous"
      referrerpolicy="no-referrer"
    />
    <link rel="stylesheet" href="style.css" />
  </head>
  <body>
    <div class="container">
      <h1 class="text">Navid Dev<br />Random Password Generator</h1>
      <div class="input-data">
        <div class="display">
          <input
            type="text"
            placeholder="Click on the button to generate random password"
          />
          <span class="copy far fa-copy"></span>
          <span class="copy fas fa-copy"></span>
        </div>
        <button>Generate Password</button>
      </div>
    </div>
    <script src="script.js"></script>
  </body>
</html>

کدهای CSS پروژه

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

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

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
html,
body {
  display: grid;
  height: 100%;
  place-items: center;
  background: #e2ecfc;
  text-align: center;
  font-family: 'Poppins', sans-serif;
}
.container {
  width: 600px;
  background: #fff;
  padding: 50px;
}
.text {
  color: #003c9b;
  font-weight: 600;
  font-size: 26px;
  line-height: 35px;
}

.input-data {
  margin-top: 30px;
}
.display {
  height: 55px;
  width: 100%;
  display: flex;
  position: relative;
  overflow: hidden;
}
.display input {
  height: 100%;
  width: 100%;
  outline: none;
  border: none;
  background: #e2ecfc;
  color: #003a98;
  padding: 10px;
  font-size: 18px;
  pointer-events: none;
  user-select: none;
  position: relative;
}
.display input::placeholder {
  text-align: center;
  color: #003a98;
}
.display span {
  position: absolute;
  right: 15px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 25px;
  color: #0062ff;
  z-index: 9;
  display: none;
  cursor: pointer;
}
.input-data button {
  height: 55px;
  width: 100%;
  margin-top: 20px;
  border: none;
  outline: none;
  background: #0062ff;
  color: #fff;
  font-size: 18px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 1px;
  cursor: pointer;
  transition: all 0.3s ease;
}
.input-data button:hover {
  background: #003a98;
}
/* Responsive */
@media screen and (max-width: 768px) {
  .container {
    width: 400px;
    padding: 20px;
  }
  .text {
    font-size: 20px;
    line-height: 28px;
  }
  .display input {
    font-size: 15px;
  }
}

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

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

const input = document.querySelector('input'),
  button = document.querySelector('button'),
  copyBtn = document.querySelector('span.far'),
  copy = document.querySelector('.copy'),
  copyActive = document.querySelector('span.fas');

let chars =
  'abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789!@#$%^&*()_+~`|}{[]:;?><,./-=';

button.onclick = () => {
  let i,
    randomPassword = '';
  copyBtn.style.display = 'block';
  copyActive.style.display = 'none';
  for (i = 0; i < 16; i++) {
    randomPassword =
      randomPassword + chars.charAt(Math.floor(Math.random() * chars.length));
  }
  input.value = randomPassword;
};

copy.onclick = () => {
  copyBtn.style.display = 'none';
  copyActive.style.display = 'block';
  input.select();
  navigator.clipboard.writeText(input.value);
};

جمع بندی

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

5/5 - (1 امتیاز)

آموزش طراحی فرم لاگین با HTML و CSS

اسلایدر کارت وبلاگ متحرک با HTML و CSS

آموزش ساخت ساعت دیجیتال در جاوا اسکریپت

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

ساخت منوی بازشو در HTML CSS و جاوا اسکریپت