Design comparison
Solution retrospective
This is my first intermediate project, and I only built this because I already made a calculator app a while ago. Since I've been seeing a number of calculator solutions in my feed, I wanted to see whether I can reuse my old one in this challenge. I ended up rewriting almost all the JS except the event listeners, but this was a really good practice in writing JS classes!
This calculator can be used with the key pad as well, and also I structured the calculator keys in my HTML in a way where a user can use the tab key if they don't want to use the numpad. The tab functionality somewhat mirrors what my Windows calculator is doing, so I think that's alright for now!
I kept the design's initial value in my calculator, but I will probably remove it later after the screenshot is taken. The only thing I need to figure out later is how to change the screenshot browser's settings and keep it in dark mode, so if anyone's got any ideas please let me know 😆
To build this, I used the calculator by Web Dev Simplified's Kyle as my blueprint; his Vanilla JS calculator is probably the best I've seen so far, so if anyone is interested, do check out his work! Also, I aim to add a second display above the main one for showing the first operand, so hopefully that's coming soon!
Please let me know if there's anything that's broken or not working the way it should. Thank you!
Community feedback
- @Aik-202Posted about 2 years ago
Hi Elaine, this is really amazing!!!!!, the theme switcher is really nice, the responsiveness is on point!. But I have a suggestion, I think it will be really nice if the users get to see each of their input displayed as they are typed. For example I want to calculate 3 × 5, When I enter × it doesn't reflect on the display.. till I maybe input another number or click "="... It will be really great if they get to see each of their input as I enter them.
Marked as helpful1@elaineleungPosted about 2 years ago@Aik-202 Hi Assurance, thanks for checking it out, and yes, this is a point I noted in my README for further development. I just followed the design given in this challenge, and this is the way they designed it, but I agree with you that it would be better for user experience if they can see the previous operand as well, which is why I included this point as something to add in future versions 🙂
0@elaineleungPosted about 2 years ago@Aik-202 Hey Assurance, I just made changes to the calculator to include a small display to show the previous input. I didn't want to include every input, as that could require more space and multiple lines, and I wanted to keep the displays one line only. Anyway, this updated version should be better than having no previous input displayed!
0@Aik-202Posted about 2 years ago@elaineleung Yeah, I've reviewed the site, it's much better, nice work!!!!!
1 - @correlucasPosted about 2 years ago
Hello Elaine, congrats for this amazing solution!
Again a
pixel perfectsolution and what surprises me more is that you don't use Figma files to reach these results!I like a lot the theme switcher, its really amazing! The coolest is the third theme.
I saw that you've used a div to wrap everything, I did this to a challenge and I was not sure if this is a good practice, to wrap all the content with a div, since there's the main that is more important inside a
divthat is a block element without meaning, this can causes accessibility issues?👾My rating for this solution: ⭐⭐⭐⭐⭐
Nice solution, as always! Congrats Elaine, its really amazing to see people customizing solution and doing more than the challenge requires.
Marked as helpful1@elaineleungPosted about 2 years ago@correlucas Hi Lucas, thank you for the comment! I wish I can take credit for being creative, but the theme switcher is actually part of the challenge, and so are the color schemes 😆
Thank you also for pointing out the
divwrapped around the header and main, and to be honest I don't remember what led me to make that decision! I probably was trying too hard to figure out how to work the switch and the calculator keys that I wasn't really thinking about the overall structure. I think you're right about accessibility, because even though the report is not showing any major issues and even though I have my main and header tags, I would still prefer to use a container instead inside the main and header tags. I'll try changing that later!1 - @mattari97Posted about 2 years ago
Hi Elaine. Almost pixel perfect ! Impressive.
I will look at your theme switcher tomorrow. I was going for a similar solution with 3 clickable areas but I went back to a single clickable area because I thought that on mobile I often was clicking on the wrong one because the switch on the design is quite small.
Awesome work! Peace :)
Marked as helpful1@elaineleungPosted about 2 years ago@AntoineC-dev Hey Antoine, thanks for the comment, which made me test it on my phone just now (which I forgot to do before submitting) 😂
I agree, the switch is already small, and on the mobile phone it looks even smaller. I have relatively smaller fingers, and so clicking around was OK, but yeah, I don't think it's good to have it so small, not so good for UX generally. Even other switches on my phone's system UI aren't that small.
1 - @md5daltonPosted about 2 years ago
Hello Elaine.. Impressive work👌
If you want your screenshot to match the design's, set your app to load dark mode as the default theme. Then go to your solution's page in frontendmentor, click the Generate Screenshot button. That's it.
Well at least that's how I did mine in one of my solutions. Hope that helps👍
Marked as helpful1@elaineleungPosted about 2 years ago@md5dalton Thank you for the tip! Will be sure to try it out 🙂
0 - @Source-WebPosted about 2 years ago
Hello, Elaine. I must say I love your theme toggle and as always, you didn't fail to reproduce the design to look like the original.
I have to agree with @Aik-202, the screen inputs should be seen before the screen value is evaluated. I likewise don't think that's the design rather the screen is meant for printing the input and answer. I like to think of the placeholder text in the design as the result (answer) of the evaluated screen value{Eg. 399980+1}. This is what I did in my solution.
Please, do check out my solution. I also left a question for the community and I hope you would help with that.
Nice Job Elaine. :)
1@elaineleungPosted about 2 years ago@Source-Web Thanks for your input and comments, Nwali, means a lot! I just checked out your calculator, and I'll definitely look through your comment there more thoroughly when I have the time.
About the display, I think what you did in having the main display box show both the first and second operands with the operator is something I'd see on graphing calculators and not this kind of simple calculator, most likely due to the limitation in space since everything needs to be displayed on one row. If you check out Web Dev Simplified's tutorial, he has an extra display row above the main display where he shows the first operand and the operator after the operator is pressed, and the main display only shows the number being currently inputted and the resulting evaluation. This also resembles my Windows calculator, and that's what I aim to add later.
0 - @nonozaPosted about 2 years ago
You are an inspiration hey, I love the project :) .Amazing!!
1 - @MikeProducePosted about 2 years ago
Man this is really nice! Hope I can get there someday!
1 - @RafiiMahmudRiizviiPosted about 2 years ago
Amazing work. I just love it. 😍
1
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