Jquery ile Beğendim - Beğenmedim Uygulaması

Bu yazımızda Css ve Jquery kullanarak beğen butonu nasıl yapılır onu öğreneceğiz. Özellikle Facebook gibi sitelerde bu tarz butonları çok görüyoruz. Kullanıcı paylaşılan birşeyi beğeniyorsa beğen butonuna tıklayarak bunu belirtir. Hatta bazı sitelerde beğenmedim butonu bile oluyor 🙂 Bu yüzden uygulamamıza ikisinide ekledim.

Konuyu daha fazla uzatmadan kodlarımıza geçelim.

Html Kodları

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.1/css/all.css" integrity="sha384-gfdkjb5BdAXd+lj+gudLWI+BXq4IuLW5IT+brZEZsLFm++aCMlF1V92rMkPaX4PP" crossorigin="anonymous">
</head>
<body>
<div>
<div class="like">
<i class="fa fa-thumbs-up"></i>
<span>Beğen</span>
<span class="vertical-line"></span>
<span class="like-score">0</span>
</div>
<div class="dislike">
<i class="fa fa-thumbs-down"></i>
<span>Beğenme</span>
<span class="vertical-line"></span>
<span class="dislike-score">0</span>
</div>
</div>
</body>
</html>

<!DOCTYPE html>

<html>

<head>

</head>

<body>

<div>

<span>Beğen</span>

</div>

<span>Beğenme</span>

</div>

</body>

</html>

Önemli İconlar için fontawesome versiyon 5.6.1’i sayfamıza dahil ediyoruz.

Css Kodları

.like, .dislike {
color: #41ADD1;
text-decoration: none;
border: 1px solid #41ADD1;
padding: 8px 16px;
margin-right: 10px;
cursor: pointer;
border-radius: 4px;
display: inline-block;
font-size: 18px;
}
.vertical-line {
width: 2px;
height: 12px;
background: #41ADD1;
display: inline-block;
}
.like-score, .dislike-score {
color: #41ADD1;
}

.like, .dislike {

color: #41ADD1;

text-decoration: none;

border: 1px solid #41ADD1;

padding: 8px 16px;

margin-right: 10px;

cursor: pointer;

border-radius: 4px;

display: inline-block;

font-size: 18px;

}

.vertical-line {

width: 2px;

height: 12px;

background: #41ADD1;

display: inline-block;

}

.like-score, .dislike-score {

color: #41ADD1;

}

Jquery Kodları

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
$(document).ready(function () {
$(".like").click(function () {
var likeScore = parseInt($(".like-score").text());
likeScore++;
$(".like-score").text(likeScore);
});
$(".dislike").click(function () {
var dislikeScore = parseInt($(".dislike-score").text());
dislikeScore++;
$(".dislike-score").text(dislikeScore);
});
});
</script>

$(document).ready(function () {

$(".like").click(function () {

var likeScore = parseInt($(".like-score").text());

likeScore++;

$(".like-score").text(likeScore);

});

$(".dislike").click(function () {

var dislikeScore = parseInt($(".dislike-score").text());

dislikeScore++;

$(".dislike-score").text(dislikeScore);

});

</script>

Kısaca yazdıklarımızı özetlersek;

► Class’ı like olan etiketin tıklanma anında, class’ı like-score olan etiketin değerini alıp int’e çeviriyoruz. Daha sonra 1 arttırıp tekrar yazdırıyoruz.

► Class’ı dislike olan etiketin tıklanma anında, class’ı dislike-score olan etiketin değerini alıp int’e çeviriyoruz. Daha sonra 1 arttırıp tekrar yazdırıyoruz.

Uygulamamızın Son Hali

Umarım sizin için faydalı bir yazı olmuştur.

Şu yazılar da ilginizi çekebilir.

Animasyonlu Hamburger İcon Yapımı

Jquery ile Butona Tıklayınca Metin Kutusundaki Sayıyı Artırmak ve Azaltmak

Yeni bir yazımda görüşmek üzere.

Jquery ile Beğendim – Beğenmedim Uygulaması

Yazar Hakkında

Yorum Yazın

Benzer Yazılar

Yazar Hakkında

Yorum Yazın