All solutions

What are you most proud of, and what would you do differently next time?

I am most proud of how I expanded on some of the requirements for the project, and challenged myself to add some additional functionality to improve the user experience. For example, if the user enters a custom tip that matches one of the existing button choices, the choice activates. Also, I made sure to not update the display unless both the bill and number of people have values - this is because with the absence of either value there is no tip amount per person or total per person to display. If either of the values are deleted, the display resets -- this is all done within the useEffect.

I think next time I'd try not to overthink the error handling. I got a bit stumped and had to revisit how I was treating that behavior and I think over time I recognized that the solution could be simpler than I originally created.

What challenges did you encounter, and how did you overcome them?

A challenge I encountered was in deselecting one of the tip choice buttons if a user clicked the active button. (ex: user has tip 25% selected, and clicks it again) I overcame this challenge by creating a helper function handleTipClick and associating it to the radio input field's onClick attribute. This function simply determines if the user click matches the pre-existing set tip, and if so, resets the state and does some DOM manipulation to remove the hover class values. It's important to note that this function is separate from the primary handleSelectedTip function, which only runs onChange to set the new tip value. I am curious to see if maybe there could have been a way to handle all this through one function -- but the problem is the onChange attribute is required, and it doesn't fire off unless the tip value actually changes.

What specific areas of your project would you like help with?

For some reason, on mobile devices the SPLITTER logo is hidden -- I suspect it's an error in how my tailwind code is handling the container as the screen size changes size (either the styling in the root or the main container in my App.jsx). When in development, I didn't catch this error because in the chrome browser when previewing responsive screen sizes (even at iPhone SE) the logo appears as intended. However, once I deployed my code and looked at it on my actual phone it's not in view. I'd really appreciate assistance in understanding what adjustments I could make to resolve this!

What are you most proud of, and what would you do differently next time?

I am proud of how DRY my JS functions are. I initially had it broken down into three functions: fetchAdvice, generateAdvice, and renderAdvice. After some thought, even though it worked with three functions, it just didn't seem necessary to have the "intermediary" function of generateAdvice, so I refactored slightly and was able to accomplish the same outcome with just two functions.

I also like how I was able to use a second event listener (in addition to click) to call the API fetch on browser load (DOMContentLoaded). This just allows for a better UI, so that on each load of the browser you see a slip of advice instead of nothing.

What challenges did you encounter, and how did you overcome them?

I was stumped a bit on how to place the dice icon halfway between the advice container and the background. After first taking what turned out to be an overcomplicated approach with an additional ``, I was able to accomplish it with a negative margin-bottom.

The API has a brief two-second caching delay, so I wanted to temporarily disable the button that calls the API, and then enable it again after the delay is finished. I was able to accomplish this by modifying attributes and styles in the DOM, and then using a setTimeout to essentially "reset" my changes after two seconds.

What specific areas of your project would you like help with?

I can't think of anything in particular, I would say if anything -- I'd be curious to know if using a DOMContentLoaded event listener was indeed the correct way to ensure the API is called on each page load.

What are you most proud of, and what would you do differently next time?

This was my first time using Frontend Mentor, so I opted to start with the Getting Started Learning Path to become familiarized with the platform. I was proud of how productive I was in creating a solution in a reasonable amount of time. I styled with Tailwind CSS as this has grown to be my preference, and I believe that significantly helped me complete this sooner.

Next time, I'll be sure to review the style-guide.md in advance of coding. Once I had the Figma file open, I began to work and had to make some retroactive edits that I could have avoided had I reviewed the guide first.

What challenges did you encounter, and how did you overcome them?

While I am familiar with Figma from my previous job where I reviewed designs and interpreted them alongside our developer, I had never built anything myself from a Figma design before. There was a bit of a learning curve in reviewing the design layers/elements to create the most accurate build. The style-guide.md helped with this, where I used the tailwind.config.js to set the colors and font.

Also, I deployed with Vercel for the first time (I've used GitHub pages, Heroku, Netlify). I intentionally chose Vercel because it was a recommended choice by Frontend Mentor, but also because I wanted to try something new and expand my familiarity with deployment solutions. I ran into a 404: NOT FOUND error on deployment, but then after a bit of troubleshooting realized I had to restructure my folders so that the root directory was set to src, which contained both the index.html and images.

Specifically, I had an issue where the main container was not vertically centered. After doing some research, I realized I had to set the body height to 100dvh.

What specific areas of your project would you like help with?

Given that it was my first time building from a Figma design, I'd be curious to learn from others at what strategies they've taken to best interpret these designs when writing their CSS and how accurately I styled it (I had trouble being able to determine the exact margins/padding within the container.