Sıfırdan ileriye Javascript konusuna hoş geldiniz. Bugün çok basit ve popüler bir projeyi yapmayı öğrenelim. Bu projeyi hepimiz en az 1 kez kullanmışızdır hayatımızda. Bugün yapacağımız proje basit bir giriş yap sayfası olacak. Html Css ile şekillendirip bunu Javascript ile dinamik hale getireceğiz. Peki neler yapacağız derseniz önce girilen mailin geçerli olup olmadığını kontrol edeceğiz eğer geçerli ise girilen şifrelere bakacağız. Şifreler diyorum çünkü bir adet yeni şifre bir adet de şifreyi doğrulama input alanımız olacaktır. İlk şifreyi girdikten sonra kullanıcıdan en az 5 karakter, özel karakter içeren bir harf, bir büyük harf ve rakam isteyeceğiz. Eğer bunları karşılamıyorsa hata mesajı yollayacağız. Eğer karşılıyorsa şartları ilk şifre ile ikinci doğrulama şifresini kontrol edeceğiz aynı değillerse yine bir hata mesajı yollayacağız. Eğer karşılıyorsa bir adet başarıyla giriş yapıldı tarzı mesaj yollayıp aldığımız verileri yerel depolamaya kayıt edeceğiz. (Normalde veritabanı kullanılır ama veri tabanı bilmediğimizi varsayarak anlattıklarımdan ilerleyeceğim) Yerel depolama için local storage kullanacağız ama hem mail hem de şifreyi aynı anda kayıt etmek biraz sıkıntı olacağı için user objesi oluşturup buna math fonksiyonu yardımıyla bir id değeri atayacağız ki bu diğer kullanıcılardan ayırt edilmesini sağlayacak. (Veri tabanında Primary Key deniliyor). Bu id yanına girilen mail ve şifre kayıt edilecek. Son olarak ise kullanıcı eğer isterse şifresinin yazarken göz ikonuna tıklayarak şifresini görebilecek.
Temel olarak projemizde bunları amaçlıyoruz. Bunu yapabilmek için Dom yapısı, if-else, localStorage, boolen gibi konuları bilmeniz gerekiyor. Hazırsanız o halde başlayalım.
İlk olarak HTML dosyamızı oluşturalım ve class ve inputlarımızı yazalım. Ek olarak ikon için font awesome kullanacağız bu yüzden googlden cdn font awesome yazarak ilk sitedeki kodu alıp head etiketleri arasında ekleyebilirsiniz veya direkt aşağıdaki koddan da alabilirsiniz.
Temel olarak projemizde bunları amaçlıyoruz. Bunu yapabilmek için Dom yapısı, if-else, localStorage, boolen gibi konuları bilmeniz gerekiyor. Hazırsanız o halde başlayalım.
İlk olarak HTML dosyamızı oluşturalım ve class ve inputlarımızı yazalım. Ek olarak ikon için font awesome kullanacağız bu yüzden googlden cdn font awesome yazarak ilk sitedeki kodu alıp head etiketleri arasında ekleyebilirsiniz veya direkt aşağıdaki koddan da alabilirsiniz.
HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="index.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.6.0/css/all.min.css"
integrity="sha512-Kc323vGBEqzTmouAECnVceyQqyqdsSiqLQISBL29aUW4U/M7pSPA/gEUZQqv1cwx4OnYxTxve5UMg5GT6L4JJg=="
crossorigin="anonymous" referrerpolicy="no-referrer" />
</head>
<body>
<div class="main">
<div class="inputs">
<div class="basarili"></div>
<input class="input" id="mail" type="email" placeholder="E-mailinizi Giriniz...">
<div class="Uyari"></div>
<div class="input-group">
<input class="inputSifre" type="password" placeholder="Şifrenizi Giriniz...">
<i class="fa-solid fa-eye" id="toggle"></i>
</div>
<div class="UyariSifre"></div>
<input class="inputSifre" type="password" placeholder="Şifrenizi Tekrar Giriniz...">
<div class="UyariSifre2"></div>
<button class="button">Giriş Yap</button>
</div>
</div>
<script src="index.js"></script>
</body>
</html>Html kodlarımız bunlar Javascript'in bu konusuna kadar geldiyseniz ne yapıldığını gayet de iyi anlayabilirsiniz. Şimdi biraz Css ile sayfayı düzenleyelim.
CSS:
html,
body {
height: 100%;
margin: 0;
font-family: 'Arial', sans-serif;
background: linear-gradient(135deg, #f5f7fa, #c3cfe2);
}
.main {
height: 100%;
display: flex;
align-items: center;
justify-content: center;
}
.inputs {
display: flex;
flex-direction: column;
align-items: center;
background-color: white;
padding: 40px;
border-radius: 10px;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}
.inputs input {
margin-bottom: 20px;
padding: 10px 0;
border: none;
outline: none;
border-bottom: 2px solid lightgray;
width: 250px;
font-size: 16px;
transition: border-color 0.3s ease;
}
.inputs input:focus {
border-bottom: 2px solid orange;
}
.input-group {
position: relative;
display: flex;
align-items: center;
width: 250px;
}
.input-group input {
width: 100%;
padding-right: 30px;
}
.input-group i {
position: absolute;
right: 10px;
top: 6px;
cursor: pointer;
color: gray;
font-size: 18px;
}
button {
border: none;
background-color: orange;
color: white;
padding: 12px 20px;
font-size: 18px;
font-weight: 500;
cursor: pointer;
transition: 0.3s ease;
border-radius: 5px;
box-shadow: 0 3px 6px rgba(0, 0, 0, 0.1);
}
button:hover {
background-color: #ff8000;
font-size: 20px;
transform: translateY(-3px);
}
.Uyari {
margin-top: -10px;
margin-bottom: 30px;
color: red;
font-size: 14px;
font-weight: bold;
display: flex;
}
Css ile birlikte sayfamız böyle gözüküyor. Artık asıl konumuza başlayabiliriz. Öncelikle işlem yapacağımız elementlerin class ve id değerlerini alalım.
JavaScript:
let mail = document.querySelector("#mail");
let sifreler = document.querySelectorAll(".inputSifre");
let mailUyari = document.querySelector(".Uyari");
let sifreUyari1 = document.querySelector(".UyariSifre");
let sifreUyari2 = document.querySelector(".UyariSifre2");
let basarili = document.querySelector(".basarili")
let button = document.querySelector(".button");
let toggle = document.querySelector('#toggle');
Burada sırayla işlem yapmak istediğimiz değerleri aldık. Bunlar üzerinden işlem yapacağız ama bir de regex oluşturalım böylece özellikle şifre girerken bir adet büyük karakter, bir adet rakam bir adet özel karakter ve en az 5 harften oluşmasını isteyeceğimiz için regex ile bunları belirtelim. Açıkçası regexi ezbere bilmenize gerek yok sadece biraz Google kullanın yeter.
JavaScript:
let sifreRegex = /^(?=.*[A-Z])(?=.*\d)(?=.*[@$!%*?&])[A-Za-z\d@$!%*?&]{5,}$/;Böylece regexi oluşturduk. Şimdi eğer sifreler değişkenine bakarsak burada querySelectorAll methodunu kullandık. Yani tüm o class'a ait tüm inputları alıyor. Biz bu şifreleri karşılaştırmak için tek tek değerlerini almamız lazım querySelectorAll aldığı tüm değerleri bir diziye alır bu yüzden bunları arrayden çekip değişkene atayacağız.
Böylece sifrelerin 0 ve 1. indexlerinin değerlerini bir değişkene atadık. Böylece artık kontrole hazırız. Önce aldığımız butona bir Event Listener atayarak başlayalım.
JavaScript:
button.addEventListener("click", () => {
let sifre1 = sifreler[0].value;
let sifre2 = sifreler[1].value;
}Butona tıklanıldığı zaman işlem yapmasını belirttik. Peki hangi işlemleri yapacak şimdi bunları yazalım.
JavaScript:
mailUyari.innerHTML = "";
sifreUyari1.innerHTML = "";
sifreUyari2.innerHTML = "";Öncelikle butona bastığımız an input değerlerimiz temizlensin böylece bir daha yeni değer girmeye çalışırken tek tek önceden yazdığımız değerler silmekle uğraşmayalım diye kendimize kolaylık sağladık. Şimdi mail onayını yapalım.
JavaScript:
if (mail.value.length == 0 || !mail.value.includes("@") || !mail.value.includes(".com")) {
let elementOlustur = document.createElement("p");
elementOlustur.innerHTML = "Geçersiz Mail";
mailUyari.appendChild(elementOlustur);
}
Eğer mail inputunun değerleri 0'a eşit ise veya mail inputunun değerlerinde "@" işareti yoksa veya mail inputunun değerlerinde ".com" değeri yoksa bir adet p elementi oluştur ve buna "Geçersiz Mail" değerini yazdır. Değeri yazdırdıktan sonra Mail inputunun hemen altındaki Classta görüntüle diyoruz.
Görüldüğü üzere her ne kadar mail değerim 0 karaktere eşit olmasa bile "@" ve ".com" değerleri olmadığı için kabul etmedi. Yani kodumuzu çalışıyor şimdi şifre kontrolünü yapalım.
JavaScript:
else if (!sifreRegex.test(sifre1)) {
let elementOlustur = document.createElement("p");
elementOlustur.innerHTML = "Şifreniz En Az 5 karakter olmalı, en az bir büyük harf ve bir özel karakter içermeli!";
elementOlustur.style.color = "red";
sifreUyari1.appendChild(elementOlustur);
}
Eğer regexte tanımladığımız kurallara sifre1 değeri uymazsa p elementi oluşturup bu elemente hata mesajını yazdır ve bu yazdırdığımız mesajı ise kırmızı renk yapıp hemen ilk şifrenin altında göster diyoruz.
Bu kısımda çalışıyor. Şimdi ilk şifreyi kurallara uygun yazdığımızı varsayıp ikinci şifreyle ilk şifrenin aynı olup olmadığına bakalım.
JavaScript:
else if (sifre1 !== sifre2) {
let elementOlustur = document.createElement("p");
elementOlustur.innerHTML = "Şifreler Eşleşmiyor";
elementOlustur.style.color = "red";
sifreUyari2.appendChild(elementOlustur);
}
Eğer ilk şifre ile ikinci şifre eşleşmiyorsa bir p elementi oluşturup buna hata mesajını yazdır ve bunu kırmızı yap dedikten sonra hemen ikinci şifrenin altına mesajı yazdır diyoruz.
Böylece iki şifrede aynı değilse hata mesajımızı alıyoruz. Peki hepsi doğru ise ne olacak ?
Bunları kodlayalım o halde.
JavaScript:
else {
let elementOlustur = document.createElement("p");
elementOlustur.style.color = "green";
elementOlustur.innerHTML = "Başarılı!";
basarili.appendChild(elementOlustur);
let idAta = Math.floor(Math.random() * 99999)
const userData = {
id: idAta,
mail: mail.value,
sifre: sifre1
}
localStorage.setItem('user', JSON.stringify(userData))
}
Eğer tüm kontrollerden geçtiyse kullanıcı buradaki kod bloğu çalışacaktır. Öncelikle bir p elementi oluşturup bunun rengini yeşil yapıyoruz. Rengi ayarladıktan sonra Başarılı mesajını değişkene atıyoruz ve en üsteki class'a bunu göstermesini istiyoruz. Ek olarak eğer başarılı ise bir id değeri oluşturuyoruz. Bu değeri random olarak atayacak. İd oluşturduktan sonra userData objesi oluşturup bunun içine oluşturulan id değeri, yazılan mail değeri ve şifre değerini ekletiyoruz. Daha sonra bu objeyi localStorage ile user keyi adı altında normal obje değerinden json tipine stringfiy ile çevirdikten sonra objemizin adını yazıyoruz. Böylece oluşturulan obje önce json formatına geçecek daha sonra bunu yerel depoya kayıt edecektir.
Burada gördüğünüz gibi önce başarılı mesajımızı aldık daha sonra yerel depolamaya baktığımızda bize random olarak atanan id değeri, girdiğimiz mail ve şifre değerlerini kayıt etti.
Şimdi en son olarak şifreyi gösterip kapatmayı yapalım. Bunun için en başta aldığımız toggle id değerine Event Listener ekleyelim. Kullanıcı göze tıklarsa şifreyi göstersin bir daha tıklarsa göstermesin olarak ayarlayalım.
JavaScript:
let sifreDurum = false
toggle.addEventListener('click', () => {
sifreDurum = !sifreDurum;
if (sifreDurum) {
sifreler[0].type = "text"
}
else {
sifreler[0].type = "password"
}
});
Öncelikle sifreDurum değişkenine false dedik bunun sebebi eğer şifre gösterilmek istenirse true gösterilmek istenilmezse tekrar false olacaktır.
Event listeneri belirttikten sonra göze tıklanıldığı vakit değer false ise true, true ise false olmasını sağlayacak atamayı yapıyoruz. Daha sonra eğer sifreDurum true olursa sifreler dizinindeki 0.indexi (ilk şifreyi) göster bir daha tıklanıldığında false dönen değer için ise tekrar şifre türüne çevir diyoruz ve işlem tamamlanıyor.
Her ne kadar kolay gibi gözükse de bu uygulamayı yapmak için birçok Javascript konusunu kullanabilecek kadar bilmek gerekiyor. Özellikle yeni öğrenen biri için bu proje ona çok şey katacaktır. Başka bir konuda görüşmek üzere okuduğunuz için teşekkürler.
