All solutions

I seem to be getting the hang of JavaScript, but with more complexity comes more disorganization in the code. I tried to keep it simple by breaking down functions into smaller functions, but then it's easier to insert errors in the code or mistakenly repeat yourself (and then forget to change something...).

So, my question to you - what principals and practices do you use to keep your code neat and organized right from the beginning?

Any other feedback on my project is always appreciated!

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"
  );
}

This was my first time using Tailwind CSS and I really enjoyed it! It was a lot easier to work with than Bootstrap and I think the project turned out great.

One question I have for you all - how do you think I can better match the color of the overlay in the project design? I felt like I couldn't quite get it right and tried adjusting saturation, lightness, and opacity. Maybe I've just got the color wrong altogether?

I couldn't get the small white edge around the border under the guy's head to go away. Any suggestions?

This one took me a lot longer than expected! I had the Figma file and spent a lot of time trying to get it almost exact. Learned a lot and had fun doing it! Let me know if you see any areas where my code could be improved. I'm sure there are some simpler solutions to some things I did in CSS. This was my first time using Sass as well.

Any feedback is welcome! The thing I struggled with most on this project is rounding the corners of Bootstrap's .container element without Sass. I ended up having to manually round each corner and create media queries to change it based on the screen size. Any ideas how to do it on the container itself?

I completed this project using Bootstrap almost exclusively, with a few exceptions for colors and the quotation svg. One thing that stumped me for a VERY long time was getting the gutters right. I ended up having to nest each testimonial in another div and add padding to it to space them out.

With the vast use of Bootstrap in this project, it seems like it would be an enormous pain in the you-know-what to make changes across all tiles (I think Find & Replace is the easiest option). This leads to my question - how do you decide how far to go with Bootstrap and when to simply use custom CSS for styling?

Any feedback to help make my CSS more efficient would be awesome!

I had a hard time getting the image and text elements to both take up 50% width on the desktop view. I think if I use the background-image property in CSS instead of the image element in HTML it would allow me to more easily accomplish this without distorting the picture. Any other advice / suggestions?

Additionally, I had a hard time figuring out how to center the entire element vertically without setting a top margin with a viewport height attribute. Any thoughts on how to make this work?