جاوا اسکریپت یک زبان برنامه نویسی سطح بالا است که کارآمد و کارآمد است. جاوا اسکریپت در طول سالیان متمادی تکامل یافته است و تنها به عنوان یک زبان خوب برای فرانت اند پیشرفت کرده است.
جاوا اسکریپت می تواند برای انجام رندر سمت سرور استفاده شود و از این رو برای ساخت برنامه های فول استک استفاده می شود.
در این پروژه از HTML، CSS و جاوا اسکریپت برای ساخت یک برنامه وب تولید کننده رمز عبور استفاده می شود. این برنامه وب با این برنامه مولد رمز عبور پیوند به صورت مستقیم به کار گرفته شده است.
جدول محتویات
-
راه اندازی محیط
-
Building index.html, styles.css
-
کد جاوا اسکریپت برای تکمیل برنامه
-
تعهد پروژه به git
-
ثبت نام در Vercel با github
-
استقرار برنامه وب در vercel
راه اندازی محیط
این پروژه فقط از HTML، CSS و جاوا اسکریپت استفاده می کند.
یک پوشه با هر نام دلخواه ایجاد کنید. در لینوکس از این دستور استفاده کنید:mkdir jspassword
از دایرکتوری فعلی خود به دایرکتوری جدید با دستور زیر تغییر دهید:cd jspassword
Building Index.html و Styles.css
یک فایل جدید با نام index.html ایجاد کنید.
اگر از رابط خط فرمان (CLI) استفاده می کنید، دستور را صادر کنید:touch index.html
این فایل شامل ساختار/قاب صفحه خواهد بود.
محتوای index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Password Generator</title>
<link rel="stylesheet" href="https://dev.to/thekalderon/style.css">
</head>
<body>
<div class="box">
<h2>Password Generator</h2>
<input type="text" name="" placeholder="Create password" id="password" readonly required>
<table>
<th><div id="button" class="btn1"onclick="genPassword()">Generate</div></th>
<th><a id="button" class="btn2" onclick="copyPassword()">Copy</a></th>
</table>
</div>
<script src="https://dev.to/thekalderon/script.js"></script>
</body>
</html>
علاوه بر این، متون عنوان، دکمه ها باید به خوبی مرتب شده و سبک شوند. این افکت با فایل styles.css به دست می آید.
‘index.html’ با styles.css با خط زیر پیوند داده شده است:<link rel="stylesheet" href="https://dev.to/thekalderon/style.css">
این محتوای فایل styles.css است:
* {
margin: 0;
padding: 0;
user-select: none;
box-sizing: border-box;
}
body {
background-color: rgb(79, 75, 75);
}
.box {
background-color: rgb(176, 169, 169);
padding: 40px ;
border-radius: 30px;
box-shadow: 8px 5px 14px -1px rgb(94, 94, 94);
-webkit-box-shadow: 8px 5px 14px -1px rgba(94, 94, 94);
-moz-box-shadow: 8px 5px 14px -1px rgba(94, 94, 94);
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
overflow:hidden;
}
@media (min-width:600px) and (max-width:720px){
body{
background-color: lightseagreen;
}
.box{
height: 100vh;
width:100%;
overflow: hidden;
padding:20px;
}
}
.box h2 {
margin-bottom: 40px;
text-align: center;
font-size: 26px;
color: black;
font-family: Roboto;
}
input {
padding: 20px;
user-select: none;
height: 50px;
width: 400px;
border-radius: 6px;
border: none;
border: 2px solid black;
outline: none;
font-size: 22px;
}
input::placeholder {
font-size: 23px;
}#button {
font-family: sans-serif;
font-size: 15px;
margin-top: 40px;
width: 155px;
height: 50px;
text-align: center;
background-color: #14e5;
display: flex;
color: rgb(255, 255, 255);
justify-content: center;
align-items: center;
cursor: pointer;
border-radius: 7px;
transition: 300ms ease-in-out;
}
.btn2 {
margin-left: 85px;
}#button:hover {
color: white;
background-color: black;
}
مهمتر از همه، دکمه ها، متن های سرصفحه به خوبی به این صورت مرتب شده اند:
فایل های HTML و CSS مسئول کادربندی و طراحی/ظاهر برنامه وب بودند. به عبارت واضح تر، HTML به شالوده/ساختار یک خانه تشبیه می شود در حالی که CSS به نقاشی/زیبایی شناسی صفحه وب اشاره دارد.
کد جاوا اسکریپت برای تکمیل برنامه
جاوا اسکریپت زبانی است که منطق برنامه وب را فراهم می کند.
توابع جاوا اسکریپت مانند تابع تصادفی داخلی برای تولید رمزهای عبور مختلف در هر تکرار استفاده می شود.
یک متغیر جدید با عنوان “گذرواژه” که با کلمه کلیدی “let” اعلام شده است برای تعریف عنصر برای تعریف منطق در این پروژه استفاده خواهد شد.
در همان دایرکتوری؛
-
index.html
-
style.css
-
script.js
در اینجا ما script.js را اضافه کرده ایم.
قبلاً script.js را به فایل index.html اضافه کردیم. این قطعه این است:
<script src="https://dev.to/thekalderon/script.js"></script>
این کد script.js است:
let password = document.getElementById("password");
function genPassword() {
var chars = "0123456789abcdefghakshSNUAI2425NYfijklmnopqrstuvwxyz!@#$%^&*()ABCDEFGHIJKLMNOPQRSTUVWXYZ";
var passwordLength = 12;
var password = "";
for (var i = 0; i <= passwordLength; i++) {
var randomNumber = Math.floor(Math.random() * chars.length);
password += chars.substring(randomNumber, randomNumber + 1);
}
document.getElementById("password").value = password;
}
function copyPassword() {
var copyText = document.getElementById("password");
copyText.select();
copyText.setSelectionRange(0, 999);
}
دایرکتوری ‘jspassword’ اکنون شامل سه فایل است. index.html، styles.css و script.js.
انجام پروژه به Github
به github بروید و برای یک حساب کاربری جدید ثبت نام کنید.
یک مخزن جدید ایجاد کنید و فایل ها را با دستورات زیر به github commit کنید:git init
git add .
git commit - m "JSPASSWORD APP"
git branch -M main
git remote add origin (paste your ssh or httpS link of the git repostory you created)
git push -u origin main
فشار کامل شما به github به شکل زیر خواهد بود:
در حال استقرار به vercel
به vercel بروید و برای یک حساب کاربری با Github ثبت نام کنید.
در گوشه سمت راست بالا، یک وجود دارد اضافه کردن پروژه جدید.
آن گزینه را انتخاب کنید و حساب github خود را پیوند دهید.
مخزن git را که ایجاد کردید انتخاب کنید و مدتی منتظر بمانید.
با تشکر، شما به تازگی مستقر شده است برنامه تولید رمز عبور به تمام جهان به صورت رایگان
این یک لینک به کد منبع پروژه است.
همین است!، شما یک برنامه وب تولید کننده رمز عبور را که با جاوا اسکریپت ساخته شده است، مستقر کرده اید!
من را دنبال کنید توییتر
