JSFiddle - React, Tailwind, and code Playground

by AlexGun

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <input id = 'input' type='text'/>
    <span>0</span>
    <button disabled>
    Click Me
    </button>
</body>
</html>

JavaScript

const input = document.getElementById('input')
const span = document.querySelector('span')
const button = document.querySelector('button')
const condition = 12
let counter = 0;
input.addEventListener('keyup', (event) => {
	if (event.code === 'Space') {
  	input.value = ""
    counter++
    span.textContent = counter
    
      if (counter === condition){
      button.disabled = false
      }
  }
})