https://github.com/samuel-amaro/calculator-app
Desafio de codificação Front-End, um aplicativo calculadora.
https://github.com/samuel-amaro/calculator-app
bem-methodology css3 dom-manipulation es6-javascript flexbox grid-layout html-semantics html5 javascript localstorage mobile-first normalize-css rwd-response webstorage-api
Last synced: 5 days ago
JSON representation
Desafio de codificação Front-End, um aplicativo calculadora.
- Host: GitHub
- URL: https://github.com/samuel-amaro/calculator-app
- Owner: Samuel-Amaro
- Created: 2022-09-23T19:15:40.000Z (over 3 years ago)
- Default Branch: main
- Last Pushed: 2022-09-24T13:05:31.000Z (over 3 years ago)
- Last Synced: 2025-08-12T12:49:22.981Z (10 months ago)
- Topics: bem-methodology, css3, dom-manipulation, es6-javascript, flexbox, grid-layout, html-semantics, html5, javascript, localstorage, mobile-first, normalize-css, rwd-response, webstorage-api
- Language: CSS
- Homepage: https://samuel-amaro.github.io/calculator-app/
- Size: 266 KB
- Stars: 1
- 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 a solution to the [Calculator app challenge on Frontend Mentor](https://www.frontendmentor.io/challenges/calculator-app-9lteq5N29). Frontend Mentor challenges help you improve your coding skills by building realistic projects.
## Table of contents
- [Overview](#overview)
- [The challenge](#the-challenge)
- [Screenshot](#screenshot)
- [Links](#links)
- [My process](#my-process)
- [Built with](#built-with)
- [Useful resources](#useful-resources)
- [Author](#author)
## Overview
### The challenge
Users should be able to:
* [x] See the size of the elements adjust based on their device's screen size
* [x] Perform mathmatical operations like addition, subtraction, multiplication, and division
* [x] Adjust the color theme based on their preference
* [x] **Bonus**: Have their initial theme preference checked using `prefers-color-scheme` and have any additional changes saved in the browser
### Screenshot
#### Mobile Result
#### Desktop Result
### Links
- Solution URL: [Repository Project](https://github.com/Samuel-Amaro/calculator-app)
- Live Site URL: [Live Result](https://samuel-amaro.github.io/calculator-app/)
## My process
### Built with
- Semantic HTML5 markup
- CSS custom properties
- Flexbox
- CSS Grid
- Mobile-first workflow
- RWD(Responsive Web Design)
- JavaScript
- Web acessibility
- JavaScript Programming Language
- API DOM JS
- API Web Storage - LocalStorage
- Normalize CSS - [Normalize](https://necolas.github.io/normalize.css/) - Reset CSS
- Methodology BEM(Block Element Modifier) - [BEM](http://getbem.com/introduction/) - Methodology
### Useful resources
- [Article resource](https://web.dev/prefers-color-scheme/) - helped me understand about prefers-colors-scheme
- [Article resource](https://web.dev/building-a-theme-switch-component/) - hepped me build toggle component theme.
## Author
- Website - [Portefólio Samuel Amaro](https://samuel-amaro.github.io/portefolio-website/)
- Frontend Mentor - [@Samuel-Amaro](https://www.frontendmentor.io/profile/Samuel-Amaro)