HTML:
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8'>
<meta http-equiv='X-UA-Compatible' content='IE=edge'>
<title>Licznik</title>
<meta name='viewport' content='width=device-width, initial-scale=1'>
<link rel='stylesheet' type='text/css' media='screen' href='main.css'>
<script src='main.js' defer></script>
</head>
<body>
<div id="counter">
<button id="subtract">-</button>
<span id="count">0</span>
<button id="add">+</button>
</div>
</body>
</html>
CSS:
#counter {
display: inline-block;
background: #ececec;
border: 1px solid black;
border-radius: 0.5rem;
}
#counter button {
margin: 0 1rem;
padding: 0.6rem 1rem;
border: none;
color: blue;
font-size: 2rem;
background: none;
}
#counter span {
font-size: 2rem;
margin: 0rem 1rem;
}
JS:
const btn_add = document.getElementById("add");
const btn_subt = document.getElementById("subtract");
const count = document.getElementById("count");
function updateCounter(action) {
// 0 (false) - odjąć, 1 (true) - dodać
let temp = parseInt(count.innerHTML);
action ? temp++ : temp--;
count.innerHTML = temp;
}
btn_add.addEventListener('click', () => {
updateCounter(true);
});
btn_subt.addEventListener('click', () => {
updateCounter(false);
});
Co do tego JSONa to:
const response = {
min: -5,
max: 5
}
function updateCounter(action) {
// 0 (false) - odjąć, 1 (true) - dodać
let temp = parseInt(count.innerHTML);
if(action) {
temp++;
if(temp > response.max) return;
} else {
temp--;
if(temp < response.min) return;
}
count.innerHTML = temp;
}