Skip to content

Commit 9b63475

Browse files
SpeedrunyourknowledgeSpeedrunyourknowledge
authored
Add graph descriptions and update css
2 parents 4224a68 + aa6fdf3 commit 9b63475

File tree

18 files changed

+180
-72
lines changed

18 files changed

+180
-72
lines changed

‎calc-frontend/src/App/App.tsx‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -57,8 +57,8 @@ function App() {
5757
<Route path='/derivatives' element={ <Derivatives/> }/>
5858
<Route path='/derivatives/parabola' element={ <ParabolaDeriv/> } />
5959
<Route path='/derivatives/cubic' element={ <CubicDeriv/> } />
60-
<Route path='/derivatives/natural-log' element={ <NatLogDeriv/> } />
61-
<Route path='/derivatives/euler' element={ <EulerDeriv/> } />
60+
<Route path='/derivatives/logarithmic' element={ <NatLogDeriv/> } />
61+
<Route path='/derivatives/exponential' element={ <EulerDeriv/> } />
6262
<Route path='/derivatives/linear' element={ <LineDeriv/> } />
6363
<Route path='/derivatives/sine' element={ <SineDeriv/> } />
6464
<Route path='/derivatives/cosine' element={ <CosineDeriv/> } />
@@ -67,8 +67,8 @@ function App() {
6767
<Route path='/integrals' element= { <Integrals/> }/>
6868
<Route path='/integrals/parabola' element={ <ParabolaInt/> }/>
6969
<Route path='/integrals/cubic' element={ <CubicInt/> }/>
70-
<Route path='/integrals/natural-log' element={ <NatLogInt/> } />
71-
<Route path='/integrals/euler' element={ <EulerInt/> } />
70+
<Route path='/integrals/logarithmic' element={ <NatLogInt/> } />
71+
<Route path='/integrals/exponential' element={ <EulerInt/> } />
7272
<Route path='/integrals/linear' element={ <LineInt/> } />
7373
<Route path='/integrals/sine' element={ <SineInt/> } />
7474
<Route path='/integrals/cosine' element={ <CosineInt/> } />

‎calc-frontend/src/App/app.css‎

Lines changed: 37 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -29,27 +29,33 @@ body {
2929
}
3030

3131
.link-box{
32-
@apply h-30 flex w-full items-center justify-center
32+
@apply h-20 flex w-full items-center justify-center
3333
bg-gray-500 rounded-lg hover:bg-gray-600 transition transform hover:scale-103
3434
duration-200;
3535
}
3636

3737
.topic-header{
38-
margin-bottom:.25rem;
38+
margin-bottom:1.125rem;
39+
}
40+
41+
.topic-list{
42+
width:50%;
43+
max-width: 100%;
44+
margin:auto;
45+
}
46+
47+
.home-list{
48+
width:50%;
49+
max-width: 100%;
50+
margin:auto;
3951
}
4052

4153
.topic-box{
42-
@apply h-20 flex w-1/2 items-center justify-center
54+
@apply h-20 flex w-full items-center justify-center
4355
bg-amber-300 rounded-lg hover:bg-amber-400 transition transform hover:scale-103
4456
duration-200;
4557
}
4658

47-
.topic-button{
48-
@apply bg-amber-300 rounded-lg cursor-pointer w-1/2;
49-
padding: 10px;
50-
font-size:1.25rem;
51-
}
52-
5359
.back-button{
5460
@apply cursor-pointer bg-sky-400 hover:bg-blue-600 hover:text-neutral-50 rounded-md border-2 border-solid;
5561
padding: 4px 12px;
@@ -75,13 +81,34 @@ body {
7581
aspect-ratio: 3/2;
7682
}
7783

78-
@media (max-width: 768px) {
84+
@media (max-width: 799px) {
7985

8086
.topic-list{
8187
@apply gap-4;
88+
width: 100%;
89+
}
90+
91+
.home-list{
92+
@apply gap-4;
93+
width: 100%;
8294
}
8395

96+
.graph-outer-box{
97+
@apply flex-wrap;
98+
}
99+
100+
}
101+
102+
@media (min-width: 800px) {
103+
104+
.graph-frame{
105+
@apply shrink-0;
106+
}
107+
108+
}
84109

110+
.big-p{
111+
font-size: 1.125rem;
85112
}
86113

87114

‎calc-frontend/src/components/Cosine/CosineDeriv.tsx‎

Lines changed: 10 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -13,9 +13,16 @@ function CosineDeriv()
1313
<h2 style={{marginBottom:'1rem'}}>Derivative of &nbsp;{"\\(y = \\cos(x)\\)"} </h2>
1414
</MathJax>
1515

16-
<iframe className = "graph-frame" src="https://www.desmos.com/calculator/eryny7fmhk?embed"
17-
style={{border: "1px solid #ccc"}} >
18-
</iframe>
16+
<div className="flex gap-4 graph-outer-box">
17+
<iframe className = "graph-frame" src="https://www.desmos.com/calculator/eryny7fmhk?embed"
18+
style={{border: "1px solid #ccc"}} >
19+
</iframe>
20+
21+
<p className="big-p">
22+
<MathJax>The cosine function starts at 1 and ends at 1 in the interval [0, 2{"\\(π\\)"}]</MathJax>
23+
</p>
24+
25+
</div>
1926

2027
</div>
2128
)

‎calc-frontend/src/components/Cubic/CubicDeriv.tsx‎

Lines changed: 9 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -13,9 +13,15 @@ function CubicDeriv()
1313
<h2 style={{marginBottom:'1rem'}}>Derivative of &nbsp;{"\\(y = x^{3} \\)"} </h2>
1414
</MathJax>
1515

16-
<iframe className = "graph-frame" src="https://www.desmos.com/calculator/0wh7782h7k?embed"
17-
style={{border: "1px solid #ccc"}} >
18-
</iframe>
16+
<div className="flex gap-4 graph-outer-box">
17+
<iframe className = "graph-frame" src="https://www.desmos.com/calculator/0wh7782h7k?embed"
18+
style={{border: "1px solid #ccc"}} >
19+
</iframe>
20+
21+
<p className="big-p flex">
22+
The cubic function cubes each input value, raising it to the third power
23+
</p>
24+
</div>
1925

2026
</div>
2127

‎calc-frontend/src/components/Euler/EulerDeriv.tsx‎

Lines changed: 13 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
import { MathJax } from "better-react-mathjax"
22
import { useNavigate } from "react-router";
33

4-
function CubicIntegral()
4+
function EulerDeriv()
55
{
66

77
const navigate = useNavigate();
@@ -13,12 +13,20 @@ function CubicIntegral()
1313
<h2 style={{marginBottom:'1rem'}}>Derivative of &nbsp;{"\\(y = e^{x} \\)"} </h2>
1414
</MathJax>
1515

16-
<iframe className = "graph-frame" src="https://www.desmos.com/calculator/5fb4idx020?embed"
17-
style={{border: "1px solid #ccc"}} >
18-
</iframe>
16+
<div className="flex gap-4 graph-outer-box">
17+
<iframe className = "graph-frame" src="https://www.desmos.com/calculator/5fb4idx020?embed"
18+
style={{border: "1px solid #ccc"}} >
19+
</iframe>
20+
21+
<p className="big-p flex">
22+
<MathJax>The exponential function grows the fastest. It naturally has a horizontal asymptote
23+
at {"\\(y = 0\\)"}. <br/> The {"\\(e\\)"} in {"\\(e^{x} \\)"} is called Euler's number, and
24+
it is equal to 2.718... (the digits go on forever)</MathJax>
25+
</p>
26+
</div>
1927

2028
</div>
2129
)
2230
}
2331

24-
export default CubicIntegral
32+
export default EulerDeriv

‎calc-frontend/src/components/Line/LineDeriv.tsx‎

Lines changed: 10 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -13,9 +13,16 @@ function LineDeriv()
1313
<h2 style={{marginBottom:'1rem'}}>Derivative of &nbsp;{"\\(y = \\frac{1}{2} x\\)"} </h2>
1414
</MathJax>
1515

16-
<iframe className = "graph-frame" src="https://www.desmos.com/calculator/opyeqlknbm?embed"
17-
style={{border: "1px solid #ccc"}} >
18-
</iframe>
16+
<div className="flex gap-4 graph-outer-box">
17+
<iframe className = "graph-frame" src="https://www.desmos.com/calculator/opyeqlknbm?embed"
18+
style={{border: "1px solid #ccc"}} >
19+
</iframe>
20+
21+
<p className="big-p">
22+
<MathJax>The linear function has a constant slope equal to {"\\(\\frac{Δy}{Δx}\\)"}</MathJax>
23+
</p>
24+
25+
</div>
1926

2027
</div>
2128
)

‎calc-frontend/src/components/NatLog/NatLogDeriv.tsx‎

Lines changed: 13 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -12,9 +12,19 @@ function NatLogDeriv(){
1212
<h2 style={{marginBottom:'1rem'}}>Derivative of &nbsp;{"\\(y = \\ln(x)\\)"} </h2>
1313
</MathJax>
1414

15-
<iframe className = "graph-frame" src="https://www.desmos.com/calculator/2ioddrf9fi?embed"
16-
style={{border: "1px solid #ccc"}} >
17-
</iframe>
15+
<div className="flex gap-4 graph-outer-box">
16+
<iframe className = "graph-frame" src="https://www.desmos.com/calculator/2ioddrf9fi?embed"
17+
style={{border: "1px solid #ccc"}} >
18+
</iframe>
19+
20+
<p className="big-p flex">
21+
<MathJax>The logarithmic function grows the slowest. It naturally has a vertical asymptote
22+
at {"\\(x = 0 \\)"}. <br/> {"\\(\\ln(x)\\)"} is the same as {"\\(\\log_{e}x \\)"}. <br/>
23+
Logarithms are the inverse of exponents, so {"\\(y = \\ln(x)\\)"} is just {"\\(y = e^{x}\\)"} rotated
24+
180 degrees.
25+
</MathJax>
26+
</p>
27+
</div>
1828

1929
</div>
2030

‎calc-frontend/src/components/Parabola/ParabolaDeriv.tsx‎

Lines changed: 9 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -12,9 +12,15 @@ function ParabolaDeriv(){
1212
<h2 style={{marginBottom:'1rem'}}>Derivative of &nbsp;{"\\(y = x^{2} \\)"} </h2>
1313
</MathJax>
1414

15-
<iframe className = "graph-frame" src="https://www.desmos.com/calculator/phq9sqq94c?embed"
16-
style={{border: "1px solid #ccc"}} >
17-
</iframe>
15+
<div className="flex gap-4 graph-outer-box">
16+
<iframe className = "graph-frame" src="https://www.desmos.com/calculator/phq9sqq94c?embed"
17+
style={{border: "1px solid #ccc"}} >
18+
</iframe>
19+
20+
<p className="big-p flex">
21+
The parabola function squares each input value, raising it to the second power
22+
</p>
23+
</div>
1824

1925
</div>
2026
)

‎calc-frontend/src/components/Sine/SineDeriv.tsx‎

Lines changed: 9 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -12,9 +12,15 @@ function SineDeriv()
1212
<h2 style={{marginBottom:'1rem'}}>Derivative of &nbsp;{"\\(y = \\sin(x)\\)"} </h2>
1313
</MathJax>
1414

15-
<iframe className = "graph-frame" src="https://www.desmos.com/calculator/bdxrwxldzr?embed"
16-
style={{border: "1px solid #ccc"}} >
17-
</iframe>
15+
<div className="flex gap-4 graph-outer-box">
16+
<iframe className = "graph-frame" src="https://www.desmos.com/calculator/bdxrwxldzr?embed"
17+
style={{border: "1px solid #ccc"}} >
18+
</iframe>
19+
20+
<p className="big-p">
21+
<MathJax>The sine function starts at 0 and ends at 0 in the interval [0, 2{"\\(π\\)"}]</MathJax>
22+
</p>
23+
</div>
1824

1925
</div>
2026
)

‎calc-frontend/src/components/Tangent/TangentDeriv.tsx‎

Lines changed: 11 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -5,16 +5,24 @@ function CubicIntegral()
55
{
66

77
const navigate = useNavigate();
8+
89
return (
910
<div>
1011
<button className="back-button" onClick={()=> navigate(-1)}>&#8249; Back</button>
1112
<MathJax>
1213
<h2 style={{marginBottom:'1rem'}}>Derivative of &nbsp;{"\\(y = \\tan(x)\\)"} </h2>
1314
</MathJax>
1415

15-
<iframe className = "graph-frame" src="https://www.desmos.com/calculator/4t2g6fpc3s?embed"
16-
style={{border: "1px solid #ccc"}} >
17-
</iframe>
16+
<div className="flex gap-4 graph-outer-box">
17+
<iframe className = "graph-frame" src="https://www.desmos.com/calculator/4t2g6fpc3s?embed"
18+
style={{border: "1px solid #ccc"}} >
19+
</iframe>
20+
21+
<p className="big-p">
22+
<MathJax>The tangent function has vertical asymptotes at multiples of {"\\(x = \\frac{π}{2}\\)"}</MathJax>
23+
</p>
24+
25+
</div>
1826

1927
</div>
2028
)

0 commit comments

Comments
 (0)