Değerli üyemiz @Turkuaz999 'un isteği doğrultusunda "E-Mail Kontrolünün" nasıl yazıldığını göstereceğim.
İlk öncelikle projemizi nasıl oluşturacağımıza gelelim.
Yeni bir klasör oluşturuyoruz ve "Visual Code Studio" içine atıyoruz.
Klasörümüzü "Visual Code Studio" içine attıktan sonra üstüne tıklayıp
kırmızı daire işaretlenmiş yere tıklayıp index.html yazıyoruz ve kod girinti sayfamız önümüze çıkacak ;
Sayfa önümüze açıltıktan sonra aşağıdaki HTML kodlarını yazıyoruz ve düzenlemek istediğiniz
kısımları düzenleyiniz ;
İlk öncelikle projemizi nasıl oluşturacağımıza gelelim.
Yeni bir klasör oluşturuyoruz ve "Visual Code Studio" içine atıyoruz.
Klasörümüzü "Visual Code Studio" içine attıktan sonra üstüne tıklayıp
kırmızı daire işaretlenmiş yere tıklayıp index.html yazıyoruz ve kod girinti sayfamız önümüze çıkacak ;
Sayfa önümüze açıltıktan sonra aşağıdaki HTML kodlarını yazıyoruz ve düzenlemek istediğiniz
kısımları düzenleyiniz ;
HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="box">
<h3>E-Posta Kontrol</h3>
<form id="form" action="#">
<div class="input-box">
<input type="text" id="email" onkeyup="validateEmail()" placeholder="E-POSTA ADRESİNİZİ GİRİNİZ.">
<span id="text"></span>
</div>
</form>
</div>
<script>
function validateEmail() {
var form = document.getElementById("form");
var email = document.getElementById("email").value;
var text = document.getElementById("text");
var pattern = /^[^ ]+@[^ ]+\.[a-z]{2,3}$/;
if (email.match(pattern)) {
form.classList.add("valid");
form.classList.remove("invalid");
text.innerHTML = "E-POSTA ADRESİ GEÇERLİ.";
text.style.color = "green";
} else {
form.classList.add("invalid");
form.classList.remove("valid");
text.innerHTML = "E-POSTA ADRESİ GEÇERLİ DEĞİL.";
text.style.color = "red";
}
if (email == "") {
form.classList.remove("valid");
form.classList.remove("invalid");
text.innerHTML = "";
}
}
</script>
</body>
</html>
Şimdi gelelim CSS kodlarına ama ondan önce oluşturduğumuz klasör içerisinde bir ek klasör oluşturmamız gerekiyor
e-maillerin doğru veya yanlış olduğunu belirtmek için çıkan simgeleri ekliyeceğiz ben örnek olarak
"resimtht" olarak oluşturuyorum ve içerisine görsellerimi atıyorum siz istediğiniz simgeleri kullanabilirsiniz.
Arkaplan için yine önceden bir resim seçip oluşturduğunuz klasörün içine resimimizi atıyoruz.
Arkaplan resmi kullanmak istemeyen kişiler CSS kodları içerisinden background ibaresinden color olarak seçip renk tercih
edebilirler. Ben örnek olarak Moderasyon Wallpaper resmimizi kullanmak istiyorum ve klasör içerisine atıyorum ;
Son olarak gelelim CSS kodlarımıza aşağıda vermiş olduğum kodları index.html'yi oluşturduğumuz gibi "Visual Code" üzerinden aynı simgeye tıklayıp bu sefer style.css olarak oluşturup aşağıdaki kodları yazıyoruz ve değiştirmek istediklerinizi değiştirebilirsiniz.
Aşağıdaki kodlarıda style.css içerisine yazdıktan sonra işlemlerimiz tamamlanmış olucak ve sitemizde biri kayıt olmaya çalışırken email
girmesi gerektiğinde @gmail.com @mail.com @outlook.com ve benzeri şekillerdeki mailleri girmediği sürece girdiği mail kabul edilmeyecektir. Ve doğru bir email girmesini isteycektir /
Style.css
e-maillerin doğru veya yanlış olduğunu belirtmek için çıkan simgeleri ekliyeceğiz ben örnek olarak
"resimtht" olarak oluşturuyorum ve içerisine görsellerimi atıyorum siz istediğiniz simgeleri kullanabilirsiniz.
Arkaplan için yine önceden bir resim seçip oluşturduğunuz klasörün içine resimimizi atıyoruz.
Arkaplan resmi kullanmak istemeyen kişiler CSS kodları içerisinden background ibaresinden color olarak seçip renk tercih
edebilirler. Ben örnek olarak Moderasyon Wallpaper resmimizi kullanmak istiyorum ve klasör içerisine atıyorum ;
Son olarak gelelim CSS kodlarımıza aşağıda vermiş olduğum kodları index.html'yi oluşturduğumuz gibi "Visual Code" üzerinden aynı simgeye tıklayıp bu sefer style.css olarak oluşturup aşağıdaki kodları yazıyoruz ve değiştirmek istediklerinizi değiştirebilirsiniz.
Aşağıdaki kodlarıda style.css içerisine yazdıktan sonra işlemlerimiz tamamlanmış olucak ve sitemizde biri kayıt olmaya çalışırken email
girmesi gerektiğinde @gmail.com @mail.com @outlook.com ve benzeri şekillerdeki mailleri girmediği sürece girdiği mail kabul edilmeyecektir. Ve doğru bir email girmesini isteycektir /
Style.css
CSS:
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Poppins', sans-serif;
}
body {
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
background-image: url(moderasyon.jpg);
}
.box {
background: white;
padding: 15px 40px;
box-shadow: 15px 15px rgba(0, 0, 0, 0.1);
}
.box h3 {
position: relative;
font-size: 1.25rem;
color: #ccc;
letter-spacing: 0.1em;
font-weight: 500;
margin-bottom: 5px;
}
.box #form {
position: relative;
}
.box .input-box {
position: relative;
}
.box #form #email {
width: 400px;
outline: none;
border: none;
border-bottom: 2px solid #333;
color: #333;
padding: 10px 0;
font-weight: 500;
font-size: 1.2em;
letter-spacing: 0.1em;
}
#text {
display: block;
color: #999;
font-weight: 500;
padding: 5px 0;
letter-spacing: 0.1em;
font-size: 0.75em;
}
#form.invalid .input-box::before {
content: "";
position: absolute;
right: 0;
top: 12px;
width: 24px;
height: 24px;
background: url(resimtht/hayır.png);
background-size: cover;
}
#form.valid .input-box::before {
content: "";
position: absolute;
right: 0;
top: 12px;
width: 24px;
height: 24px;
background: url(resimtht/evet.png);
background-size: cover;
}
Ve tüm adımlarımız tamamlandı gelelim nasıl gözüktüğüne ve nasıl işlediğine ;
Nasıl gözüküyor ? ;
Geçerli bir mail girdiğimizde nasıl gözüküyor ?
Geçersiz bir mail girdiğimizde nasıl gözüküyor ?
Bir değerli üyemizin isteği doğrultusunda bu şekilde bir proje oluşturduk
ilerleyen zamanlarda konularımız ve içeriklerimiz yararlı olabilecek bir şekilde devam edicektir.
İyi Forumlar Dilerim...
Nasıl gözüküyor ? ;
Geçerli bir mail girdiğimizde nasıl gözüküyor ?
Geçersiz bir mail girdiğimizde nasıl gözüküyor ?
Bir değerli üyemizin isteği doğrultusunda bu şekilde bir proje oluşturduk
ilerleyen zamanlarda konularımız ve içeriklerimiz yararlı olabilecek bir şekilde devam edicektir.
İyi Forumlar Dilerim...