Penurunan dan Peningkatan
<!DOCTYPE html>
<html>
<head>
<title>Latihan koding informatika MAN Kapuas</title>
<stle>*{
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: Arial, Helvetica, sans-serif;
}
.title{
margin-top: 80px;
text-align: center;
}
.container{
width: 450px;
max-width: 95%;
margin: 25px auto;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
grid-gap: 20px;
border: 2px solid #555;
padding: 50px;
}
.content{
font-size: 45px;
}
.input-btn{
display: flex;
justify-content: space-between;
align-items: center;
gap: 10px;
}
.input-field{
margin-bottom: 20px;
}
input{
width: 80px;
outline: none;
border: 2px solid #555;
padding: 5px;
font-size: 18px;
text-align: center;
}
.input-btn h5{
margin-left: 12px;
margin-bottom: 3px;
}
button{
padding: 7px 10px;
font-size: 17px;
font-weight: 500;
letter-spacing: 1.2px;
border: 2px solid #000;
outline: none;
border-radius: 5px;
cursor: pointer;
background-color: #0056bf;
color: #fff;
}
.decrement{
background-color: red;
}
.resetBtn button{
background-color: limegreen;
}</style>
</head>
<body>
<h1 class="title">
Increment & Decrement
</h1>
<div class="container">
<h1 class="content">00</h1>
<div class="input-btn">
<div class="input-field">
<h5>+ Range</h5>
<input type="number" min="1" max="200" id="increment" value="1">
</div>
<button class="increment">Increment</button>
<button class="decrement">Decrement</button>
<div class="input-field">
<h5>- Range</h5>
<input type="number" min="1" max="200" id="decrement" value="1">
</div>
</div>
<div class="resetBtn">
<button>Reset</button>
</div>
</div>
<script>
var content = document.querySelector('.content')
var incrementRange = document.getElementById('increment')
var decrementRange = document.getElementById('decrement')
var incrementBtn = document.querySelector('.increment')
var decrementBtn = document.querySelector('.decrement')
var resetBtn = document.querySelector('.resetBtn button')
var result = 0
incrementBtn.addEventListener('click', ()=>{
if(content.innerText == 200){
alert("Value won't be more than 200.")
}
else if(result < 200){
var incrementVal = parseInt(incrementRange.value)
result += incrementVal
content.innerText = result
}
if(content.innerText > 0){
decrementBtn.style.backgroundColor = '#0056bf'
}
if(content.innerText == 200){
incrementBtn.style.backgroundColor = "red"
}
zero()
})
decrementBtn.addEventListener('click', () => {
if(content.innerText == 0){
alert("Value won't be less than 0.")
}
else if(result > 0){
var decrementVal = parseInt(decrementRange.value)
result -= decrementVal
content.innerText = result
}
if(content.innerText == 0){
decrementBtn.style.backgroundColor = "red"
}
if(content.innerText < 200){
incrementBtn.style.backgroundColor = "#0056bf"
}
zero()
})
function zero(){
if(result > 200){
result = 200
content.innerText = result
incrementBtn.style.backgroundColor = "red"
}
if(result < 0){
result = 0
content.innerText = result
decrementBtn.style.backgroundColor = "red"
}
if(content.innerText < 10){
content.innerText = `0${result}`
}
}
incrementRange.addEventListener('keyup', range)
decrementRange.addEventListener('keyup', range)
function range(e){
if(parseInt(e.target.value) > 200){
e.target.value = 200
}
if(parseInt(e.target.value) < 1){
e.target.value = 1
}
}
resetBtn.addEventListener('click', ()=>{
incrementRange.value = 1
decrementRange.value = 1
result = 0
content.innerText = `0${result}`
incrementBtn.style.backgroundColor = "#0056bf"
decrementBtn.style.backgroundColor = "red"
})
</scrip>
</body>
</html>
0 komentar: