JQuery Vize Final Notu Ortalaması Hesaplama

Bu örneğimizde JQuery ile Vize ve Final Notu Girilen bir öğrenciye ait Ortalama hesaplayarak ve Ortalaması ve Final notuna göre öğrencinin geçme ve kalma durumunu göstereceğiz. Örneğimizde Jquery ile CSS özelliklerini değiştirme, fadeIn ve fadeOut kullanımlarını da inceleyebilirsiniz.

Örneğimizde Vize notunun %40 ile Final Notunun %60 ı toplamı Ortalamayı verecektir. Ortalamanın 50 den düşük olması durumunda veya Final notunun 50 den düşük olması durumunda öğrenci başarısız sayılacaktır. Bu durumların her birini kodlarımızda değerlendireceğiz.

Canlı olarak vize final hesaplamak için vize final hesaplama robotu sayfasına bakınız.

Örneğimizde jquery-3.1.1.min.js dosyasını ve vize-final.js dosyasını script klasöründe tutacağız. vize-final.html dosyamızda ise html ve CSS kodlarımız bulunacak. jquery-3.1.1.min.js dosyasını indirmek için https://jquery.com/download/ adresini kullanabilirsiniz.

vize-final.html dosyamızın içeriği:


<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<style>

	input[type="text"]{
		border: none;
		background: #444444;
		color: #fff;
		padding: 10px;
		width: 150px;
	}
	
	input[type="button"]{
		border: none;
		background: #4444FF;
		color: #fff;
		padding: 10px;
		width: 100px;
	}
	
	
	#sonuc{
		background: #D55B5D;
		width: 450px;
		color: aliceblue;
		text-align: center;
		font-size: 2em;
		margin-top: 10px;
		padding: 50px 0;
		
	}	
</style>
</head>

<body>
<div>
	<input type="text" id="vize" placeholder="Vize Notunu Girin.">
	<input type="text" id="final" placeholder="Final Notunu Girin.">
	<input type="button" id="btn" value="Hesapla">
</div>

<div id="sonuc"> </div>
 
<script src="script/jquery-3.1.1.min.js"></script>
<script src="script/vize-final.js"></script>
</body>
</html>

<!doctype html>

<html>

<head>

<title>Untitled Document</title>

<style>

input[type="text"]{

border: none;

background: #444444;

color: #fff;

padding: 10px;

width: 150px;

}

input[type="button"]{

border: none;

background: #4444FF;

color: #fff;

padding: 10px;

width: 100px;

}

#sonuc{

background: #D55B5D;

width: 450px;

color: aliceblue;

text-align: center;

font-size: 2em;

margin-top: 10px;

padding: 50px 0;

}

</style>

</head>

<body>

<div>

</div>

</body>

</html>

vize-final.js javaScript dosyamızın içeriği:


$(document).ready(function(){
	$("#sonuc").hide();
	
	$("#btn").on("click",function(){
		
		var vizeNotu=Number($("#vize").val());
		var finalNotu=Number($("#final").val());
		var ortalama=(vizeNotu*0.4)+(finalNotu*0.6);
		//yazilimkodlama.com
		if(ortalama>=50 && finalNotu>=50)
			{
				$("#sonuc").css({
					color:"white",
					background:"green"
					//border:"#222222 8px solid"
				}).fadeIn(500).delay(1500).fadeOut(500);
				$("#sonuc").html("Geçtiniz. Ortalamanız : "+ortalama);
			}
		else if(ortalama>=50 && finalNotu<50)
			{
				$("#sonuc").css({
					color:"white",
					background:"#D55B5D"
					//border:"#222222 8px solid"
				}).fadeIn(500).delay(1500).fadeOut(500);
				$("#sonuc").html("Kaldınız. Final Notu 50'den düşük. Ortalamanız : "+ortalama);
			}
		else
			{
				$("#sonuc").css({
					color:"white",
					background:"#D55B5D"
					//border:"#222222 8px solid"
				}).fadeIn(500).delay(1500).fadeOut(500);
				//yazilimkodlama.com
				$("#sonuc").html("Kaldınız. Ortalamanız : "+ortalama);
				
			}
	});
	
});