Design comparison
Solution retrospective
One of my favorite projects that and a project that I wanted to create since day one of learning web development. It feels ten times cooler because now I'm built it with modern tools such as: React, TailwindCSS, etc. TailwindCSS came in handy to make all the themes and change the colors easily. I feel like every other option out there, such as using CSS :root variables would've made the matter a lot harder than it is. What comes to the main functionality of the app, I was planning on making it with just useState, but once I managed to do that pretty easily, I wanted to make this a bit more challenging. So, I went to research useReducer, after a bunch of videos, articles and reading the docs, I managed to build it with just useReducer. Will definitely use useReducer in the upcoming projects. As an addition I added a small section in the main display, that will show the previous number, current number and the operation, so the user doesn't have to guess what's happening behind the scenes. I hope you'll enjoy using it as much as I enjoyed coding it!
Don't forget to leave your feedback in the comments' section 👨🏻💻 Cheers 👾
Community feedback
- @Sdann26Posted over 2 years ago
Adding to the previous comment, personally I would add padding top and down to the body and give the background the same color as the main
background-color: rgb(58, 71, 100).The reason is that there is little space between the top and bottom. This was so that you would have used buttons instead of just label in the part to change the view, since the label could be positioned so that it comes out on top as the number and the button is inside the box to change styles to the calculator. If you achieve that it would be the only detail that would be missing in your project because everything else you have done quite well. The experience shows!
Good Coding!
Marked as helpful0 - @FluffyKasPosted over 2 years ago
Heyo,
This looks amazing. I'm trying to wrap my head around useReducer since a few days. It's complicated but seems like this challenge is the perfect use case for it. How you used it here seems easy enough to follow (as useReducers go.. >.<). Also, I never thought I'll say this but Tailwind really suits so well for this. It makes the theme-related code easy to follow (although I could argue about chained ternary operators, but it still looks clear enough).
The only improvement I could suggest is about your theme switch. It would be nice if all the elements involved would be grouped together a bit better with something more semantic than a div. A form and fieldset perhaps, to wrap around all the labels, THEME text and inputs. Those labels belong to the form so I think they shouldn't be outside of it. The THEME text is also outside of this, even though it's logically the title of the whole form. I'd use a <legend> element for this. But I appreciate how hard it is to style forms properly, it's usually a bit of a headache.
Marked as helpful0@kens-visualsPosted over 2 years agoHey @FluffyKas 👋🏻
While reading your comment, I remembered how I had exactly the same thoughts about
useReducerbeing hard and chained ternary operators. Yet,useReducercame out to be pretty easy once you get the hang of it. And what comes to chained ternaries, as you already said it's pretty easy to follow, that's why I didn't see the need to oversimplify it.It's nice that you pointed out the theme switcher, because I honestly never thought of it as any sort of
<form>element. Perhaps because I was so concerned about how I'm going to make the theme switcher just using Tailwind CSS. There are thousands of regular switches on the internet, but there was none with 3 steps.Thanks for the suggestions, I really appreciate you taking the time to read the code. 👨🏻💻 Cheers 👾
0
Please log in to post a comment
Log in with GitHub
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