Skip to content
OverviewSolutions
4
Comments
5
Jordon Young
@jordon-young

All comments

  • TsuneWeb•260
    @TSune-webSubmitted almost 3 years ago

    Hello, Frontend Mentor community!

    This is my first junior-level challenge. My solution works okay on Chrome but not quite on Firefox. I'd appreciate any advice on styling on different browsers and how you work around it🙏 Or if there's anything else I should focus on, any suggestions will be helpful.

    Happy coding✨

    Tip Calculator Challenge

    1
    Jordon Young•120
    @jordon-youngPosted almost 3 years ago

    Hi @TSune-web,

    I'm looking at your solution in Firefox Developer Edition and Chrome on Windows. I'm not sure what styling issues you're seeing. On my end, they seem to look and function exactly the same on both browsers.

    1
  • Jordon Young•120
    @jordon-youngPosted almost 3 years ago

    This is very well done, and visually accurate. It's cool to see how you handled the custom tip field because it's so different from how I solved the same problem.

    Responsive Notes

    • Everything flows well until width < 375px. If you set a min-width on your body or card, in most browsers it will scale or zoom instead of breaking the layout. In Firefox responsive view it doesn't automatically zoom, but it does in Chrome and Edge. In any case, that should keep the layout intact.
    • The calculated result text on mobile needs to be smaller to match the design, but also it fits better

    Functional Notes

    • I think it would be convenient if the totals are calculated when the custom tip field is clicked. When the user clicks a predefined tip %, the totals calculate. If the user then clicks on the custom tip already containing a value, nothing happens until the value is modified.

    Nice job getting your HTML issues down to zero! I have a lot of warnings to sort through 🙃

    Marked as helpful
    1
  • Jordon Young•120
    @jordon-youngPosted almost 3 years ago

    The count up is sweeeet!

    Your desktop layout is brilliantly accurate. This is a good example of how the little things (animations and interactions) are what bring everything to life.

    0
  • Charlie•360
    @Charlie025xSubmitted almost 3 years ago

    I have just completed this challenge using React.js.

    First I worked on a Vanila JS solution that utilizes state and a fetch request to render cards for every category object in the data.json. However I hit a wall getting all the cards to rerender when I changed the value on the state. So I just switched to using React and after taking the time to relearn React, I got my cards rendering and rerendering perfectly on state change.

    May I have tips on how to further optimized my jsx code? Or even on fixing the Vanilla JS version's branch. I'd appreciate any feedback.

    made with React and SCSS

    #sass/scss#react
    2
    Jordon Young•120
    @jordon-youngPosted almost 3 years ago

    I'm not sure if looking at my project would help. I'll try to explain what I did in plain English.

    First of all, I didn't try to keep track of state or re-render elements.

    When the page loads, my script grabs the JSON data and hands it to the timeframe button 'click' event handlers. The 'data' is in the event handler callback, so I didn't have to think about making it accessible outside of my setup script.

    Actually displaying the data depends on your HTML, IDs, and classes.

    1. Timeframe button clicked (each button's callback has its timeframe 'value')
    2. I queried the DOM for every activity-card
    3. I iterated over the activity-cards using their specific activity and timeframe to pull from the data object and set the corresponding elements' innerText

    How I grabbed the correct elements was a mix of IDs and CSS Classes. I made the ID for each activity-card the activity name, and I had an element inside each card for .hours and .previous-hours.

    1
  • Jordon Young•120
    @jordon-youngPosted almost 3 years ago

    Nice job on the desktop design!

    I like your transitions. I never thought to move any of the text. Proportions on the cards are great.

    My only comments on the desktop design are:

    • the grid gap should be the same for rows and columns
    • the footer is very difficult to read because of the low text color contrast

    I did my solution mobile first because I thought it would be too difficult to responsively minimize everything. Good luck as you finish! Don't be afraid of refactoring code or making a copy of your project and trying mobile first media queries (min-width).

    Marked as helpful
    1