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>
Sonuc
Programımızın son hali
