Skip to content
Submitted over 3 years ago

Calculator built with XState and React

accessibility, react, vanilla-extract, xstate, next
Alex•2,010
@AlexKMarshall
A solution to the Calculator app challenge
Preview (opens in new tab)Code (opens in new tab)

Solution retrospective

This was my first time using XState for a full project, and I found it very useful for setting up the logic of this app.

I loved the theming of this. It was the first time I didn't have to tweak the contrast for accessibility either. CSS Custom Properties made this very straightforward.

Any feedback welcome

Code

Please log in to post a comment

Log in

Community feedback

  • Raymart Pamplona•16,040
    @pikapikamart

    Hey, really nice work on this one. Layout in general looks really great.

    This challenge makes it hard for me suggest some things out but for just little ones, here are some:

    • Theme toggles should be wrapped inside a fieldset along with a legend tag. The legend tag text-content should be the theme word, this way users will know what are the purpose of the set of radio-buttons.
    • Adding a visual-indicator on those toggles. You could use focus-within and target the small-circle to have an outline. That way, when the focus is on the radio-buttons, the selector will put an outline on the circle.
    • Adding cursor: pointer for those interactive elements on desktop layout so that they appear more natural since they are interactive.
    • You could have added a screen-reader only h2 inside the main that describes what is the main content is all about.
    • button does not need type="button" since they are not inside a form that turns them to type="submit".
    • Also, you could achieve those shadow at each button's bottom by using a box-shadow with inset like:
        box-shadow: inset 100px 1px 1px 1px red;

    on the button.

    Aside from those, really great job on this one.

    Marked as helpful

Join our Discord community

Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!

Join our Discord