Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/raizacirne/calculadora-de-gorjeta

Calculadora de gorjeta web, feita com JavaScript puro. Permite aos usuários calcular a gorjeta com base no valor da conta, porcentagem desejada e número de pessoas. Com uma interface simples e responsiva com estilização avançada Sass, oferece uma experiência intuitiva ao usuário.
https://github.com/raizacirne/calculadora-de-gorjeta

function javascript sass sass-mixins

Last synced: 19 days ago
JSON representation

Calculadora de gorjeta web, feita com JavaScript puro. Permite aos usuários calcular a gorjeta com base no valor da conta, porcentagem desejada e número de pessoas. Com uma interface simples e responsiva com estilização avançada Sass, oferece uma experiência intuitiva ao usuário.

Awesome Lists containing this project

README 

        
# 📋 Indíce



- [Bem-vindo](#id01)

- [Proposta](#id02)

- [Desafio](#id03)

- [Aprendizado](#id04)

- [Prosseguimento](id05)

- [Screenshots](#id06)

- [Links](#id07)

- [Tecnologias utilizadas](#id08)

- [Pré-requisitos](#id09)

- [Procedimentos de instalação](#id010)

- [Informações](#id011)



# Bem-vindo! 👋 



**Calculadora de Gorjeta**





## 🚀 Proposta 



Aplicativo web para calcular a gorjeta a partir de uma conta, porcentagem de gorjeta e número de pessoas. Ele também fornece o total com gorjeta e o valor da conta dividido pelo número de pessoas.





## :trophy: Desafio 



- formatarDinheiro(value): Esta função formata o valor para exibição em formato de dinheiro (R$) com duas casas decimais.



- pluralSingular(value): Esta função determina se deve ser usado o singular ou plural dependendo do valor. Retorna "X Pessoa" se o valor for igual a 1 e "X Pessoas" se for maior que 1.



- atualizar(): Esta função é chamada quando o "Atualizar" é selecionado. Ela recupera os valores inseridos pelo usuário, calcula a gorjeta, o total com gorjeta e o valor da conta dividido pelo número de pessoas, e então atualiza os elementos HTML correspondentes com os resultados calculados.



- Além das funções JavaScript fornecidas para calcular a gorjeta e dividir a conta, este projeto inclui estilos CSS para melhorar a aparência e a usabilidade do aplicativo.



## :trophy: Aprendizado 



#### Construído com:



- Integração HTML, CSS e JavaScript: Aprendizado sobre como essas tecnologias se integram para criar uma aplicação web funcional.



- Manipulação do DOM: Como manipular o Document Object Model (DOM) para interagir dinamicamente com os elementos HTML.



- Tratamento de Eventos: Como lidar com eventos de usuário.



- Pré-processador Sass: Utilização do pré-processador Sass para escrever estilos CSS de forma mais eficiente, com variáveis, mixins e reutilização de código.



- Responsividade: Adaptação do layout e estilos para diferentes tamanhos de tela, proporcionando uma experiência consistente em dispositivos variados.



- Estilização Avançada: Utilização de técnicas avançadas de estilização, como sombras, gradientes, efeitos de hover e ajustes de cores.



- Lógica de Programação: Implementação de uma lógica simples de cálculo baseada em condições e operações aritméticas.



## :trophy: Prosseguimento 



- Realizar outros projetos utilizando o React.js



# :camera_flash: Screenshots 



## :video_camera: Video



https://github.com/RaizaCirne/calculadora-de-gorjeta/assets/109912543/31989f0b-c4a8-438f-84d7-9d7b1bab07b6



## :desktop_computer: Desktop design



![Design preview desktop](./assets/images/desktop.png)



## :iphone: Mobile design



![Design preview desktop](./assets/images/mobile.png)







# :heavy_check_mark: Links 







- Para acessar o site [Clique aqui](https://660c338b35af304905bfa19b--dashing-haupia-302e32.netlify.app/)







# 🛠 Tecnologias utilizadas 







- JavaScript

- Git

- SASS

- CSS3

- HTML5







# ☑️ Pré-requisitos 







- [x] Editor de código de sua preferência (recomendado VS code)

- [x] Git







# 📝 Procedimentos de instalação 







Clone este repositório usando o comando:



```bash

git clone https://github.com/RaizaCirne/calculadora-de-gorjeta.git

```



Baixar arquivo zip



Extrir arquivos



Abrir pasta no editor de código.







# :sunglasses: Informações 







- Personal Page - [Raíza Cirne Braz](https://660c338b35af304905bfa19b--dashing-haupia-302e32.netlify.app/)

- Frontend Mentor - [@RaizaCirne](https://www.frontendmentor.io/profile/RaizaCirne)

- GitHub - [RaizaCirne](https://github.com/RaizaCirne)

- LinkedIn - [Raíza Cirne Braz](https://www.linkedin.com/in/ra%C3%ADzacirne/)



**JavaScript - GIT - SASS - CSS3 - HTML5** 🚀