ivobul/index.html

## index.html
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Simple Counter - JavaScript</title>
    <link href="style.css" rel="stylesheet">
  </head>
  <body>
    <div class="counter-box">
      <h1>counter</h1>
      <h1 class="counter">0</h1>
      <div id="btns">
        <button type="button" id="lowerCountBtn" class="btn">Lower Count</button>
        <button type="button" id="addCountBtn" class="btn">Add Count</button>
      </div>
    </div>

    <script src="script.js"></script>
  </body>
</html>

## script.js
const counter = document.querySelector(".counter");
const addCount = document.querySelector("#addCountBtn");
const lowerCount = document.querySelector("#lowerCountBtn");

let count = 0;

addCount.addEventListener("click", incrCounter);
lowerCount.addEventListener("click", decrCounter);

function incrCounter() {
  count++;
  counter.innerHTML = count;

  if (counter.innerHTML > "0") {
    counter.style.color = "green";
  }
  else if (counter.innerHTML === "0") {
    counter.style.color = "orange";
  }
}

function decrCounter() {
  count--;
  counter.innerHTML = count;

  if (counter.innerHTML < "0") {
    counter.style.color = "red";
  }
  else if (counter.innerHTML === "0") {
    counter.style.color = "orange";
  }
}
	<!DOCTYPE html>
	<html>
	<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Simple Counter - JavaScript</title>
	<link href="style.css" rel="stylesheet">
	</head>
	<body>
	<div class="counter-box">
	<h1>counter</h1>
	<h1 class="counter">0</h1>
	<div id="btns">
	<button type="button" id="lowerCountBtn" class="btn">Lower Count</button>
	<button type="button" id="addCountBtn" class="btn">Add Count</button>
	</div>
	</div>

	<script src="script.js"></script>
	</body>
	</html>
	const counter = document.querySelector(".counter");
	const addCount = document.querySelector("#addCountBtn");
	const lowerCount = document.querySelector("#lowerCountBtn");

	let count = 0;

	addCount.addEventListener("click", incrCounter);
	lowerCount.addEventListener("click", decrCounter);

	function incrCounter() {
	count++;
	counter.innerHTML = count;

	if (counter.innerHTML > "0") {
	counter.style.color = "green";
	}
	else if (counter.innerHTML === "0") {
	counter.style.color = "orange";
	}
	}

	function decrCounter() {
	count--;
	counter.innerHTML = count;

	if (counter.innerHTML < "0") {
	counter.style.color = "red";
	}
	else if (counter.innerHTML === "0") {
	counter.style.color = "orange";
	}
	}