JSFiddle - React, Tailwind, and code Playground

by velmurugansp

HTML

<div style="border-width: 3px;">
  <a href="https://www.fabevy.com" class="inc">Increase</a>
  <a href="https://www.fabevy.com" class="dec">Decrease</a>
</div>

<div style="border-width: 3px;">
  <a href="https://www.fabevy.com" class="inc">Increase</a>
  <a href="https://www.fabevy.com" class="dec disable">Decrease</a>
</div>

<div style="border-width: 3px;">
  <a href="https://www.fabevy.com" class="inc">Increase</a>
  <a href="https://www.fabevy.com" class="dec">Decrease</a>
</div>

CSS

div{
  border: solid 3px red;
  padding: 40px;
  margin: 10px;
}

a.disable{
  color: #ccc;
  text-decoration: none;
  cursor: default;
}

JavaScript

function handleIncrease(event){

	console.log(event);
	//Perform the magic: Break communication between HTML & Browser
  event.preventDefault();
  
	// Get the div
  let divEle = this.parentNode; //HTML Collection (Array)
  // divEle = divEle[0]; //HTML Element (Object)
  
  // Get current width
  let currentWidth = divEle.style.borderWidth;
  currentWidth = parseInt(currentWidth);
  
  // Increase it by 1
  currentWidth += 1;
  
  // Apply to that div
  divEle.style.borderWidth = currentWidth + 'px';
  
  //if currentWidth == 2 => enable the Decrease Btn
  
}

function handleDecrease(event){

	event.preventDefault();
  
	// Get the div
  let divEle = this.parentNode; //HTML Collection (Array)
  // divEle = divEle[0]; //HTML Element (Object)
  
  // Get current width
  let currentWidth = divEle.style.borderWidth;
  currentWidth = parseInt(currentWidth);
  
  if(currentWidth >= 2){
    // Decrease it by 1
    currentWidth -= 1;
    // Apply to that div
    divEle.style.borderWidth = currentWidth + 'px';
  }else{
  	// disable the this
  }
}

let incBtns = document.getElementsByClassName('inc');
let decBtns = document.getElementsByClassName('dec');

for(let i=0; i < incBtns.length; i++){
  incBtns[i].addEventListener('click', handleIncrease);
  decBtns[i].addEventListener('click', handleDecrease);
}