Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly
Sign up
Appearance settings

Commit 4d024fe

Browse files
author
visualdennis
committed
exp-chart comp, fix btn align in components page
1 parent 9e079c8 commit 4d024fe

File tree

19 files changed

+684
-1
lines changed

19 files changed

+684
-1
lines changed

‎package-lock.json‎

Lines changed: 11 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,7 @@
88
"@testing-library/user-event": "^13.5.0",
99
"aos": "^3.0.0-beta.6",
1010
"axios": "^1.2.1",
11+
"json-loader": "^0.5.7",
1112
"react": "^18.2.0",
1213
"react-dom": "^18.2.0",
1314
"react-router-dom": "^6.4.3",

‎src/App.js‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -19,6 +19,7 @@ import ArticlePreviewCard from './components/newbie/ArticlePreviewCard/ArticlePr
1919
import NewsHome from './components/junior/newsHome/NewsHome';
2020
import GithubUser from './components/junior/githubUser/GithubUser';
2121
import Error from './Error';
22+
import ExpChart from './components/junior/ExpChart/ExpChart';
2223

2324
const App = () => {
2425

@@ -45,12 +46,13 @@ AOS.init({
4546
<Route path='/components/article-preview' element={<ArticlePreviewCard></ArticlePreviewCard>}/>
4647
<Route path='/components/news-homepage' element={<NewsHome></NewsHome>}/>
4748
<Route path='/components/github-user' element={<GithubUser></GithubUser>}/>
49+
<Route path='/components/expense-chart' element={<ExpChart></ExpChart>}/>
4850

4951
{/* Pages */}
5052
<Route path='/pages' element={<Pages></Pages>}/>
5153

5254
{/* Working on currently */}
53-
{/* <Route path='/build' element={<GithubUser></GithubUser>}/> */}
55+
<Route path='/build' element={<ExpChart></ExpChart>}/>
5456
<Route path='*' element={<Error></Error>}></Route>
5557
</Routes>
5658
</Router>

‎src/Card/Card.css‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -38,3 +38,8 @@
3838
.app-main-components-card-link {
3939
padding: 0px 20px;
4040
}
41+
42+
.card .app-main-components-card-link {
43+
/* pushes button to the bottom of the container! */
44+
margin-top: auto;
45+
}

‎src/components/data.js‎

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -26,6 +26,15 @@ export const componentCardData = [
2626
type: "component",
2727
link:"/components/nft-card",
2828
},
29+
{
30+
id:"11",
31+
title: "Expenses chart component",
32+
desc: "Data visualization with dynamic JSON data using Javascript",
33+
img: "https://res.cloudinary.com/dz209s6jk/image/upload/Challenges/qqz8vfg0jzmrtk2liteo.jpg",
34+
category:"junior",
35+
type: "component",
36+
link:"/components/expense-chart",
37+
},
2938
{
3039
id:"3",
3140
title: "Product preview card",
Lines changed: 237 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,237 @@
1+
@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;700&display=swap');
2+
3+
.expChart {
4+
min-height: 100vh;
5+
font-family: 'DM Sans', sans-serif;
6+
font-size: 18px;
7+
background-color: hsl(27, 66%, 92%);
8+
padding: 25px;
9+
--expChart-transition: all 0.4s ease-in-out;
10+
}
11+
12+
/* - Soft red: hsl(10, 79%, 65%)
13+
- Cyan: hsl(186, 34%, 60%)
14+
15+
- Dark brown: hsl(25, 47%, 15%)
16+
- Medium brown: hsl(28, 10%, 53%)
17+
- Cream: hsl(27, 66%, 92%)
18+
- Very pale orange: hsl(33, 100%, 98%) */
19+
20+
/* MAIN CONTAINER */
21+
22+
.expChart-container {
23+
width: 540px;
24+
}
25+
26+
/* TOP */
27+
28+
.expChart-header {
29+
display: flex;
30+
background-color: hsl(10, 79%, 65%);
31+
padding: 30px;
32+
border-radius: 15px;
33+
justify-content: space-between;
34+
margin-bottom: 20px;
35+
align-items: center;
36+
}
37+
38+
/* TOP LEFT */
39+
40+
.expChart-balance-info {
41+
color: hsl(33, 100%, 98%);
42+
}
43+
.expChart-balance-info-title {
44+
margin-bottom: 5px;
45+
font-size: 0.8em;
46+
font-weight: 400;
47+
}
48+
.expChart-balance-info-total {
49+
display: block;
50+
font-size: 1.5em;
51+
font-weight: 700;
52+
}
53+
54+
/* TOP RIGHT LOGO */
55+
56+
.expChart-logo {
57+
}
58+
59+
/* BOTTOM - GRAPH */
60+
61+
.expChart-graph {
62+
background-color: hsl(33, 100%, 98%);
63+
border-radius: 15px;
64+
padding: 40px;
65+
color: hsl(25, 47%, 15%);
66+
display: flex;
67+
flex-direction: column;
68+
}
69+
70+
.expChart-graph-title {
71+
margin-bottom: 20px;
72+
font-size: 1.5em;
73+
}
74+
75+
/* DATA SECTION */
76+
77+
.expChart-graph-data-container {
78+
border-bottom: 1px solid hsl(27, 66%, 92%);
79+
margin-bottom: 20px;
80+
padding: 20px 0px;
81+
list-style-type: none;
82+
display: grid;
83+
grid-template-columns: repeat(7, 1fr);
84+
column-gap: 20px;
85+
}
86+
87+
.expChart-graph-data-info {
88+
width: 100%;
89+
display: flex;
90+
flex-direction: column;
91+
align-items: center;
92+
justify-content: flex-end;
93+
}
94+
.expChart-graph-data-vis {
95+
background-color: hsl(10, 79%, 65%);
96+
border-radius: 5px;
97+
width: 100%;
98+
margin-bottom: 5px;
99+
transition: var(--expChart-transition);
100+
cursor: pointer;
101+
position: relative;
102+
}
103+
.expChart-graph-data-vis:hover {
104+
background-color: hsl(10, 100%, 76%);
105+
}
106+
107+
.expChart-graph-data-vis > span {
108+
color: hsl(33, 100%, 98%);
109+
background-color: hsl(25, 47%, 15%);
110+
border-radius: 5px;
111+
font-size: min(0.8em, 3vw);
112+
position: absolute;
113+
opacity: 0;
114+
top: -35px;
115+
left: 50%;
116+
transform: translateX(-50%);
117+
transition: var(--expChart-transition);
118+
padding: 5px;
119+
}
120+
121+
.expChart-graph-data-vis:hover > span {
122+
opacity: 1;
123+
}
124+
125+
.expChart-graph-data-vis-highest {
126+
background-color: hsl(186, 34%, 60%);
127+
}
128+
129+
.expChart-graph-data-vis-highest:hover {
130+
background-color: hsl(186, 49%, 74%);
131+
}
132+
133+
.expChart-graph-data-day {
134+
font-size: 0.8em;
135+
color: hsl(28, 10%, 53%);
136+
width: 100%;
137+
text-align: center;
138+
}
139+
140+
/* STATS SECTION */
141+
142+
.expChart-graph-stats {
143+
display: flex;
144+
justify-content: space-between;
145+
}
146+
147+
/* STATS LEFT */
148+
149+
.expChart-graph-stats-left {
150+
}
151+
.expChart-graph-stats-left-desc {
152+
color: hsl(28, 10%, 53%);
153+
font-size: 0.8em;
154+
}
155+
.expChart-graph-stats-left-total {
156+
font-size: 2em;
157+
font-weight: 700;
158+
159+
padding: 0;
160+
}
161+
162+
/* STATS RIGHT */
163+
164+
.expChart-graph-stats-right {
165+
display: flex;
166+
flex-direction: column;
167+
justify-content: flex-end;
168+
padding: 5px 0px;
169+
}
170+
.expChart-graph-stats-right-rate {
171+
font-size: 0.8em;
172+
text-align: right;
173+
}
174+
.expChart-graph-stats-right-desc {
175+
color: hsl(28, 10%, 53%);
176+
font-size: 0.8em;
177+
}
178+
179+
@media only screen and (max-width: 500px) {
180+
.expChart {
181+
padding: 15px;
182+
}
183+
184+
/* CONTAINERS */
185+
186+
.expChart-container {
187+
width: 300px;
188+
}
189+
190+
.expChart-header {
191+
padding: 15px;
192+
margin-bottom: 20px;
193+
}
194+
195+
.expChart-graph {
196+
padding: 15px;
197+
}
198+
199+
.expChart-graph-data-container {
200+
margin-bottom: 20px;
201+
padding: 20px 0px;
202+
grid-template-columns: repeat(7, minmax(15px, 1fr));
203+
column-gap: 10px;
204+
}
205+
206+
/* PARTS */
207+
208+
.expChart-balance-info-title {
209+
font-size: 0.7em;
210+
}
211+
.expChart-balance-info-total {
212+
font-size: 1.2em;
213+
font-weight: 700;
214+
}
215+
216+
.expChart-graph-title {
217+
margin-bottom: 10px;
218+
font-size: 1.2em;
219+
}
220+
221+
.expChart-graph-data-day {
222+
font-size: 0.6em;
223+
}
224+
225+
.expChart-graph-data-vis > span {
226+
top: -30px;
227+
}
228+
229+
.expChart-graph-stats-left-desc,
230+
.expChart-graph-stats-right-rate,
231+
.expChart-graph-stats-right-desc {
232+
font-size: 0.7em;
233+
}
234+
.expChart-graph-stats-left-total {
235+
font-size: 1.5em;
236+
}
237+
}

0 commit comments

Comments
(0)

AltStyle によって変換されたページ (->オリジナル) /