Gmail Kontrol Sistemi (HTML, CSS ve JavaScript)

Bu proje, kullanıcıdan alınan bir e-posta adresinin temel kurallara uygun olup olmadığını kontrol eden basit bir doğrulama sistemidir. Kullanıcının girdiği değer JavaScript ile kontrol edilir ve hatalı ya da doğru olduğu kullanıcıya bildirilir

1. HTML

HTML kısmı, kullanıcı arayüzünü oluşturur. Kullanıcıdan veri almak için bir input alanı ve işlemi başlatmak için bir buton bulunur. 

• input: Kullanıcının Gmail adresini yazdığı alandır.
• button: Kontrol işlemini başlatır.
• h2: Başlık olarak kullanılır.
• id değerleri JavaScript ile bağlantı kurmak için kullanılır.

<div class="cont">
		<h2>Gmail kontrol sistemi</h2>
		<input type="text" id="madde" class="text1" placeholder="gmail gir">
		<button id="bas" class="btn" type="submit">Gmail yola</button>
</div>

2.CSS

CSS kısmı, sayfanın görsel düzenini oluşturmak için kullanılmıştır. Amaç, kullanıcıya daha sade, okunabilir ve düzenli bir arayüz sunmaktır. 

• Sayfanın arka plan rengi koyu mavi olarak ayarlanmıştır ve yazı tipi olarak “Calibri” kullanılmıştır.
• .cont sınıfı ile formun bulunduğu kutu ortalanmış, arka plan rengi verilmiş ve köşeleri yuvarlatılmıştır. Böylece daha modern bir görünüm elde edilmiştir.
• h2 etiketi beyaz arka plan ile vurgulanarak başlık daha belirgin hale getirilmiştir.
• .text1 sınıfı input alanlarını düzenler; genişlik, yazı boyutu ve kenarlık ayarları yapılmıştır.
• .btn sınıfı butonu düzenler. Butonun rengi, boyutu ve hover (üzerine gelince değişen renk) efekti ayarlanarak daha kullanışlı hale getirilmiştir.

<style>
		* {
   			margin: 0;
    		padding: 0;
    		box-sizing: border-box;

		}

		body {
    		background: #103262;
    		font-family: calibri;
		}
		

		.cont {
    		background: #2060a0;
    		padding: 30px;
    		border-radius: 12px;
    		box-shadow: 0 5px 15px rgba(0,0,0,0.1);
    		margin: 100px auto;
    		width: 90%;          
    		max-width: 400px;    
    		display: flex;
    		flex-direction: column;
		}
		h2{
			background: #fff;
			margin: 20px;
			padding: 1rem;
			border-radius: 1rem; 
		}

		.text1 {
    		width: 100%;        
    		padding: 12px;
    		border: 2px solid #ccc;
    		border-radius: 8px;
    		font-size: 16px;
		}

		.btn {
    		width: 100%;        
   		 	margin-left: 0;      
    		padding: 12px;
    		background: #40E0D0;
    		border: none;
    		border-radius: 8px;
    		color: white;
    		font-size: 16px;
    		cursor: pointer;
    		margin-top: 20px;
		}

		.btn:hover {
    			background: #2bbbad;
		}
</style>

3.JavaScript

JavaScript kısmı, kullanıcının girdiği Gmail adresini kontrol eder ve kurallara uygun olup olmadığını belirler.

1. Buton Tıklama Olayı

Butona tıklanınca doğrulama işlemi başlar.

document.getElementById("bas").addEventListener("click",function() {

2. Kullanıcı Verisini Alma

Kullanıcının yazdığı metin alınır.

let yazilan = document.getElementById("madde").value;

3. Temel Bilgiler

Burada:

• uzunluk: Yazının toplam karakter sayısı
• sr1: @ işaretinin konumu
• sr2: . (nokta) işaretinin konumu

let uzunluk = yazilan.length;
let sr1 = yazilan.indexOf("@");
let sr2 = yazilan.indexOf(".");

4. Doğrulama Kuralları

Sistem aşağıdaki kurallara göre kontrol yapar:

❌ 1. @ işareti var mı?

if (sr1<0) {
		  alert("@ işareti yok");
}

❌ 2. Nokta (.) var mı?

else if (sr2<sr1){
		    alert("nokta @ dan önce olmaz");
}

❌ 3. Nokta @’dan önce olamaz

else if (sr2<sr1){
			alert("nokta @ dan önce olmaz");
}

❌ 4. @ çok başta olamaz

else if(4>sr1){
		     alert("Gmail bu kadar kısa olmaz");
}

❌ 5. @ ile . arasında yeterli karakter olmalı

else if (4 > (sr2 - sr1)){
			alert("@ ile nokta arası böyle olmaz");
}

❌ 6. . sonrası yeterince uzun olmalı

else if ((uzunluk - sr2) < 4){
                     alert(". dan sonra bu kadar kısa olmaz");
}

5. Başarılı Durum

Ne olur?

• Başarı mesajı gösterilir
• Input alanı temizlenir

else{
		alert("Gmailnı başarılı bir şekilde yolladım");
		document.getElementById("madde").value="";
}

4.sonuc

Programımızın son hali