JSFiddle - React, Tailwind, and code Playground

by mcsf

HTML

<h2>
  Broccoli count
</h2>
<header>
  <time id="date"></time>
</header>
<p id="counterContainer">
  Enrique has had <span id="counter">0</span> broccoli today.
</p>
<p>
  <button onclick="incr()">
    EAT MOAR
  </button>
</p>

CSS

body {
  background: rgb(121,169,32);
  font-family: "Comic Sans MS";
  text-align: center;
}

p {
  background: rgb(65,129,72);
  padding: 1em;
  border-radius: 10px;
}

#counterContainer {
  transform: scale(1);
}

JavaScript

const options = { weekday: 'long', month: 'long', day: 'numeric' }
date.innerText = (new Date()).toLocaleDateString('en-UK', options)

function incr() {
	const n = Number(counter.innerText) + 1
  const factor = 1 + (n / 10)
	counter.innerText = n
  counterContainer.style.transform = `scale(${factor})`
}