shndev
Javascript ile Basit Bir Şifre Üretici – Güvenli Şifrelerin Anahtarı
Güçlü şifreler, dijital güvenliğimizin temel taşlarından biri. Basit ve güvenli bir şifre üretmek için neden kendi aracımızı yazmayalım? GitHub profilim için hazırladığım şifre üretici projesi, rastgele şifreler üretmenizi sağlayarak bu ihtiyaca cevap veriyor.
Canlı Önizleme
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="css/style.css">
</head>
<body>
<div class="all">
<div class="container">
<div class="disable-selection title">Password Generator</div>
<div class="disable-selection description">Instantly create a secure, random password.</div>
<div class="generator-area">
<div class="options">
<div class="disable-selection password-length">
<div class="length-title">Length</div>
<input type="range" min="1" max="50" value="16" class="slider" id="length-range">
<div id="length-value" class="length-value">16</div>
</div>
<div class="disable-selection password-options">
<input type="checkbox" id="uppercase" name="uppercase" value="Uppercase Letters">
<label for="uppercase"> Uppercase Letters</label><br>
<input type="checkbox" id="lowercase" name="lowercase" value="Uppercase Letters">
<label for="lowercase"> Lowercase Letters</label><br>
<input type="checkbox" id="numbers" name="numbers" value="Numbers">
<label for="numbers"> Numbers</label><br>
<input type="checkbox" id="symbols" name="symbols" value="Symbols">
<label for="symbols"> Symbols</label><br>
</div>
</div>
<div class="generated-password">
<div class="disable-selection title">Generated Password</div>
<input value="Waiting for generation..." readonly type="text" name="Generated Password" class="generated" id="generated-password">
</div>
<div onclick="generate()" class="disable-selection generate-button">Generate</div>
<div onclick="copy()" id="copy-button" class="copy-button">Copy</div>
<div class="credit">Made with ❤️ by <a target="_blank" href="https://github.com/shndevdotpy">shndev</a></div>
</div>
</div>
</div>
<script src="js/app.js"></script>
</body>
</html>CSS
@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap');
*{
transition: 0.2s all;
}
body{
font-family: "Montserrat", sans-serif;
}
.slider {
-webkit-appearance: none;
appearance: none;
width: 100px;
height: 10px;
background: #ccc;
outline: none;
opacity: 0.8;
margin-top: 10px;
border-radius: 100px;
-webkit-transition: .2s;
transition: opacity .2s;
}
.slider:hover {
opacity: 1;
}
.slider::-webkit-slider-thumb {
-webkit-appearance: none;
appearance: none;
width: 20px;
height: 20px;
background: #005CC8;
cursor: pointer;
border-radius: 20px;
}
.all{
width: 510px;
height: 380px;
margin: auto;
margin-top: 25vh;
}
.container{
background-color: #e3e3e3;
width: 500px;
height: 375px;
padding: 20px;
box-shadow: rgba(50, 50, 93, 0.25) 0px 50px 100px -20px, rgba(0, 0, 0, 0.3) 0px 30px 60px -30px;
border-radius: 20px;
}
.container .title{
font-size: 25px;
font-weight: 600;
text-align: center;
}
.container .description{
font-size: 16px;
font-weight: 400;
text-align: center;
margin-bottom: 20px;
}
.password-length{
float: left;
text-align: center;
margin: 10px;
margin-left: 75px;
}
.password-options{
margin-left: 250px;
padding-top: 10px;
}
.length-value{
margin-bottom: 10px;
margin: auto;
margin-top: 10px;
background-color: #005CC8;
width: max-content;
padding: 5px 10px;
border-radius: 100px;
font-weight: bold;
color: #fff;
}
.generated-password{
margin-top: 30px;
}
.generated{
min-width: 450px;
height: 20px;
background-color: #ccc;
font-weight: lighter;
font-size: 18px;
border: none;
padding: 5px 10px;
border-radius: 10px;
text-align: center;
margin-top: 10px;
margin-bottom: 20px;
margin-left: 2.5vh;
}
.generate-button{
background-color: #005CC8;
width: 100px;
height: 20px;
text-align: center;
color: #fff;
font-size: 20px;
font-weight: bolder;
padding: 15px;
border-radius: 100px;
display: flex;
justify-content: center;
margin-left: 16vh;
opacity: 0.7;
transition: opacity 0.2s;
float: left;
}
.generate-button:hover{
opacity: 1;
cursor: pointer;
}
.copy-button{
background-color: #5d00c8;
width: 60px;
height: 20px;
text-align: center;
color: #fff;
font-size: 20px;
font-weight: bolder;
padding: 15px;
border-radius: 100px;
display: flex;
justify-content: center;
margin-left: 35vh;
opacity: 0.7;
transition: opacity 0.2s;
}
.copy-button:hover{
opacity: 1;
cursor: pointer;
}
.disable-selection {
-webkit-user-select: none; /* Safari */
-ms-user-select: none; /* IE 10 and IE 11 */
user-select: none; /* Standard syntax */
}
.credit{
text-align: center;
margin: 20px;
font-weight: 300;
}
.credit a{
text-decoration: none;
color: #f00;
}Javascript
let passwordLength = 16;
let uppercase = false;
let uppercaseChecker = document.getElementById("uppercase");
let lowercase = false;
let lowercaseChecker = document.getElementById("lowercase");
let numbers = false;
let numbersChecker = document.getElementById("numbers");
let symbols = false;
let symbolsChecker = document.getElementById("symbols");
let generatedPassword = "";
let range = document.getElementById("length-range")
let rangeValue = 16;
let lengthPreview = document.getElementById("length-value")
const uppercaseChars = ["A", "B", "C", "D", "E", "F", "G", "H", "I", "J", "K", "L", "M", "N", "O", "P", "Q", "R", "S", "T", "U", "V", "W", "X", "Y", "Z"];
const lowercaseChars = ["a", "b", "c", "d", "e", "f", "g", "h", "i", "j", "k", "l", "m", "n", "o", "p", "q", "r", "s", "t", "u", "v", "w", "x", "y", "z"];
const numbersChars = ["0", "1", "2", "3", "4", "5", "6", "7", "8", "9", "0", "1", "2", "3", "4", "5", "6", "7", "8", "9", "0", "1", "2", "3", "4"];
const symbolsChars = ["!", "@", "#", "$", "%", "^", "&", "*", "(", ")", "-", "_", "=", "+", "[", "]", "{", "}", "|", ";", ":", ",", ".", "<", ">", "?"];
function random(x){
Math.floor(Math.random() * x + 1);
}
function mix(str) {
let arr = str.split('');
for (let i = arr.length - 1; i > 0; i--) {
let j = Math.floor(Math.random() * (i + 1));
[arr[i], arr[j]] = [arr[j], arr[i]];
}
return arr.join('');
}
function generate(){
generatedPassword = "";
passwordLength = rangeValue;
if (uppercaseChecker.checked){
for (let i=0;i<25;i++){
generatedPassword += uppercaseChars[i]
}
}
if (lowercaseChecker.checked){
for (let i=0;i<25;i++){
generatedPassword += lowercaseChars[i]
}
}
if (numbersChecker.checked){
for (let i=0;i<25;i++){
generatedPassword += numbersChars[i]
}
}
if (symbolsChecker.checked){
for (let i=0;i<25;i++){
generatedPassword += symbolsChars[i]
}
}
generatedPassword = mix(generatedPassword);
generatedPassword = generatedPassword.slice(0, passwordLength)
if (generatedPassword == ""){
alert("Please select at least one of the options!")
}
else{
document.getElementById("generated-password").value = generatedPassword;
}
}
function copy(){
let text = document.getElementById("generated-password");
if (text.value !== "Waiting for generation..."){
text.select();
text.setSelectionRange(0, 99999); // For mobile devices
navigator.clipboard.writeText(text.value);
alert(`Generated password "${text.value}" copied your clipboard!`);
}
else{
alert("Please generate a password before copying!");
}
}
range.addEventListener("input", function() {
rangeValue = range.value;
lengthPreview.innerHTML = range.value;
}, false);
Önemli Uyarı
Kod içerisinde CSS dosyasının konumu /css/style.css, Javascript dosyasının konumu ise /js/app.js olarak belirlenmiştir. Farklı bir dizin kullanıyor iseniz kod içerisinden güncellemeniz gerekecektir.
