Skip to content

Commit 8f89d56

Browse files
svwoodhousesvwoodhouse
committed
Added Expense Component
1 parent 2186a7f commit 8f89d56

File tree

15 files changed

+15722
-0
lines changed

15 files changed

+15722
-0
lines changed

‎.gitignore

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
22

33
# dependencies
4+
node_modules
45
/node_modules
56
/.pnp
67
.pnp.js

‎Sections/Section 3/01-starting-setup/.eslintcache

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
[{"C:\\Users\\Sydnee\\Documents\\GitHub\\ReactJS-CompleteGuide\\Sections\\Section 3\\01-starting-setup\\src\\index.js":"1","C:\\Users\\Sydnee\\Documents\\GitHub\\ReactJS-CompleteGuide\\Sections\\Section 3\\01-starting-setup\\src\\App.js":"2","C:\\Users\\Sydnee\\Documents\\GitHub\\ReactJS-CompleteGuide\\Sections\\Section 3\\01-starting-setup\\src\\components\\ExpenseItem.js":"3"},{"size":142,"mtime":1645677664878,"results":"4","hashOfConfig":"5"},{"size":198,"mtime":1646277348691,"results":"6","hashOfConfig":"5"},{"size":540,"mtime":1646280304605,"results":"7","hashOfConfig":"5"},{"filePath":"8","messages":"9","errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},"1k242zt",{"filePath":"10","messages":"11","errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},{"filePath":"12","messages":"13","errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},"C:\\Users\\Sydnee\\Documents\\GitHub\\ReactJS-CompleteGuide\\Sections\\Section 3\\01-starting-setup\\src\\index.js",[],"C:\\Users\\Sydnee\\Documents\\GitHub\\ReactJS-CompleteGuide\\Sections\\Section 3\\01-starting-setup\\src\\App.js",[],"C:\\Users\\Sydnee\\Documents\\GitHub\\ReactJS-CompleteGuide\\Sections\\Section 3\\01-starting-setup\\src\\components\\ExpenseItem.js",[]]

‎Sections/Section 3/01-starting-setup/package-lock.json

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

‎Sections/Section 3/01-starting-setup/package.json

Lines changed: 38 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,38 @@
1+
{
2+
"name": "react-complete-guide",
3+
"version": "0.1.0",
4+
"private": true,
5+
"dependencies": {
6+
"@testing-library/jest-dom": "^5.11.6",
7+
"@testing-library/react": "^11.2.2",
8+
"@testing-library/user-event": "^12.5.0",
9+
"react": "^17.0.1",
10+
"react-dom": "^17.0.1",
11+
"react-scripts": "4.0.1",
12+
"web-vitals": "^0.2.4"
13+
},
14+
"scripts": {
15+
"start": "react-scripts start",
16+
"build": "react-scripts build",
17+
"test": "react-scripts test",
18+
"eject": "react-scripts eject"
19+
},
20+
"eslintConfig": {
21+
"extends": [
22+
"react-app",
23+
"react-app/jest"
24+
]
25+
},
26+
"browserslist": {
27+
"production": [
28+
">0.2%",
29+
"not dead",
30+
"not op_mini all"
31+
],
32+
"development": [
33+
"last 1 chrome version",
34+
"last 1 firefox version",
35+
"last 1 safari version"
36+
]
37+
}
38+
}

‎Sections/Section 3/01-starting-setup/public/favicon.ico

3.78 KB
Binary file not shown.

‎Sections/Section 3/01-starting-setup/public/index.html

Lines changed: 43 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,43 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="utf-8" />
5+
<link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
6+
<meta name="viewport" content="width=device-width, initial-scale=1" />
7+
<meta name="theme-color" content="#000000" />
8+
<meta
9+
name="description"
10+
content="Web site created using create-react-app"
11+
/>
12+
<link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
13+
<!--
14+
manifest.json provides metadata used when your web app is installed on a
15+
user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
16+
-->
17+
<link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
18+
<!--
19+
Notice the use of %PUBLIC_URL% in the tags above.
20+
It will be replaced with the URL of the `public` folder during the build.
21+
Only files inside the `public` folder can be referenced from the HTML.
22+
23+
Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
24+
work correctly both with client-side routing and a non-root public URL.
25+
Learn how to configure a non-root public URL by running `npm run build`.
26+
-->
27+
<title>React App</title>
28+
</head>
29+
<body>
30+
<noscript>You need to enable JavaScript to run this app.</noscript>
31+
<div id="root"></div>
32+
<!--
33+
This HTML file is a template.
34+
If you open it directly in the browser, you will see an empty page.
35+
36+
You can add webfonts, meta tags, or analytics to this file.
37+
The build step will place the bundled scripts into the <body> tag.
38+
39+
To begin the development, run `npm start` or `yarn start`.
40+
To create a production bundle, use `npm run build` or `yarn build`.
41+
-->
42+
</body>
43+
</html>

‎Sections/Section 3/01-starting-setup/public/logo192.png

5.22 KB
Loading

‎Sections/Section 3/01-starting-setup/public/logo512.png

9.44 KB
Loading

‎Sections/Section 3/01-starting-setup/public/manifest.json

Lines changed: 25 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,25 @@
1+
{
2+
"short_name": "React App",
3+
"name": "Create React App Sample",
4+
"icons": [
5+
{
6+
"src": "favicon.ico",
7+
"sizes": "64x64 32x32 24x24 16x16",
8+
"type": "image/x-icon"
9+
},
10+
{
11+
"src": "logo192.png",
12+
"type": "image/png",
13+
"sizes": "192x192"
14+
},
15+
{
16+
"src": "logo512.png",
17+
"type": "image/png",
18+
"sizes": "512x512"
19+
}
20+
],
21+
"start_url": ".",
22+
"display": "standalone",
23+
"theme_color": "#000000",
24+
"background_color": "#ffffff"
25+
}

‎Sections/Section 3/01-starting-setup/public/robots.txt

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
# https://www.robotstxt.org/robotstxt.html
2+
User-agent: *
3+
Disallow:

‎Sections/Section 3/01-starting-setup/src/App.js

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
import ExpenseItem from "./components/ExpenseItem";
2+
3+
function App() {
4+
return (
5+
<div>
6+
<h2>Let's get started!</h2>
7+
<ExpenseItem></ExpenseItem>
8+
</div>
9+
);
10+
}
11+
12+
export default App;

‎Sections/Section 3/01-starting-setup/src/components/ExpenseItem.css

Lines changed: 56 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,56 @@
1+
.expense-item {
2+
display: flex;
3+
justify-content: space-between;
4+
align-items: center;
5+
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
6+
padding: 0.5rem;
7+
margin: 1rem 0;
8+
border-radius: 12px;
9+
background-color: #4b4b4b;
10+
}
11+
12+
.expense-item__description {
13+
display: flex;
14+
flex-direction: column;
15+
gap: 1rem;
16+
align-items: flex-end;
17+
flex-flow: column-reverse;
18+
justify-content: flex-start;
19+
flex: 1;
20+
}
21+
22+
.expense-item h2 {
23+
color: #3a3a3a;
24+
font-size: 1rem;
25+
flex: 1;
26+
margin: 0 1rem;
27+
color: white;
28+
}
29+
30+
.expense-item__price {
31+
font-size: 1rem;
32+
font-weight: bold;
33+
color: white;
34+
background-color: #40005d;
35+
border: 1px solid white;
36+
padding: 0.5rem;
37+
border-radius: 12px;
38+
}
39+
40+
@media (min-width: 580px) {
41+
.expense-item__description {
42+
flex-direction: row;
43+
align-items: center;
44+
justify-content: flex-start;
45+
flex: 1;
46+
}
47+
48+
.expense-item__description h2 {
49+
font-size: 1.25rem;
50+
}
51+
52+
.expense-item__price {
53+
font-size: 1.25rem;
54+
padding: 0.5rem 1.5rem;
55+
}
56+
}

‎Sections/Section 3/01-starting-setup/src/components/ExpenseItem.js

Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
import './ExpenseItem.css'
2+
3+
function ExpenseItem () {
4+
const expenseDate = new Date(2021, 2, 28);
5+
const expenseTitle = 'Car Insurance';
6+
const expenseAmount = 294.67;
7+
8+
return (
9+
<div className="expense-item">
10+
<div>{expenseDate.toISOString()}</div>
11+
<div className="expense-item__description">
12+
<h2>{expenseTitle}</h2>
13+
<div className="expense-item__price">${expenseAmount}</div>
14+
</div>
15+
</div>
16+
)
17+
}
18+
19+
export default ExpenseItem

‎Sections/Section 3/01-starting-setup/src/index.css

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400;700&display=swap');
2+
3+
* {
4+
box-sizing: border-box;
5+
}
6+
7+
html {
8+
font-family: 'Noto Sans JP', sans-serif;
9+
}
10+
11+
body {
12+
margin: 0;
13+
background-color: #3f3f3f;
14+
}
15+

‎Sections/Section 3/01-starting-setup/src/index.js

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
import ReactDOM from 'react-dom';
2+
3+
import './index.css';
4+
import App from './App';
5+
6+
ReactDOM.render(<App />, document.getElementById('root'));

0 commit comments

Comments
 (0)