JSFiddle - React, Tailwind, and code Playground

by David Joseph Guzsik

HTML

<h1>Counter App</h1>
<p>Current Count: 
  <span id="output">0</span>
</p>

<button id="increment">+</button>
<button id="decrement">-</button>
<button id="reset">Reset</button>

CSS

/* No css is needed for this challenge */

JavaScript

/* 
CHEAT SHEET:
- document.getElementById() to select a DOM element by its 'id'
- counterDisplay.textContent updates the text inside the element

---

CHALLENGE DESCRIPTION:
We want to implement a simple Counter App with the following requirements:
- `+` button should increase the counter
- `-` button should decrease the counter
- `Reset` button should turn `Current Count` into `0`
- The counter should not go below `0`
*/

const outputEl = document.getElementById('output');
const incrementEl = document.getElementById('increment');
const decrementEl = document.getElementById('decrement');
const resetEl = document.getElementById('reset');

let initialCounterValue = parseInt(outputEl.innerText.trim(), 10);
let counterValue = initialCounterValue;
const updateOutput = () => {
	outputEl.innerText = counterValue;
};
const changeOutput = (change) => {
	counterValue = Math.max(0, counterValue+change);
	outputEl.innerText = counterValue;
};

incrementEl.addEventListener('click', () => {
  changeOutput(1);
});

decrementEl.addEventListener('click', () => {
  changeOutput(-1);
});

resetEl.addEventListener('click', () => {
	counterValue = initialCounterValue;
  updateOutput();
});