یک تولید کننده رمز عبور با طول قابل تنظیم.

این مثال یک تولید کننده رمز عبور ساده ایجاد می کند که با فشار دادن دکمه، یک رمز عبور تصادفی با طول مشخص شده از فرم بالا با استفاده از کاراکترهایی از مجموعه نویسه های مشخص شده ایجاد می کند.

<div class="password-generator">
<input type="text" id="passwordLength" placeholder="Password length">
<input type="text" id="password" readonly>
<button onclick="generatePassword()">Generate</button></div>

```javascript
function generatePassword() {
const length = parseInt(document.getElementById("passwordLength").value);
const charset = "abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789!@#$%^&*()_+";
const charsetLength = charset.length;
let password = [];

for (let i = 0; i < length; i++) {
const randomIndex = Math.floor(Math.random() * charsetLength);
password.push(charset[randomIndex]);
}

document.getElementById("password").value = password.join('');
}`



#css #javascript

💎 Channel: @htmlcss_channels

100+ Projects using JavaScript.👇
 
https://www.codewithrandom.com/2023/11/21/frontend-projects-source-code/
 



#پروژه
#javascript

💎 Channel: @htmlcss_channels

📒 𝗘𝗹𝗼𝗾𝘂𝗲𝗻𝘁 𝗝𝗮𝘃𝗮𝗦𝗰𝗿𝗶𝗽𝘁

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

Read online 👇
https://eloquentjavascript.net/



#javascript

💎 Channel: @htmlcss_channels

‼️ Need a roadmap for your developer journey? find it here

🔗 https://roadmap.sh

Here are 2 of the popular ones:

#Front_End:
🔗 https://roadmap.sh/frontend

#Back_End:
🔗 https://roadmap.sh/backend




#roadmap

💎 Channel: @htmlcss_channels

JavaScript Interview Questions & Challenges 2023




#javascript #interview

💎 Channel: @htmlcss_channels

🔧 CSS TIP

Typing effect

<div class="wrapper">
  <div class="typing-demo">CSS Tips for you!</div>
</div>

.typing-demo {
    width: 17ch; /* Adjust based on the length of your text /
    animation: typing 12s steps(17) infinite, blink 0.5s step-end infinite alternate;
    white-space: nowrap;
    overflow: hidden;
    border-right: 3px solid;
    font-family: monospace;
    font-size: 2rem;
}

/ Typing and erasing animation /
@keyframes typing {
    0% { width: 0; }
    35% { width: 17ch; } / 4s for typing (1/3 of 12s) /
    70% { width: 17ch; } / 5s pause (adding up to 8.4s) /
    100% { width: 0; } / 3.6s for erasing (remaining time) /
}

/ Blinking cursor animation */
@keyframes blink {
    50% { border-color: transparent; }
}

Success & Error popup

https://codepen.io/OfigenusMaximus/pen/XWooeYj


#Animation



💎 Channel: @htmlcss_channels

Animated background [Spheres]


https://codepen.io/OfigenusMaximus/pen/qBLxEdv


#animation


💎 Channel: @htmlcss_channels