Tip calculator

Community feedback

• 

  Marzuk Sanni•1,360

  @ZukizukPosted 10 months ago

  Hello @Senibo

  Your solution looks great!

  I have few suggestions on what you asked of that might be of help to you:

  First of all concerning the button, you can use JS to add a class to the button that was last clicked for example

  const buttons = document.querySelectorAll('.myButton');
  buttons.forEach(button => {
    button.addEventListener('click', function() {
      buttons.forEach(btn => btn.classList.remove('clicked'));
      this.classList.add('clicked');
    });
  });
  

  You can add the clicked class to the button which was clicked and remove it from the previously clicked button with the JS provided above. So all you have to do is to set your stylings for when the button is clicked and when it's not clicked

  Also with the reset button you can consider using a psuedo-element like ::before and ::after to cover the reset button fully and make it appear only when it's needed like with the button example above. You can use opacity to adjust the color to make it disabled like the one in the design just don't forget to make the psuedo element bg-color the bg-color of the reset button and make it kinda see through with opacity

  I hope it helps!

  Other than that, great job!

  Marked as helpful

  2

  ---

  

  Senibo Don-Pedro•190

  @Senibo-Don-PedroPosted 10 months ago

  Thank you very much @Zukizuk

  0