https://github.com/amerrika/calculator-app

Frontend Mentor challenge - Rock Paper Scissors
https://github.com/amerrika/calculator-app

calculator-app css-grid custom-properties frontend-mentor inkscape scss themeswitch vuejs

Last synced: 10 days ago
JSON representation

Frontend Mentor challenge - Rock Paper Scissors

• Host: GitHub
• URL: https://github.com/amerrika/calculator-app
• Owner: amerrika
• Created: 2024-02-14T18:48:25.000Z (12 months ago)
• Default Branch: main
• Last Pushed: 2024-02-14T19:00:01.000Z (11 months ago)
• Last Synced: 2024-11-14T22:14:37.642Z (2 months ago)
• Topics: calculator-app, css-grid, custom-properties, frontend-mentor, inkscape, scss, themeswitch, vuejs
• Language: SCSS
• Homepage: https://amerwebdev-calculator.netlify.app/
• Size: 275 KB
• Stars: 0
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# Frontend Mentor - Calculator app solution

This is my solution to the [Calculator app challenge on Frontend Mentor](https://www.frontendmentor.io/challenges/calculator-app-9lteq5N29).

## The Challenge

Your users should be able to:

- See the size of the elements adjust based on their device's screen size

- Perform mathematical operations like addition, subtraction, multiplication, and division

- Adjust the color theme based on their preference

## Extra Challenge

- I created simple custom favicon for this project with Inkscape.

## What I learned

- CSS clump() function is very useful for setting gap & width of an element. I used it to set width and grid-gap for my buttons-wrapper so there was no need to use media queries.

## Acknowledgments

I got inspiration for this solution from https://github.com/saadman-galib/vue-calculator-app/tree/master