All solutions

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

Particular features are:

• Modal display, with create portal
• Responsive navbar, with Tailwind CSS

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

• Significant prop-drilling for handling the Modal
• In a challenge review, I would try a state management tool (there is more than one)

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

Somebody solved this challenge? Did you use a state management tool?

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

The toggle switch is even better than the design requirement. It's animated.

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

Search about toggling between light theme and dark theme, with css and a small Javascript snippet.

The current solution does not include the use of localStorage for keeping the theme selection.

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

Wish to better understand how to detect the "system" dark theme preference setting, for the case when using localStorage for saving the theme selection.

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

• Modify the input form layout programmatically, depending on units system: metric or imperial.
• 0.8 seconds waiting for the next user's keystroke, for re-rendering the output results. That way, the user gets the result after the input data into each field is done. Too many re-renders avoided.

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

• A pretty extense layout work. Done thanks to Figma.

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

Organized all the styling css code in three separate files, for a total 590 lines (including spaces). This facilitates following the code.

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

Had to find out for some css effects

• Modifying svg images color, on hover
• The "aura" behind Jeremy's image

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

The pink "aura" effect made applying a simple solution. Not sure if that is the best. Would appreciate your sharing solutions.

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

Method for selecting the tip rate, with useState and onClick action.

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

Entering data into a type="number" input field can be uncomfortable in a mobile phone, due to lack of delete key.

To make it more user friendly, the initial value is set to empty string "", even when it's a type="number". That way, the placeholder shows up, and the cursor goes far right when on focus.

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

Found a CSS trick for setting background colors, depending on className.

Found how to fetch nested objects from a JSON file.

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

Had to review about how to create a self-responsive grid.

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

Created an "isLoading" state which allowed to render a spinner, and to disable the button.

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

Found a trick for triggering the fetch(API) on useEffect.

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

For mobile screen, onTouchStart and onTouchEnd used for having a hover-like effect. But the effect is a bit strange. Would appreciate any feedback.

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

Configured mouse events instead of the 'hover' action for the page button and the mobile menu dropdowns.

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

Using nested ul > li > ul > li tags for displaying the sub-menus.

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

Learn more about how the 'hover' actions work in touch-screens.

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

Created a snippet for modifying the fill color of a particular bar, that one showing "today" value

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

Had to get familiar with the Recharts library. It helped watching a couple of video tutorials.

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

The tooltip position is not exactly as shown in the design... Someone succeded? Would appreciate sharing that part of the solution.

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

Found library for formatting credit card input number. Also the method for validating the input... video tutorials and ChatGPT were helpful.

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

Refactored some features:

• Show dummy card information on page load.
• Hide error messages onFocus
• Clear error messages when start re-writing

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

Regarding the input group for month / year, the labels are not exactly as shown in the design... anyone did it better?

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

Had to find out how to use the Javascript addListener to manipulate sibling elements, in an array generated by querySelectorAll.

In this case, toggling the class of a child element.

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

In the navbar styling, used a calc() for setting the inline padding (left - right). So the navbar fits acceptably into different desktop screen sizes.

I would try similar in future projects.

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

Worked a grid solution with four areas which had to move around to make the whole page responsive. Plenty of styling code.

Had to figure out the areas' dimensions, in lack of access to a Figma.

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

Would like to compare with other grid solutions

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

Refactored the application, retrieving data directly from data.json, by fetch("./data.json").

Will do similar in future vanilla JS application.

A compact solution for checking the validity of days/month combination. Chat GPT provided ideas. Sometimes , dilemma arises regarding days elapsed since the end of the previous month. Some convention adopted, as explained on top of the script.js. The outputs are cleared by an onfocus() event. This makes sure the results are from the latest calculation.

A special case of ordered list (ol) indent and styled marker.

Styling mistake regarding button hover was fixed.

The functionality script is the challenge. Anyone to share alternative solutions?