Rastgele şifre oluşturucu kodları - Html, css & js

03-01-2023, 00:40:14

Wordpress Themes

Merhabalar, aşağıdaki kodları çalıştırdığınız'da, uzunluğunu sizin belirleyebileceğiniz şekilde random şifre oluşturabileceksiniz. Bunu web sitenize ekleyip, web araçları adı altında'da kullanabilirsiniz. Veya kendiniz de kullanabilirsiniz. Sizce daha farklı ne kodlayalım ?
Lütfen konunun amacı dışında yorumlar yapmayınız

<!-- HTML & js ile şifre oluşturucu  -->
<form id="password-form">
  <label for="length">Şifre Uzunluğu:</label>
  <input type="number" min="8" max="128" id="length" value="12">
  <button type="submit">Şifre Oluştur</button>
  <br>
  <label for="password">Şifreniz:</label>
  <input type="text" readonly id="password">
</form>

<style>

#password-form {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

/* Stil kodlarınız */
*
{
  font-family: quicksand;
  font-weight: 500;
}
#password-form input[type="text"]
{
  width: 250px;
    font-size: 16px;
  padding: 10px;
  border: 1px solid #e7e7e7;
  border-radius: 4px;
  margin: 10px 0;
}

#password-form input[type="number"],
#password-form button {
  font-size: 16px;
  padding: 10px;
  border: 1px solid #e7e7e7;
  border-radius: 4px;
  margin: 10px 0;


}

#password-form input[type="number"] {
  width: 90px;
  background-color: #ededed;
}

#password-form button {
  background-color: #22a7f0;
  color: white;
  cursor: pointer;
}

#password-form button:hover {
  background-color: #3498db;
}

</style>

<script>
  // Şifre oluşturma işlemleri
  const form = document.querySelector('#password-form');
  const passwordInput = document.querySelector('#password');

  // Karakterleri dahil et
  const generatePassword = (length) => {
    const characters = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789!@#$%^&*()_+-=';
    let password = '';
    for (let i = 0; i < length; i++) {
      password += characters.charAt(Math.floor(Math.random() * characters.length));
    }
    return password;
  }

  // Tamamla
  form.addEventListener('submit', (event) => {
    event.preventDefault();
    const length = document.querySelector('#length').value;
    passwordInput.value = generatePassword(length);
  });

  // Kapat
</script>

<!-- shentaweb -->

03-01-2023, 00:52:05

#2

kvp

helpful

Merhabalar,

Elinize emeğinize sağlık, çok teşekkür ederiz mükemmelsiniz. 😊

03-01-2023, 00:57:57

#3

GVDIGITAL

Mesajım bulunsun. Elinize emeğinize sağlık. Gayet şık ve hoş görünüyor.

03-01-2023, 01:11:50

#4

Shentaweb

Wordpress Themes

kvp adlı üyeden alıntı: mesajı görüntüle

Merhabalar,

Elinize emeğinize sağlık, çok teşekkür ederiz mükemmelsiniz. 😊

Teşekkürler, ne mutlu bana 😊

emirwhister adlı üyeden alıntı: mesajı görüntüle

Mesajım bulunsun. Elinize emeğinize sağlık. Gayet şık ve hoş görünüyor.

Teşekkürler 😊

06-02-2024, 05:16:13

#5

Feyyazcan

shentaweb adlı üyeden alıntı: mesajı görüntüle

Merhabalar, aşağıdaki kodları çalıştırdığınız'da, uzunluğunu sizin belirleyebileceğiniz şekilde random şifre oluşturabileceksiniz. Bunu web sitenize ekleyip, web araçları adı altında'da kullanabilirsiniz. Veya kendiniz de kullanabilirsiniz. Sizce daha farklı ne kodlayalım ?
Lütfen konunun amacı dışında yorumlar yapmayınız

<!-- HTML & js ile şifre oluşturucu  -->
<form id="password-form">
  <label for="length">Şifre Uzunluğu:</label>
  <input type="number" min="8" max="128" id="length" value="12">
  <button type="submit">Şifre Oluştur</button>
  <br>
  <label for="password">Şifreniz:</label>
  <input type="text" readonly id="password">
</form>

<style>

#password-form {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

/* Stil kodlarınız */
*
{
  font-family: quicksand;
  font-weight: 500;
}
#password-form input[type="text"]
{
  width: 250px;
    font-size: 16px;
  padding: 10px;
  border: 1px solid #e7e7e7;
  border-radius: 4px;
  margin: 10px 0;
}

#password-form input[type="number"],
#password-form button {
  font-size: 16px;
  padding: 10px;
  border: 1px solid #e7e7e7;
  border-radius: 4px;
  margin: 10px 0;


}

#password-form input[type="number"] {
  width: 90px;
  background-color: #ededed;
}

#password-form button {
  background-color: #22a7f0;
  color: white;
  cursor: pointer;
}

#password-form button:hover {
  background-color: #3498db;
}

</style>

<script>
  // Şifre oluşturma işlemleri
  const form = document.querySelector('#password-form');
  const passwordInput = document.querySelector('#password');

  // Karakterleri dahil et
  const generatePassword = (length) => {
    const characters = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789!@#$%^&*()_+-=';
    let password = '';
    for (let i = 0; i < length; i++) {
      password += characters.charAt(Math.floor(Math.random() * characters.length));
    }
    return password;
  }

  // Tamamla
  form.addEventListener('submit', (event) => {
    event.preventDefault();
    const length = document.querySelector('#length').value;
    passwordInput.value = generatePassword(length);
  });

  // Kapat
</script>

<!-- shentaweb -->

On numara olmuş, Peki Kopyala butonu nasıl eklerim ?

19-02-2024, 23:12:57

#6

ozzyozmen

Merhaba kendini bu şekilde geliştirmen güzel lakin kodu birazcık daha improve edip oluşan parolaya tıklayınca panoya yapıştırmayıda ekledim extradan.

Umarım yardımcı olur.

İyi forumlar

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <style>
    body {display: flex; align-items: center; justify-content: center; height: 100vh; margin: 0; font-family: 'Quicksand', sans-serif; font-weight: 500;}
    #password-form {display: flex; flex-direction: column; align-items: center;}
    input[type="number"], button, input[type="text"] {font-size: 16px; padding: 10px; border: 1px solid #e7e7e7; border-radius: 4px; margin: 10px 0;}
    input[type="number"] {width: 90px; background-color: #ededed;}
    button {background-color: #22a7f0; color: white; cursor: pointer;}
    button:hover {background-color: #3498db;}
  </style>
  <title>Password Generator</title>
</head>
<body>
  <form id="password-form">
    <label for="length">Şifre Uzunluğu:</label>
    <input type="number" min="8" max="128" id="length" value="12">
    <button type="button" onclick="generatePassword()">Şifre Oluştur</button><br>
    <label for="password">Şifreniz:</label>
    <input type="text" readonly id="password" style="width: 250px;">
  </form>

  <script>
    document.addEventListener('DOMContentLoaded', () => {
      const passwordInput = document.querySelector('#password');

      const generatePassword = () => {
        const length = document.querySelector('#length').value;
        const characters = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789!@#$%^&*()_+-=';
        const newPassword = Array.from({ length }, () => characters.charAt(Math.floor(Math.random() * characters.length))).join('');
        passwordInput.value = newPassword;
      }

      const copyToClipboard = () => {
        passwordInput.select();
        document.execCommand('copy');
        window.getSelection().removeAllRanges();
        alert('Parola kopyalandı!');
      }

      document.querySelector('button').addEventListener('click', generatePassword);
      passwordInput.addEventListener('click', copyToClipboard);
    });
  </script>
</body>
</html>