Can I add functionality to this number incrementor?-CodePudding

I am still learning JavaScript so I wanted to use this as an added opportunity to learn more. Currently, the code is written in only HTML & CSS. Where I need help is in making this work with JavaScript.

I saw a number incrementor/decrementor (like the one used to include more items or less into a shopping cart), and I was trying to imitate this cool stuff. But, I am not very sure how to code the Vanilla JS to make it work.

There are 5 slides, I just want the plus and minus buttons to work.

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  width: 100%;
  height: 100vh;
  background-color: #888888;
  display: grid;
}

div.body {
  align-self: center;
  justify-self: center;
}

div.body div.inner {
  display: flex;
  height: 60px;
  width: fit-content;
  column-gap: 10px;
}

div.body div.inner div.num_slides {
  background-color: #409bd0;
  display: flex;
  height: inherit;
  width: 60px;
  overflow: hidden;
  font-family: 'Yu Gothic UI';
}

div.body div.inner div.num_slides div.num {
  display: flex;
  align-items: center;
  justify-content: center;
  height: inherit;
  min-width: 60px;
  font-size: 40px;
  font-weight: 600;
}

div.body div.inner div.btn {
  background-color: #d0d0d0;
  height: 100%;
  width: 60px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 40px;
  font-weight: 900;
  color: #333333;
}

div.body div.inner div.btn:hover {
  background-color: #d0d0d0;
  cursor: pointer;
}

div.body div.inner div.btn.deactivated {
  opacity: 0.6;
  cursor: not-allowed;
}

<div >
  <div >
    <div  id="minus">
      <span>&minus;</span>
    </div>
    <div >
      <div >1</div>
    </div>
    <div  id="plus">
      <span>&plus;</span>
    </div>
  </div>
</div>

Please help me out, guys. Thank You!

CodePudding user response：

First, you need a script to listen to click Events and then execute the script. For that, you can use addEventListener.

Then you need a variable like index to act as a counter. If you click on minus the counter needs to be lowered by 1 with variable-- or in the other case raised with variable .

After that, you change the content of the button with textContent and just let it pull the counter variable as content.

Last but not least, you need to prevent the minus-button to work if it reached 1. You can do this CSS-wise by adding pointer-events: none to the deactivated class

var buttonMinus = document.querySelector('#minus'),
    buttonPlus = document.querySelector('#plus'),
    button = document.querySelectorAll('.btn');
    buttonText = document.querySelector('.num');
var index = 1; //variable acting as counter

/* eventListener to listen if you clicked on the minus button */
buttonMinus.addEventListener('click', function() {
  index--; //lowers the counter by 1
  updateText(); //runs next fucntion
})

/* eventListener to listen if you clicked on the plus button */
buttonPlus.addEventListener('click', function() {
  index  ; //raises the counter by 1
  updateText(); //runs next function
})

/* function to updates the text */
function updateText() {
  buttonText.textContent = index; //updates the text
  /* adds / removes the deactivated class depending if the index is 1 or not */
  switch (index) {
    case 1:
      buttonMinus.classList.add('deactivated');
      break;
    case 100:
      buttonPlus.classList.add('deactivated');
      break;
    default:
      button.forEach(el => el.classList.remove('deactivated'));
      break;
  }
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  width: 100%;
  height: 100vh;
  background-color: #888888;
  display: grid;
}

div.body {
  align-self: center;
  justify-self: center;
}

div.body div.inner {
  display: flex;
  height: 60px;
  width: fit-content;
  column-gap: 10px;
}

div.body div.inner div.num_slides {
  background-color: #409bd0;
  display: flex;
  height: inherit;
  width: 60px;
  overflow: hidden;
  font-family: 'Yu Gothic UI';
}

div.body div.inner div.num_slides div.num {
  display: flex;
  align-items: center;
  justify-content: center;
  height: inherit;
  min-width: 60px;
  font-size: 40px;
  font-weight: 600;
}

div.body div.inner div.btn {
  background-color: #d0d0d0;
  height: 100%;
  width: 60px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 40px;
  font-weight: 900;
  color: #333333;
}

div.body div.inner div.btn:hover {
  background-color: #d0d0d0;
  cursor: pointer;
}

div.body div.inner div.btn.deactivated {
  opacity: 0.6;
  cursor: not-allowed;
  pointer-events: none;
}

<div >
  <div >
    <div  id="minus">
      <span>&minus;</span>
    </div>
    <div >
      <div >1</div>
    </div>
    <div  id="plus">
      <span>&plus;</span>
    </div>
  </div>
</div>

CodePudding user response：

You don't need any slides. You just need to select your button elements one by one, add listeners to them and change textContent of the "counter" element when one of the buttons is clicked