Sayı Tahmin Oyunu

Hazırladığın bu kod, kullanıcının üç farklı sayı tahmininde bulunduğu ve bilgisayarın ürettiği rastgele sayılarla karşılaştırıldığı interaktif bir "Sayı Tahmin Oyunu" uygulamasıdır.

1.Html

HTML kısmı, uygulamanın iskeletini oluşturuyoruz

<input> etiketleri ile kullanıcıdan 1-10 arası sayı girişleri alınır.
<button> etiketi ile hem rastgele sayılar üretilir hem de inputlara girilen değerler alınır.
<div> ve <p> etiketleri ile hem verileri düzenli gösterir hem de ekranda kullanıcıya yansıtılır.

<div class="cont">	
			<div class="inp">
				<input type="number" id="tex1" class="text1" min="1" max="10" placeholder="1.Sayı Tuturma">
				<input type="number" id="tex2" class="text1" min="1" max="10" placeholder="2.Sayı Tuturma">
				<input type="number" id="tex3" class="text1" min="1" max="10" placeholder="3.Sayı Tuturma">
			</div>
			<button class="btn1" id="btn">Tahmin Etme</button>
</div>
<div class="cont1">
			<div class="pdiv">
				<p id="tah1"> 0 </p>
				<p id="tah2"> 0 </p>
				<p id="tah3"> 0 </p>
			</div>
			<p id="sonuc">Tutrulan Sayı: 0</p>
</div>

2.CSS

CSS kısmı, uygulamanın görünümünü ve stilini oluşturur.

* ile tüm elemanların kutu boyutlarını ve kenar boşluklarını sıfırlarız.
body ile arka plan resmi ve genel stil ayarlanır.
.cont ve .cont1 sınıfları ile kutuların boyutu, rengi, iç boşluğu ve yuvarlatılmış köşeleri ayarlanır.
.text1 sınıfı ile input alanlarının boyutu, kenarlık ve yazı boyutu ayarlanır.
.btn1 ile butonun boyutu, rengi, kenar yuvarlaması ve tıklanabilirliği ayarlanır.
.pdiv ile tahminlerin gösterildiği kutunun rengi, iç boşluğu ve köşe yuvarlaması ayarlanır.
#sonuc ile sonucu gösteren alanın arka plan rengi, yazı boyutu ve köşe yuvarlaması ayarlanır.

<style>
		*{
			box-sizing: border-box;
			margin: 0;
			padding: 0;
			font-family: 'Calibri', sans-serif;
		}

		body {
			
			background-image: url('https://sm.mashable.com/t/mashable_tr/photo/default/windows-xpnin-unutulmaz-manzarasi-22bliss22-duvar-kagidinin_pbag.1248.jpg'); 
			background-size: cover; 
			background-position: center;
			background-attachment: fixed; 
		}

		.cont, .cont1 {
			width: 65%;
			padding: 2rem;
			margin: 30px auto;
			background: rgba(48, 213, 200, 0.9); 
			border-radius: 1rem;
			text-align: center;
		}
       h2{
			background: #fff;
			margin: 20px;
			padding: 1rem;
			border-radius: 1rem; 
		}

		.text1 {
			padding: 0.8rem;
			width: 12rem;
			margin: 10px;
			border-radius: 10px;
			border: none;
			font-size: 1.1rem;
		}

		.btn1 {
			display: block;
			width: 15rem;
			padding: 1.5rem;
			background: #53f7a2;
			margin: 20px auto; 
			border-radius: 1rem;
			border: none;
			font-weight: bold;
			cursor: pointer;
		}

	

		.pdiv {
			background: #fff;
			padding: 10px;
			border-radius: 10px;
			display: inline-block;
		}

		p {
			display: inline-block;
			font-size: 3rem;
			margin: 15px;
			padding: 10px;
		}

		#sonuc {
			display: block; 
			background: green;
			margin-top: 20px;
			font-size: 2rem;
			border-radius: 10px;
		}
</style>

3.JavaScript

JavaScript kısmı, uygulamanın mantığını ve etkileşimini sağlar.

document.getElementById("btn").addEventListener("click", …) ile butona tıklandığında bir işlem başlatılır.
Kullanıcının girdiği değerler document.getElementById("tex1").value gibi kodlarla alınır.
Eğer inputlar boşsa kullanıcı uyarılır (alert("Lütfen sayıları doldurunuz")).
Math.floor(Math.random() * 10) + 1 ile 1-10 arasında rastgele 3 sayı üretilir.
Kullanıcının tahminleri ile rastgele sayılar karşılaştırılır:
- Doğru tahminler yeşil renkle, yanlış tahminler kırmızı renkle gösterilir.
- Kaç doğru tahmin yapıldığı tutan değişkeni ile hesaplanır
Sonuç document.getElementById("sonuc").innerText ile ekrana yazdırılır.

<script>

		// Butona tıklanınca çalışacak fonksiyon
	        document.getElementById("btn").addEventListener("click", function () {

    		// Kullanıcının girdiği değerleri al
    		let s1 = document.getElementById("tex1").value;
    		let s2 = document.getElementById("tex2").value;
    		let s3 = document.getElementById("tex3").value;

    		// Eğer inputlar boşsa uyarı ver
    		if (s1=="") {
        		alert("Lütfen sayıları doldurunuz")
    		}
    		else if (s2=="") {
        		alert("Lütfen sayıları doldurunuz")
    		}
    		else if(s3==""){
        		alert("Lütfen sayıları doldurunuz")
    		}
             //1 ile 10 arasında olması için
    		else if (s1 < 1 || s1 > 10){
    			alert("Lütfen 1 ile 10 arası sayı giriniz")
    		}
    		else if (s2 < 1 || s2 > 10) {
    			alert("Lütfen 1 ile 10 arası sayı giriniz")
    		}
    		else if (s3 < 1 || s3 > 10) {
    			alert("Lütfen 1 ile 10 arası sayı giriniz")
    		}
    		else{

        	// Rastgele sayıları tutacağımız dizi
        	let tut = [];

        	// 1-10 arasında 3 tane rastgele sayı üret
        	for (let i = 0; i < 3; i++) {
            	tut[i] = Math.floor(Math.random() * 10) + 1;
        	}

        	// Üretilen sayıları ekrana yazdır
        	document.getElementById("tah1").innerText = tut[0];
        	document.getElementById("tah2").innerText = tut[1];
        	document.getElementById("tah3").innerText = tut[2];

        	// Doğru tahmin sayısını tutacak değişken
        	let tutan = 0;

        	// 1. tahmini kontrol et
        	if (s1 == tut[0]) {
            	tutan++; // doğruysa artır
            	document.getElementById("tah1").style.color ="green";
        	} else {
            	document.getElementById("tah1").style.color ="red";
        	}

        	// 2. tahmini kontrol et
        	if (s2 == tut[1]) {
            	tutan++;
            	document.getElementById("tah2").style.color ="green";
        	} else {
            	document.getElementById("tah2").style.color ="red";
        	}

        	// 3. tahmini kontrol et
        	if (s3 == tut[2]) {
            	tutan++;
            	document.getElementById("tah3").style.color ="green";
        	} else {
            	document.getElementById("tah3").style.color ="red";
        	}

        	// Sonucu ekrana yazdır
        	document.getElementById("sonuc").innerText = "Tutrulan Sayı: " + tutan;
                }
            });
</script>