05-04-2025, 12:14 PM
KODLAR:
HTML KODLARI:
Kod:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Şifre Oluşturucu</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css">
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Fredoka:wght@300;400;500&display=swap">
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="password-generator">
<h2>Şifre Oluşturucu</h2>
<div class="password-output">
<input type="text" id="password" readonly>
<button class="bi copy-btn"></button>
</div>
<label for="length-input">
<span class="length-val-box">10</span>
<input type="range" id="length-input" min="4" max="30" value="12">
</label>
<div class="options-wrapper">
<p>Gelişmiş Seçenekler</p>
<div class="options">
<label><input type="checkbox" id="lowercase" checked>Küçük harf (a-z)</label>
<label><input type="checkbox" id="uppercase" checked>Büyük harf (A-Z)</label>
<label><input type="checkbox" id="numbers" checked>Sayılar (0-9)</label>
<label><input type="checkbox" id="special" checked>Özel (@#$%...)</label>
</div>
</div>
<button class="generate-btn">Şifre Oluştur</button>
<P><h2 class="uyar">BURDA OLUŞAN ŞİFRETİ KULLANMAYINIZ!!</h2></P>
</div>
<script src="script.js"></script>
</body>
</html>CSS KODLARI:
Kod:
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
display: flex;
justify-content: center;
align-items: center;
min-width: 320px;
min-height: 100vh;
background: #000000;
font-family: 'Fredoka';
}
.password-generator {
display: grid;
width: 450px;
padding: 20px;
color: #ffffff;
border-radius: 8px;
background-color: #19191a;
box-shadow: -1px -1px 0px 0px #ffffff5e, inset -1px -1px 0px 0px #ffffff57;
}
.password-generator h2 {
text-align: center;
font-weight: 500;
}
.password-output {
display: flex;
align-items: center;
justify-content: space-between;
margin: 25px 0 15px;
padding: 10px 15px;
border-radius: 8px;
background-color: #00000078;
box-shadow: -1px -1px 0px 0px #0000005e, inset -1px -1px 0px 0px #00000057;
}
#password {
width: 100%;
border: none;
outline: none;
font-size: 14px;
letter-spacing: 1px;
color: #00ff0d;
background-color: transparent;
}
.copy-btn {
border: none;
cursor: pointer;
background: none;
padding: 5px 10px;
border-radius: 5px;
color: #3756df;
}
.copy-btn:hover {
color: #293950ec;
}
.copy-btn::before {
content: "\F759";
}
.copy-btn.copied::before {
content: "\F26D";
color: #11b4ff;
font-size: 14px;
}
label[for="length-input"] {
display: flex;
align-items: center;
justify-content: space-between;
}
label {
cursor: pointer;
font-size: 16px;
padding: 12px 15px;
border-radius: 5px;
background-color: #00000061;
box-shadow: -1px -1px 0px 0px #0000005e, inset -1px -1px 0px 0px #00000057;
}
.length-val-box::before {
content: "Şifre Uzunluğu: ";
}
#length-input {
cursor: pointer;
}
.options-wrapper {
margin-top: 25px;
}
.options {
display: grid;
gap: 12px;
margin-top: 15px;
grid-template-columns: repeat(2, 1fr);
}
.password-generator input[type=checkbox] {
margin-right: 9px;
vertical-align: middle;
}
.generate-btn {
border: none;
font-size: 20px;
cursor: pointer;
margin-top: 10px;
color: #ffffff;
line-height: 40px;
border-radius: 5px;
font-family: "Fredoka";
transition: transform .3s;
background: #000000ec;
}
.generate-btn:active {
transform: scale(0.98);
}
@media (max-width:425px) {
.options {
grid-template-columns: 1fr;
}
}
@media (max-width:375px) {
label[for="length-input"] {
flex-direction: row-reverse;
}
.length-val-box::before {
content: "";
}
}JS KODLARI:
Kod:
const lengthInput = document.querySelector('#length-input'),
lowercase = document.querySelector('#lowercase'),
uppercase = document.querySelector('#uppercase'),
numbers = document.querySelector('#numbers'),
special = document.querySelector('#special'),
copyBtn = document.querySelector('.copy-btn'),
passwordField = document.querySelector('#password'),
lengthValBox = document.querySelector(".length-val-box"),
generateBtn = document.querySelector('.generate-btn'),
checkboxes = [lowercase, uppercase, numbers, special];
let copyBtnTimer;
const mustCheckOne = (e) => {
const checkedCount = checkboxes.filter(cb => cb.checked).length;
if (checkedCount === 0) e.currentTarget.checked = true;
}
const generatePassword = () => {
let password = '', charset = '';
if (lowercase.checked) charset += 'abcdefghijklmnopqrstuvwxyz';
if (uppercase.checked) charset += 'ABCDEFGHIJKLMNOPQRSTUVWXYZ';
if (numbers.checked) charset += '0123456789';
if (special.checked) charset += '!@#$%^&*()_+[]{}|;:,.<>?';
for (let i = 0; i < lengthInput.value; i++) {
password += charset.charAt(Math.floor(Math.random() * charset.length));
}
passwordField.value = password;
clearTimeout(copyBtnTimer);
copyBtn.classList.remove("copied");
}
const copyPassword = () => {
passwordField.select();
navigator.clipboard.writeText(passwordField.value);
copyBtn.classList.add("copied");
clearTimeout(copyBtnTimer);
copyBtnTimer = setTimeout(() => copyBtn.classList.remove("copied"), 1000);
}
checkboxes.forEach(checkbox => checkbox.addEventListener('change', mustCheckOne));
lengthInput.addEventListener("input", () => lengthValBox.textContent = lengthInput.value)
copyBtn.addEventListener('click', copyPassword);
generateBtn.addEventListener('click', generatePassword);
window.onload = generatePassword;Bu örnek, Smart UI Studio tarafından yayınlanan bir yazılıma dayanmaktadır.
Lisans: Limited Commercial Use License © 2024 Smart UI Studio
Bu paylaşım yalnızca eğitim ve ticari olmayan kullanım içindir.
Kodun kaynak haliyle ticari projelerde kullanılması, satılması veya dağıtılması yasaktır.
femo sunar...
