Widget update pionts

Vanilla javascript imperative handle forms

by Oleh Kotsubko

HTML

<div id="left-team" class="team d-flex">
   <div style="width: 160px">
    <b>Team 1</b>
  </div>
  <div class="d-flex d-flex-column">
    <label for="i3">Points</label>
    <input id="i3" class="js-number" value="0" type="number">
  </div>
  <div class="d-flex d-flex-column">
    <label for="i4">Total</label>
    <input id="i4" class="js-total" value="0" type="number">
  </div>
  <button class="js-button">Update State</button>
</div>

<div id="left-right" class="team d-flex">
  <div style="width: 160px">
    <b>Team 2</b>
  </div>
  <div class="d-flex d-flex-column">
    <label for="i1">Points</label>
    <input id="i1" class="js-number" value="0" type="number">
  </div>
  <div class="d-flex d-flex-column">
    <label for="i2">Total</label>
    <input id="i2" class="js-total" value="120" type="number">
  </div>
  <button class="js-button">Update State</button>
</div>

CSS

.team {
  align-items: flex-end;
  gap: 16px;
  margin-bottom: 24px;
}

.d-flex {
   display: flex;
}

.d-flex-column {
  flex-direction: column;
}

JavaScript

function teamUpdateHandler(selector) {
  const team = document.getElementById(selector)
  const teamButton = team.querySelector(".js-button")
  const teamNumber = team.querySelector(".js-number")
  const teamTotal = team.querySelector(".js-total")
  
  let totalTouched = false
  
  teamNumber.addEventListener('focus', function(e) {
  	e.target.value = ""
  })
  
  teamNumber.addEventListener('blur', function(e) {
    if(e.target.value === "") {
    	e.target.value = "0"
    }
  })
  
  teamTotal.addEventListener('focus', function(e) {
  	totalTouched = true
  })

  teamButton.addEventListener('click', function(e) {
    e.preventDefault()
    
    const total = Number(teamTotal.value)
    const points = Number(teamNumber.value)
    
    // Prevent all manipulation on empty state
    if (teamTotal.value === "0" && teamNumber.value === "0" && !totalTouched) {
    	return
    }
    
    if(teamNumber.value !== "0") {
    	teamTotal.value = total + points
      teamNumber.value = "0"
      
      // Send points as usual
      console.log('Added points', points) 
      
    } else if(teamNumber.value === "0" && totalTouched) {
    	totalTouched = false
      
    	// Send total if something went wrong
    	console.log('Fix total value', total)
      
    }
  })
}

teamUpdateHandler("left-team")
teamUpdateHandler("left-right")