Skip to content
OverviewSolutions
4
Comments
5

Jordon Young

@jordon-young120 points

I’m a mysterious individual who has yet to fill out my bio. One thing’s for certain: I love writing front-end code!

Latest solutions

Latest comments

  • Jordon Young•120
    @jordon-young

    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.

  • Jordon Young•120
    @jordon-young

    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
  • Jordon Young•120
    @jordon-young

    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.

  • Jordon Young•120
    @jordon-young

    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.

  • Jordon Young•120
    @jordon-young

    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