Submitted over 2 years ago

Tip Calculator w/ Tailwind CSS & Animations

Brian Schooler•440

@superschooler

Preview site View code

This is a solution for...Tip calculator app

HTML
CSS
JS

2junior

Design comparison

SolutionDesign

Solution retrospective

This was a fun one! My first real JavaScript project - I think it turned out great but my JavaScript is a mess. I used Tailwind CSS which complicated the class names a bit, so next time I'll use some Tailwind and some Vanilla CSS.

As far as my JavaScript goes - any suggestions on how to loop through resetting the buttons instead of doing it individually? There's no possible way this is the best solution:

function resetButtons() {
  tip5.classList.remove(
    "text-cyan-900",
    "bg-teal-400",
    "animate__animated",
    "animate__swing"
  );
  tip5.classList.add("bg-cyan-900", "text-white");
  tip10.classList.remove(
    "text-cyan-900",
    "bg-teal-400",
    "animate__animated",
    "animate__swing"
  );
  tip10.classList.add("bg-cyan-900", "text-white");
  tip15.classList.remove(
    "text-cyan-900",
    "bg-teal-400",
    "animate__animated",
    "animate__swing"
  );
  tip15.classList.add("bg-cyan-900", "text-white");
  tip25.classList.remove(
    "text-cyan-900",
    "bg-teal-400",
    "animate__animated",
    "animate__swing"
  );
  tip25.classList.add("bg-cyan-900", "text-white");
  tip50.classList.remove(
    "text-cyan-900",
    "bg-teal-400",
    "animate__animated",
    "animate__swing"
  );
  tip50.classList.add("bg-cyan-900", "text-white");
  tipCustom.classList.remove(
    "text-cyan-900",
    "bg-white",
    "border-2",
    "border-teal-400",
    "animate__animated",
    "animate__swing"
  );
  tipCustom.classList.add("bg-slate-100", "text-slate-500");
  reset.classList.remove(
    "text-cyan-900",
    "bg-teal-400",
    "cursor-pointer",
    "hover:bg-rose-300"
  );
  reset.classList.add("bg-cyan-800", "text-cyan-900");
}

function activateResetButton() {
  reset.classList.remove("bg-cyan-800", "text-cyan-900");
  reset.classList.add(
    "text-cyan-900",
    "bg-teal-400",
    "cursor-pointer",
    "hover:bg-rose-300"
  );
}

Community feedback

Bryan Sanchez•590
@0-BSCodePosted over 2 years ago
Nice work! Love the breathing effect you placed on the title. Haven't really touched Tailwind but I think you may be able to use querySelectorAll to select your buttons by using the class names you provided them. This will return a list of all the buttons and you can use the id attribute to figure out which button to activate and which ones to reset. You can also read through this thread from Stack Overflow.

When it comes to using Vanilla CSS, I'd recommend using the BEM CSS naming convention. I've used this a lot and I can say it really helps with simplifying and organizing your styles.

Hope this helps👋 Cheers! 🎉
Marked as helpful
1
David•8,000
@DavidMorgadePosted over 2 years ago
Hello congratulations on finishing this challenge!

To remove the classes giving a effect of "reset", you can add a common class to the elements that you need to remove the styles on reset, and loop throw them to get the desired result.

First you will need to ´querySelectorAll´ that class then you can use a for loop or forEach and remove/add classes, it can be something like this (I will use fake classnames to simulate the selectos):

const remove items = () => { const needReset = document.querySelectorAll('.resetItems'); / then you use for loop or foreach, and remove/add classes here. / }

Hope my answer helps!
Marked as helpful
1

Please log in to post a comment

Join our Discord community

Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!

Join our Discord