Submitted over 1 year ago

Calculator App using Flexbox, Grid and SCSS

Sviat• 100

@whitetark

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

Hi!

Firstly, I have no idea how to create slider with three items. Secondly, I tried to look at a lot of different usages and handle some errors, and only after that I started to search about commas between numbers. I understand how to do it, but my code that I wrote will be broken, so It needed me to rewrite whole code, that's why I decided to skip it for now. And the last thing, I'm not sure on prefers-color-scheme.

Any additional info, links and especially feedback would be very helpful! Have a nice day!

Community feedback

dev-fa• 120

@dev-fa

Posted over 1 year ago

Hey! Regarding the theme slider, you can give your radio inputs a property appearance: none; that would remove its default styling and will make it look visually empty. Wrap the radio inputs in a pill shaped div then give it some padding. The radio buttons should only get color when they are checked, giving it the appearance of a "slider". You can check my implementation as a reference.

Marked as helpful

Sviat• 100

@whitetark

Posted over 1 year ago

@dev-fa Hi! Wow, what an advice. Thank you so much!

Aashar Mehmood• 130

@Aashar-Mehmood

Posted over 1 year ago

Hi, I have completed the same challenge just today, and I have created the theme slider, You can take a look at code here, may be it help you to build slider. https://github.com/Aashar-Mehmood/JavaScript-Calculator and you can view live website here https://aashar-mehmood.github.io/JavaScript-Calculator.

Regarding your design, The calculator looks too big on large devices, may be set a max-width to container.

Sviat• 100

@whitetark

Posted over 1 year ago

@Aashar-Mehmood Hey! Thank you for your feedback. I have done a slider already. And regarding design, I tried to recreate given design and used ruler for that. Maybe It's kinda bigger than it should be, but I am okay with that. Have a nice day!

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