├── assets
└── background.png
├── README.md
├── index.html
├── style.css
└── script.js
/assets/background.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/thaislsilveira/refatorando-calculadora/HEAD/assets/background.png
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 |
2 | 
3 | 
4 | 
5 |
6 |
7 | 🧮 Calculadora Científica 🧮
8 |
9 | Projeto em grupo desenvolvido durante a formação de mentores do time SpaceSquad da RocketSeat.
10 |
11 |
12 |
13 |
14 |
15 | 
16 |
17 | 
18 |
19 |
20 |
21 |
22 | # :pushpin: Roadmap
23 |
24 | * [:rocket: Features](#rocket-features)
25 |
26 | * [:robot: Tecnologias](#robot-tecnologias)
27 |
28 | * [:construction_worker: Instalação](#construction_worker-instalação)
29 |
30 | * [:bug: Encontrou um bug? Faltando uma feature específica?](#bug-issues)
31 |
32 | * [:closed_book: License](#closed_book-license)
33 |
34 |
35 |
36 |
37 | # :rocket: Features
38 | 👉 Esse projeto foi baseado no **projeto #1** do Desafio [90sites90days](https://github.com/dorlyneto/90sites90days) do Mestre [Dorly Neto](https://github.com/dorlyneto)
39 |
40 | 🔥 Uma Calculadora Científica temática
41 |
42 |
43 |
44 |
45 | ## :robot: Tecnologias
46 |
47 | - [x] HTML
48 | - [x] CSS
49 | - [x] JavaScript
50 |
51 |
52 |
53 | # :construction_worker: Instalação
54 |
55 |
56 | URLs SSH fornecem acesso a um repositório Git via SSH, um protocolo seguro. Se você usar uma chave SSH registrada em sua conta do Github, clone o projeto usando este comando:
57 |
58 |
59 | ```git clone git@github.com:thaislsilveira/refatorando-calculadora```
60 |
61 |
62 | Apos fazer o clone, rode o [Live Server](https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer) no VSCode.
63 |
64 |
65 |
66 |
67 |
68 |
69 |
70 | # :bug: Issues
71 |
72 |
73 |
74 | Sinta-se à vontade para **registrar um novo problema** com o respectivo título e descrição neste repositório.
75 | Se você já encontrou uma solução para o seu problema **Não fique de fora e venha ajudar :)**!
76 |
77 |
78 |
79 |
80 |
81 |
82 |
83 |
84 |
85 |
86 |
87 |
88 |
89 |
90 | # :closed_book: License
91 |
92 |
93 | Released in 2020.
94 |
95 | 💜🚀 Made with love by 🚀💜
96 | 👩🚀 [Thaís Silveira](https://github.com/thaislsilveira)
97 | 👩🚀 [Priscila Pinheiro](https://github.com/pripinheiro)
98 | 👨🚀 [Ruanderson Vieira](https://github.com/Ruandersonvieira)
99 | 👨🚀 [Breno Romeiro](https://github.com/obrenoco)
100 |
--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 | Site #01 - Calculadora | Dorly Neto
7 |
8 |
9 |
10 |
11 |
65 |
66 |
67 |
68 |
--------------------------------------------------------------------------------
/style.css:
--------------------------------------------------------------------------------
1 | @import url('https://fonts.googleapis.com/css?family=Poppins:300,400,500,600,700,800,900&display=swap');
2 |
3 | :root {
4 | --color-primary: #8454e4;
5 | --color-secondary: #15bd66;
6 | --color-key: #b1babe;
7 | --color-background: #091921;
8 | --color-grey-dark: #8c8c8c;
9 | --color-grey-medium: #bfbfbf;
10 | --color-grey-light: #cccccc;
11 | --color-black: #2b2b2b;
12 | --color-box-shadow: rgba(68, 68, 68, 0.6);
13 | --color-white: #e1e1e6;
14 | }
15 |
16 | * {
17 | margin: 0;
18 | padding: 0;
19 | box-sizing: border-box;
20 | font-family: 'Poppins', sans-serif;
21 | }
22 |
23 | body {
24 | display: flex;
25 | justify-content: center;
26 | align-items: center;
27 | min-height: 100vh;
28 | background: url(./assets/background.png);
29 | background-size: auto;
30 | }
31 |
32 | .calculator {
33 | display: grid;
34 | grid-template-columns: repeat(6, 1fr);
35 | grid-template-rows: repeat(5, 1fr);
36 | grid-column-gap: 0px;
37 | grid-row-gap: 1px;
38 | padding: 35px;
39 | border-radius: 10px;
40 | background-color: var(--color-grey-medium);
41 | box-shadow: 9px 7px 5px var(--color-box-shadow);
42 | }
43 |
44 | .calculator div {
45 | padding: 10px 7px;
46 | }
47 |
48 | .columnOne, .columnTwo {
49 | background-color: var(--color-grey-dark);
50 | }
51 |
52 | .columnThree, .columnFour, .columnFive, .columnSix {
53 | background-color: var(--color-grey-light);
54 | }
55 |
56 | .calculator .value {
57 | /* grid-column: span 4; */
58 | grid-area: 1 / 1 / 6 / 8;
59 | height: 100px;
60 | width: 500px;
61 | text-align: right;
62 | border: none;
63 | outline: none;
64 | padding: 10px;
65 | font-size: 35px;
66 | border-radius: 10px 10px 0 0;
67 | }
68 |
69 | .calculator .value::placeholder{
70 | color: var(--color-grey-light);
71 | }
72 |
73 | .calculator span {
74 | position: relative;
75 | display: grid;
76 | width: 100%;
77 | height: 60px;
78 | color: var(--color-white);
79 | background: var(--color-key);
80 | place-items: center;
81 | border-radius: 20px;
82 | margin: 5px 0;
83 | transition: background .5s;
84 | right: .8px;
85 | bottom: .8px;
86 | box-shadow: 1px 2px 1px var(--color-box-shadow);
87 |
88 | font-size: 20px;
89 | }
90 |
91 | .calculator span:hover {
92 | background: var(--color-secondary);
93 | color: var(--color-black);
94 | cursor: pointer;
95 | right: 0px;
96 | bottom: 0px;
97 | box-shadow: none;
98 | }
99 |
100 | .calculator span.equal {
101 | background: var(--color-secondary);
102 | }
103 |
104 | .calculator span.equal:hover {
105 | background: var(--color-primary);
106 | color: var(--color-white);
107 | transition-delay: 0.4s;
108 | }
109 |
110 |
111 | .calculator span.clear {
112 | grid-column: 2fr ;
113 | width: 100%;
114 | background: var(--color-primary);
115 | }
116 |
117 | .calculator span.clear:hover {
118 | color: white;
119 | background-color: var(--color-secondary);
120 | transition-delay: 0.4s;
121 | }
122 |
123 |
--------------------------------------------------------------------------------
/script.js:
--------------------------------------------------------------------------------
1 | function equal() {
2 | try {
3 | const display = document.getElementById('equation').value;
4 | let equation = '';
5 | display.split("").map((i, index) => {
6 | if (i ==='π' && index ===0) return equation += Math.PI;
7 |
8 | switch(i) {
9 | case 'π':
10 | return equation += `*Math.PI`;
11 | default:
12 | return equation +=i;
13 | }
14 | })
15 |
16 | document.getElementById('equation').value = eval(equation);
17 | } catch{
18 |
19 | document.getElementById('equation').value = 'Erro de sintaxe';
20 |
21 | setTimeout(function() {
22 | document.getElementById('equation').value = ''
23 | }, 500);
24 | }
25 | }
26 |
27 | function point() {
28 | return document.getElementById('equation').value += '.';
29 | }
30 |
31 | function twoZeros() {
32 | return document.getElementById('equation').value += '00';
33 | }
34 |
35 | function zero() {
36 | return document.getElementById('equation').value += '0';
37 | }
38 |
39 | function one() {
40 | return document.getElementById('equation').value += '1';
41 | }
42 |
43 | function two() {
44 | return document.getElementById('equation').value += '2';
45 | }
46 |
47 | function three() {
48 | return document.getElementById('equation').value += '3';
49 | }
50 |
51 | function four() {
52 | return document.getElementById('equation').value += '4';
53 | }
54 |
55 | function five() {
56 | return document.getElementById('equation').value += '5';
57 | }
58 |
59 | function six() {
60 | return document.getElementById('equation').value += '6';
61 | }
62 |
63 | function seven() {
64 | return document.getElementById('equation').value += '7';
65 | }
66 |
67 | function eight() {
68 | return document.getElementById('equation').value += '8';
69 | }
70 |
71 | function nine() {
72 | return document.getElementById('equation').value += '9';
73 | }
74 |
75 | function sum() {
76 | return document.getElementById('equation').value += '+';
77 | }
78 |
79 | function subtraction() {
80 | return document.getElementById('equation').value += '-';
81 | }
82 |
83 | function multiplication() {
84 | return document.getElementById('equation').value += '*';
85 | }
86 |
87 | function division() {
88 | return document.getElementById('equation').value += '/';
89 | }
90 |
91 | function clearImput() {
92 | return document.getElementById('equation').value = '';
93 | }
94 |
95 | function sin() {
96 | document.getElementById('equation').value = Math.sin(document.getElementById('equation').value);
97 | }
98 |
99 |
100 | function cos() {
101 | document.getElementById('equation').value = Math.cos(document.getElementById('equation').value);
102 | }
103 |
104 | function tan() {
105 | document.getElementById('equation').value = Math.tan(document.getElementById('equation').value);
106 | }
107 |
108 | function log() {
109 | document.getElementById('equation').value = Math.log10(document.getElementById('equation').value);
110 | }
111 |
112 |
113 | function show(content) {
114 | if (document.getElementById('equation').value.localeCompare("undefined") == 0) {
115 | document.getElementById('equation').value = content;
116 | } else {
117 | document.getElementById('equation').value += content;
118 | }
119 | }
120 |
121 | function pi() {
122 |
123 | document.getElementById('equation').value = document.getElementById('equation').value += 'π';
124 | }
125 |
126 | function factorial() {
127 | let x = document.getElementById('equation').value;
128 | if (x == 0 || x == 1)
129 | document.getElementById('equation').value = 1;
130 | else {
131 | let fact = 1;
132 | for (i = 2; i <= x; i++) {
133 | fact = fact * i;
134 | }
135 | document.getElementById('equation').value = fact;
136 | }
137 | }
138 |
139 | function squareRoot() {
140 | document.getElementById('equation').value = Math.sqrt(document.getElementById('equation').value);
141 | }
142 |
143 | function exponential() {
144 | if (document.getElementById('equation').value == 0)
145 | document.getElementById('equation').value = Math.E;
146 | else
147 | document.getElementById('equation').value = document.getElementById('equation').value * Math.E;
148 | }
149 |
150 | function squared() {
151 |
152 | document.getElementById('equation').value = Math.pow(document.getElementById('equation').value, 2);
153 | // return document.getElementById('equation').value += 'x²'
154 | }
155 |
156 | function percentage(){
157 | document.getElementById('equation').value = document.getElementById('equation').value / 100;
158 | }
159 |
--------------------------------------------------------------------------------