Hoş Geldin, Mühendis!

Tüm mühendislerin ve mühendis adaylarının yer aldığı forum sayfamıza kayıt olmalısınız. Kayıt olduktan sonra tüm ders notlarına, teknik dokümanlara erişim sağlayabilecek, sorularınızı sorup cevaplar verebileceksiniz. Sitemiz tamamiyle ücretsiz olmakla birlikte Mühendis Puanı sistemi uygulamaktadır.

Bilgi paylaştıkça çoğalır.

Premium Abonelik 📢

Premium abonelik ile sitemizi reklamsız gezebilir, dosyaları sınırsızca indirebilirsiniz.

Daha Fazlası

[Muhendisiz.NET] Tekrar Sizlerleyiz! 🎭

Mühendisiz.NET sitesi forum ve blog sayfası olarak tekrar yayın hayatına başladı. 🤩 Sizlerde forum sayfamıza üye olabilir ve mühendis topluluğumuza katılabilirsiniz.

Daha Fazlası

Mühendis Puanı Sistemi🏆

Bilgi paylaştıkça çoğalır felsefesini benimsemiş olmamız nedeniyle Mühendis Puanı sistemini uygulamaya aldık. Dökümanları indirebilmek için bazı paylaşımlarda bulunmalısınız. 📨

Daha Fazlası
  • Dosya indirebilmek için 2 Mühendis Puanına ihtiyacınız var. Konuya yorum atarak 1 MP Not paylaşarak 6 MP kazanırsınız.
    Bilgi Paylaştıkça Çoğalır. (Mühendislik Puanı (MP) Nedir?)
  • Mühendis Puanı kazanmaya vakti olmayanlar için ücretli premium üyelik sistemi aktif edilmiştir.
    (Premium Üyelik SATIN AL)

HTML/CSS ve Javascript ile Rastgele Şifre Oluşturucu

turkmedia

Moderatör
Katılım
8 Ara 2022
Mesajlar
760
Mühendis Puanı
1,612
Bu yazımızda HTML/CSS ve Javascript kullanarak rastgele şifre oluşturucu yapacağız. Önce ön izlemesini görelim.

1677962413777.png

HTML:
<div class="container">
        <h2>Şifre Oluşturucu</h2>
        <div class="result-container">
            <textarea id="PasswordResult"></textarea>
        </div>
        <div class="settings">
            <div class="setting">
                <label>Şifre uzunluğu</label>
                <input type="number" id="Passwordlength" min="4" max="20" value="8" />
            </div>
            <div class="setting">
                <label>Büyük harfler olsun</label>
                <input type="checkbox" id="uppercase" checked />
            </div>
            <div class="setting">
                <label>Küçük harfler olsun</label>
                <input type="checkbox" id="lowercase" checked />
            </div>
            <div class="setting">
                <label>Sayılar olsun</label>
                <input type="checkbox" id="numbers" checked />
            </div>
            <div class="setting">
                <label>Özel karakterler olsun</label>
                <input type="checkbox" id="symbols" checked />
            </div>
        </div>
        <div class="buttons">
            <button class="btn btn-large" id="generateBtn">
                <i class="fas fa-key"></i> Oluştur
            </button>
            <button class="btn" id="clipboardBtn">
                <i class="far fa-clipboard"></i> Kopyala
            </button>
        </div>
    </div>
Kod:


CSS:
@import url("https://fonts.googleapis.com/css?family=Muli&display=swap");

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  background-color: var(--bg-color);
  color: var(--color);
  font-family: "Muli", sans-serif;
}

p {
  margin: 5px 0;
}

h2 {
  margin: 10px 0 20px;
  text-align: center;
}

input[type="checkbox"] {
  margin-right: 0;
}

.container {
  padding: 20px;
  width: 350px;
  max-width: 100%;
  background: var(--bg-color);
  border: 12px solid var(--bg-color);
  filter: var(--filter1);
  margin: auto;
}

.result-container {
  background-color: var(--bg-color);
  border: 12px solid var(--bg-color);
  filter: var(--filter2);
  display: flex;
  justify-content: flex-start;
  align-items: center;
  position: relative;
  font-size: 18px;
  letter-spacing: 1px;
  height: 60px;
  width: 100%;
  margin-bottom: 35px;
}

textarea {
  background: none;
  border: none;
  color: var(--color);
  font-size: 20px;
  margin-top: auto;
  outline: none;
  resize: none;
}

.result-container .btn {
  font-size: 20px;
  position: absolute;
  top: 5px;
  right: 5px;
  height: 40px;
  width: 40px;
}

.buttons {
  display: flex;
}

.btn {
  width: 50%;
  border: none;
  color: var(--color);
  cursor: pointer;
  font-size: 16px;
  padding: 8px 12px;
  margin: 14px 5px 7px 5px;
  background-color: var(--bg-color);
  filter: var(--filter2);
}

.btn:hover {
  filter: var(--filter3);
  transition: 0.3s ease-in-out;
}

.setting {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: 15px 0;
}

@media screen and (max-width: 400px) {
  .result-container {
    font-size: 14px;
  }
}


JavaScript:
function getRandomLower() {
  return String.fromCharCode(Math.floor(Math.random() * 26) + 97);
}

function getRandomUpper() {
  return String.fromCharCode(Math.floor(Math.random() * 26) + 65);
}

function getRandomNumber() {
  return +String.fromCharCode(Math.floor(Math.random() * 10) + 48);
}

function getRandomSymbol() {
  const symbols = "!@#$%^&*(){}[]=<>/,.";
  return symbols[Math.floor(Math.random() * symbols.length)];
}

const randomFunc = {
  lower: getRandomLower,
  upper: getRandomUpper,
  number: getRandomNumber,
  symbol: getRandomSymbol,
};


const generate = document.getElementById("generateBtn");
generate.addEventListener("click", () => {
  const length = document.getElementById("Passwordlength").value;
  const hasUpper = document.getElementById("uppercase").checked;
  const hasLower = document.getElementById("lowercase").checked;
  const hasNumber = document.getElementById("numbers").checked;
  const hasSymbol = document.getElementById("symbols").checked;
  const result = document.getElementById("PasswordResult");
  result.innerText = generatePassword(
    hasLower,
    hasUpper,
    hasNumber,
    hasSymbol,
    length
  );

});

function generatePassword(lower, upper, number, symbol, length) {
    let generatedPassword = "";
    const typesCount = lower + upper + number + symbol;
    const typesArr = [{ lower }, { upper }, { number }, { symbol }].filter(
      (item) => Object.values(item)[0]
    );

    for (let i = 0; i < length; i += typesCount) {
      typesArr.forEach((type) => {
        const funcName = Object.keys(type)[0];
        generatedPassword += randomFunc[funcName]();
      });
    }
 
    const finalPassword = generatedPassword.slice(0, length);
    return finalPassword;
  }
 
let button = document.getElementById("clipboardBtn");

button.addEventListener("click", (e) => {
  e.preventDefault();
  document.execCommand(
    "copy",
    false,
    document.getElementById("PasswordResult").select()
  );
});
 

Son kaynaklar