Not Found
Not Found
Not Found
Not Found
Not Found
Oops! You need to be logged in to do that
Not Found
Not Found
Not Found
Not Found
Not Found
Oops! You need to be logged in to do that
Oops! You need to be logged in to do that
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found

Submitted

Vanilla JS, CSS grids, Theme Switchers, calculator, class objects

#bem#semantic-ui#styled-components#vanilla-extract
Yakub 260

@Yakub-Egamnazarov

Desktop design screenshot for the Calculator app coding challenge

This is a solution for...

  • HTML
  • CSS
  • JS
3intermediate
View Challenge

Design Comparison

SolutionDesign

Report

3

Accessibility Issues

0

HTML Issues

View Report

Yakub’s questions for the community

One of the main difficulties was implementing three-state toggle switch changes to the theme of the calculator. However, with useful resources, I was able to overcome this.

Community Feedback

@0GeNN0

Posted

Hi your job is great and there is some feedback 1-- Use semantic elements to avoid accessibility like "main" "header" and "footer" or you can use role attribute to describe the role of the screen readers check this https://dequeuniversity.com/rules/axe/4.3/region?application=axeAPI. 2-- Instead of putting the theme class to the HTML tag give it to the body tag it works too. 3-- If you want to use input for the toggle you should use label too, but I think the 'UL' tag with some of the CSS you will get the job done too 4-- If you could render the sum it will be very good so the user can see the whole sum he could mistake and want to delete rendering the whole sum will help him very will 5 -- The app didn't make the calculation when I click on the equal button if it's not correct so if you can handle this to show an error 'Syntax error' to the user when it happens it will be great.

Marked as helpful

0


Yakub 260

@Yakub-Egamnazarov

Posted

@0GeNN0 Hi, thank you very much for your comments, let me work on the issues and suggestions you have given. And will get back at you so you could check if you don't mind.

0

Please focus on giving high-quality, helpful feedback and answering any questions Yakub-Egamnazarov might have. Here are some key points to consider:

  • Does the solution include semantic HTML?
  • Is it accessible, and what improvements could be made?
  • Does the layout look good on a range of screen sizes?
  • Is the code well-structured, readable, and reusable?

You can read our community guidelines if you're unsure what to post.

Slack logo

Join our Slack community

Join over 100,000 people taking the challenges, talking about their code, helping each other, and chatting about all things front-end!