)
Kod:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Webailesi.com - Taha KOÇAK</title>
<script src="https://code.jquery.com/jquery-3.5.0.min.js"></script>
<link rel="stylesheet" href="https://www.webailesi.com/yonlendir.php?link=https%3A%2F%2Fstackpath.bootstrapcdn.com%2Fbootstrap%2F4.4.1%2Fcss%2Fbootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
</head>
<body>
<style>
.main-container {
background: #eeee;
border-radius: 10px;
margin-top: 100px;
-webkit-box-shadow: 10px 10px 14px 0px rgba(0,0,0,0.5);
-moz-box-shadow: 10px 10px 14px 0px rgba(0,0,0,0.5);
box-shadow: 10px 10px 14px 0px rgba(0,0,0,0.5);
}
.counterBtn{
border : 2px solid white;
border-radius: 5px;
transition: .5s;
}
.counterBtn:hover {
-webkit-box-shadow: 10px 10px 14px 0px rgba(0,0,0,0.17);
-moz-box-shadow: 10px 10px 14px 0px rgba(0,0,0,0.17);
box-shadow: 10px 10px 14px 0px rgba(0,0,0,0.17);
}
</style>
<div class="container">
<div class="row max-height align-items-center">
<div class="col-10 mx-auto col-md-6 text-center main-container p-5">
<h1 class="text-uppercase">Sayaç</h1>
<h1 id="counter">0</h1>
<div class="btn-container d-flex justify-content-around flex-wrap">
<button class="btn counterBtn prevBtn text-uppercase m-2">Sayıyı Eksilt</button>
<button class="btn counterBtn nextBtn text-uppercase m-2">Sayıyı Arttır</button>
</div>
</div>
</div>
</div>
<script>
const buttons = document.querySelectorAll('.counterBtn')
let count= 0
// Buttondaki hareketleri takip ediyoruz
buttons.forEach(function(button){
button.addEventListener('click', function(){
if (button.classList.contains('prevBtn')){
count--
} else if (button.classList.contains('nextBtn')){
count++
}
// Sayacı seciyoruz ve duruma göre renklendiriyoruz
const counter = document.querySelector('#counter')
counter.textContent = count
if (count < 0 ){
counter.style.color = 'red'
} else if (count > 0){
counter.style.color = 'green'
} else {
counter.style.color = '#333333'
}
})
})
</script>
</body>
</html>Ekran Görüntüsü:
