Skip to content

Commit e726246

Browse files
higorpohigorpo
committed
✨ Finalizes results screen
1 parent 5f1f80b commit e726246

File tree

7 files changed

+122
-23
lines changed

7 files changed

+122
-23
lines changed

‎src/index.scss‎

Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
:root {
22
--primaryColor: #A70000;
3+
--grey1: #333333;
34
--grey3: #828282;
45
--grey6: #F2F2F2;
56

@@ -60,6 +61,25 @@ div.container {
6061
height: calc(100% - 100px);
6162
}
6263

64+
65+
a.back-button {
66+
text-decoration: none;
67+
margin-bottom: 20px;
68+
69+
> div {
70+
color: var(--primaryColor);
71+
display: flex;
72+
align-items: center;
73+
74+
span {
75+
margin-left: 5px;
76+
text-transform: uppercase;
77+
font-size: var(--textFontSize);
78+
font-weight: bold;
79+
}
80+
}
81+
}
82+
6383
@media (min-width: 1000px) {
6484
#root {
6585
display: flex;

‎src/pages/History/index.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -7,8 +7,8 @@ import './styles.scss';
77
const History: React.FC = () => {
88
return (
99
<div id="history-page" className="container">
10-
<Link to="/">
11-
<div className="back">
10+
<Link to="/" className="back-button">
11+
<div>
1212
<MdArrowBack size={22} />
1313
<span>Voltar</span>
1414
</div>

‎src/pages/History/styles.scss‎

Lines changed: 1 addition & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -6,23 +6,6 @@
66
}
77

88

9-
a {
10-
text-decoration: none;
11-
margin-bottom: 20px;
12-
13-
> div.back {
14-
color: var(--primaryColor);
15-
display: flex;
16-
align-items: center;
17-
18-
span {
19-
margin-left: 5px;
20-
text-transform: uppercase;
21-
font-size: var(--textFontSize);
22-
font-weight: bold;
23-
}
24-
}
25-
}
269

2710
ul.history {
2811
list-style: none;
@@ -50,7 +33,7 @@ ul.history {
5033

5134
span.result {
5235
font-size: 30px;
53-
36+
5437
&:before {
5538
content: "= ";
5639
}

‎src/pages/Home/index.tsx‎

Lines changed: 17 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,22 +1,36 @@
1-
import React from 'react';
1+
import React, { FormEvent, useState } from 'react';
22
import { MdChevronRight } from 'react-icons/md'
3-
import { Link } from 'react-router-dom';
3+
import { Link, useHistory } from 'react-router-dom';
44

55
import './styles.scss';
66

77
const Home: React.FC = () => {
8+
const history = useHistory();
9+
10+
const [factorialNumber, setFactorialNumber] = useState<string>("");
11+
12+
function handleSubmitForm(ev: FormEvent<HTMLFormElement>) {
13+
ev.preventDefault();
14+
history.push(`/calc?factorial=${factorialNumber}`);
15+
16+
setFactorialNumber("");
17+
}
18+
819
return (
920
<div className="container">
1021
<hgroup>
1122
<h2 className="title">Digite um número para calcular sua fatorial.</h2>
1223
<h6 className="explanation">Digite um número entre 1 a 150 para calcular o seu valor fatorial de maneira simples e rápida. Seus cálculos ficarão salvos para que você possa consultá-los no futuro.</h6>
1324
</hgroup>
1425

15-
<form>
26+
<form onSubmit={handleSubmitForm}>
1627
<input
1728
type="number"
1829
name="fatorial_number"
1930
placeholder="Número"
31+
required
32+
value={factorialNumber}
33+
onChange={text => setFactorialNumber(text.target.value)}
2034
/>
2135

2236
<button type="submit">

‎src/pages/Result/index.tsx‎

Lines changed: 58 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,58 @@
1+
import React, { useMemo } from 'react';
2+
import { MdRefresh } from 'react-icons/md';
3+
import { Link, useLocation } from 'react-router-dom';
4+
5+
import './styles.scss';
6+
7+
function useQuery() {
8+
return new URLSearchParams(useLocation().search);
9+
}
10+
11+
const Result: React.FC = () => {
12+
const query = useQuery();
13+
const factorialNumber = Number(query.get("factorial"));
14+
15+
const multipliers = useMemo(() => {
16+
if (factorialNumber <= 20) {
17+
let string = "";
18+
for (let i = factorialNumber; i > 0; i--) {
19+
if (i == 1) {
20+
string += `${i} = `;
21+
} else {
22+
string += `${i} x `;
23+
}
24+
}
25+
return string;
26+
} else {
27+
return `${factorialNumber} x ${factorialNumber - 1} x ${factorialNumber - 3} x ... x 3 x 2 x 1 =`
28+
}
29+
}, [factorialNumber]);
30+
31+
if (!factorialNumber) {
32+
return null;
33+
}
34+
35+
return (
36+
<div className="container">
37+
<h2 className="title">
38+
Resultado do cálculo de {factorialNumber} fatorial é de:
39+
</h2>
40+
41+
<div className="factorial-result">
42+
<p className="multipliers">{multipliers}</p>
43+
<h4 className="result">
44+
51391281291
45+
</h4>
46+
</div>
47+
48+
<Link to="/" className="back-button">
49+
<div className="back">
50+
<MdRefresh size={22} />
51+
<span>Novo cálculo</span>
52+
</div>
53+
</Link>
54+
</div>
55+
);
56+
}
57+
58+
export default Result;

‎src/pages/Result/styles.scss‎

Lines changed: 22 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,22 @@
1+
div.factorial-result {
2+
background-color: var(--grey6);
3+
padding: 20px;
4+
5+
h4.result {
6+
font-size: 40px;
7+
font-weight: bold;
8+
margin: 0px;
9+
line-height: 45px;
10+
color: var(--grey1);
11+
}
12+
13+
p.multipliers {
14+
color: var(--grey3);
15+
margin: 0px;
16+
margin-bottom: 10px;
17+
}
18+
}
19+
20+
a.back-button {
21+
margin-top: 20px;
22+
}

‎src/pages/routes.tsx‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,7 @@ import { AiFillHeart } from 'react-icons/ai'
44

55
import Home from './Home';
66
import History from './History';
7+
import Result from './Result';
78

89
import Logo from '../assets/logo.svg';
910
import LogoColored from '../assets/logo-colored.svg';
@@ -28,6 +29,7 @@ const Routes: React.FC = () => {
2829
<Switch>
2930
<Route path="/" exact component={Home} />
3031
<Route path="/history" component={History} />
32+
<Route path="/calc" component={Result} />
3133
</Switch>
3234
</div>
3335
</BrowserRouter>

0 commit comments

Comments
 (0)