JQuery Vize Final Notu Ortalaması Hesaplama

Konuyu Okuyanlar (0 kayıtlı üye )

sdkbyrm

olwα.ɴeт
Üyelik Tarihi
23 Aralık 2020
Mesajlar
813
Beğeniler
1
Puanı
3
Ticaret: 0 / 0 / 0
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 adresini kullanabilirsiniz.



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




1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52

<!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>
vize-final.js javaScript dosyamızın içeriği:


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43

$(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);

}
});

});
Ekran Çıktısı:

 
Üst Alt