Submitted 21 days ago

Calculator app built with HTML | CSS | JS - MikDra1

MikDra1• 5,610

@MikDra1

Preview site(opens in new window)View code(opens in new window)

This is a solution for...

Calculator app

HTML
CSS
JS

3intermediate

View challenge

Design comparison

SolutionDesign

Solution retrospective

What are you most proud of, and what would you do differently next time?

💻 Hello, Frontend Developer Community,

This is my solution for the Calculator app.

Scored 97,5% on Google Pagespeed Insights! 🚀
Solution with 100% W3C validation accuracy 🌟
Custom-built CSS animations for a smooth user experience 💫
Three custom schemes to choose 🖼
You can use calculator with your keyboard ⌨
Fully responsive design crafted with a mobile-first approach 📲
Enjoyed every moment coding this! 😎
Feedback is always welcome—let’s grow together! 🌱
Completed 5 out of 13 Intermediate Challenges so far—keeping up the momentum! 🔥
👨‍💻 Join me on my coding journey as I tackle advanced challenges and add innovative touches to every project.
As I am starting my journey with React I'm really looking forward to hearing your thoughts and suggestions! 💡

Community feedback

Teodor Jenkler• 3,700

@TedJenkler

Posted 21 days ago

Hi @MikDra1,

Nice project! I’m planning to do this one myself soon. I noticed that you can use a dot (.) before any number is entered.

As an extra improvement, I’d recommend adding a useRef to make the buttons controllable with arrow keys. This would make the project more accessible and even more impressive.

Hope this was helpful!

Best, Teodor

Marked as helpful

MikDra1• 5,610

@MikDra1

Posted 21 days ago

@TedJenkler

Dot is perfectly fine. If you write dot as a first value the JS will assume that you want zero before it ☺️

As you can see in the code I’m not using React, but I am planning to do this project soon in React. Maybe then I will use your advice.

Teodor Jenkler• 3,700

@TedJenkler

Posted 21 days ago

@MikDra1: My bad—I only checked the responsiveness and functionality. It's still possible to do with key event listeners and DOM manipulation, but it’s much harder.

Have a nice day / Teodor

Yulia• 320

@YuliaLantzberg

Posted 21 days ago

Hi. It's looking and working great. Just maybe it's better to make a guard preventing division on 0. Also, the dot is not working on the keyboard. About the js, I'd add one class to the "calculator__grid" div and in CSS would target the child divs through it. Then in js it'd take less code lines to add and remove all the classes. But all that are minors. Your work is really good as always. I'm learning a lot from your challenges. I hope I will get to this challenge soon.

Marked as helpful

MikDra1• 5,610

@MikDra1

Posted 21 days ago

@YuliaLantzberg

Thanks for kind words 😁. For classes it might be a good approach. I haven't thought about it. Anyway, if you will do this project soon you can try doing this 😉

Yulia• 320

@YuliaLantzberg

Posted 21 days ago

@MikDra1 Sure I will hehe

Please log in to post a comment

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