مدرس دوره

نبی عبدی

زمان ویدیو

27:29 دقیقه

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

آموزش HTML و CSS

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

وارد شوید

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

منتشر شده در تاریخ : 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 =
  '[email protected]#$%^&*()_+~`|}{[]:;?><,./-=';

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 امتیاز)

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

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *

فروش ویژه نوروز... تا 85 درصد تخفیف روی تمامی دوره‌ها...تخفیف‌تو بگیر!
+
آموزش‌های ویدیویی جدید فقط در یوتیوب