Skip to content
This repository was archived by the owner on Mar 13, 2025. It is now read-only.

Commit 583dced

Browse files
pramit-maratthapramit-marattha
authored
grocery-list-manager #13 
1 parent ce6d035 commit 583dced

File tree

16 files changed

+11212
-1
lines changed

16 files changed

+11212
-1
lines changed

‎grocery-list-react-web-app-project/README.md

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,6 @@
1-
![under_construction](https://user-images.githubusercontent.com/37651620/93677983-a7942e00-facc-11ea-8b6d-b57e73dc73bf.png)
1+
![image](https://user-images.githubusercontent.com/37651620/95011170-8136cc80-064e-11eb-9b4b-8200b1fdf290.png)
2+
3+
## It's Live 🎉 Visit here ==> https://grocery-list-manager.netlify.app/
24

35
This project was bootstrapped with [Create React App](https://github.com/facebook/create-react-app).
46

‎grocery-list-react-web-app-project/package.json

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

‎grocery-list-react-web-app-project/public/favicon.ico

15 KB
Binary file not shown.

‎grocery-list-react-web-app-project/public/index.html

Lines changed: 22 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,22 @@
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+
<link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
15+
16+
<title>Grocery List</title>
17+
</head>
18+
<body>
19+
<noscript>You need to enable JavaScript to run this app.</noscript>
20+
<div id="root"></div>
21+
</body>
22+
</html>

‎grocery-list-react-web-app-project/public/logo192.png

5.22 KB
Loading

‎grocery-list-react-web-app-project/public/logo512.png

9.44 KB
Loading

‎grocery-list-react-web-app-project/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+
}

‎grocery-list-react-web-app-project/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:

‎grocery-list-react-web-app-project/src/App.css

Lines changed: 140 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,140 @@
1+
.App {
2+
text-align: center;
3+
}
4+
.App-header {
5+
min-height: 20vh;
6+
display: flex;
7+
flex-direction: column-reverse;
8+
align-items: center;
9+
justify-content: center;
10+
font-size: calc(10px + 2vmin);
11+
color: white;
12+
}
13+
body {
14+
background-color: #222222;
15+
}
16+
17+
.App-link {
18+
color: #61dafb;
19+
}
20+
21+
@keyframes App-logo-spin {
22+
from {
23+
transform: rotate(0deg);
24+
}
25+
to {
26+
transform: rotate(360deg);
27+
}
28+
}
29+
30+
.myButton {
31+
background-color: #44c767;
32+
border-radius: 12px;
33+
border: 1px solid #18ab29;
34+
display: inline-block;
35+
cursor: pointer;
36+
color: #ffffff;
37+
font-family: Arial;
38+
font-size: 17px;
39+
padding: 25px 301px;
40+
text-decoration: none;
41+
text-shadow: 0px 1px 0px #2f6627;
42+
}
43+
.myButton:hover {
44+
background-color: #5cbf2a;
45+
}
46+
.myButton:active {
47+
position: relative;
48+
top: 1px;
49+
}
50+
51+
.redButton {
52+
box-shadow: inset 0px 39px 0px -24px #e67a73;
53+
background-color: #e4685d;
54+
border-radius: 4px;
55+
border: 1px solid #ffffff;
56+
display: inline-block;
57+
cursor: pointer;
58+
color: #ffffff;
59+
font-family: Arial;
60+
font-size: 15px;
61+
padding: 6px 15px;
62+
text-decoration: none;
63+
text-shadow: 0px 1px 0px #b23e35;
64+
}
65+
.redButton:hover {
66+
background-color: #eb675e;
67+
}
68+
.redButton:active {
69+
position: relative;
70+
top: 1px;
71+
}
72+
73+
.form-grp {
74+
position: relative;
75+
padding: 15px 0 0;
76+
margin-top: 10px;
77+
width: 50%;
78+
}
79+
80+
.field {
81+
font-family: inherit;
82+
width: 250%;
83+
border: 0;
84+
border-bottom: 2px solid #9b9b9b;
85+
outline: 0;
86+
font-size: 1.3rem;
87+
color: #fff;
88+
padding: 5px 0;
89+
background: transparent;
90+
transition: border-color 0.2s;
91+
}
92+
.field::placeholder {
93+
color: transparent;
94+
}
95+
.field:placeholder-shown ~ .form__label {
96+
font-size: 1.3rem;
97+
cursor: text;
98+
top: 20px;
99+
}
100+
101+
.label {
102+
position: absolute;
103+
top: 0;
104+
display: block;
105+
transition: 0.2s;
106+
font-size: 1rem;
107+
color: #9b9b9b;
108+
}
109+
110+
.field:focus {
111+
padding-bottom: 6px;
112+
font-weight: 700;
113+
border-width: 3px;
114+
border-image: linear-gradient(to right, #11998e, #38ef7d);
115+
border-image-slice: 1;
116+
}
117+
.field:focus ~ .label {
118+
position: absolute;
119+
top: 0;
120+
display: block;
121+
transition: 0.2s;
122+
font-size: 1rem;
123+
color: #11998e;
124+
font-weight: 700;
125+
}
126+
127+
/*reset*/
128+
.field:required,
129+
.field:invalid {
130+
box-shadow: none;
131+
}
132+
133+
.grid-container {
134+
display: grid;
135+
grid-template-columns: auto auto auto auto;
136+
grid-gap: 10px;
137+
background-color: #222222;
138+
padding: 10px;
139+
border-radius: 19px;
140+
}

‎grocery-list-react-web-app-project/src/App.js

Lines changed: 38 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,38 @@
1+
import React, { useEffect, useState } from "react";
2+
import GroceryForm from "./components/GroceryForm";
3+
import "./App.css";
4+
import GroceryList from "./components/GroceryList";
5+
6+
function App() {
7+
const [items, setItems] = useState([]);
8+
const addItem = (item) => {
9+
setItems([...items, item]);
10+
};
11+
12+
const removeItem = (itemToBeDeleted) => {
13+
setItems(items.filter((item) => itemToBeDeleted !== item));
14+
};
15+
16+
useEffect(() => {
17+
const items = JSON.parse(localStorage.getItem("items"));
18+
if (items) {
19+
setItems(items);
20+
}
21+
}, []);
22+
23+
useEffect(() => {
24+
localStorage.setItem("items", JSON.stringify(items));
25+
}, [items]);
26+
27+
return (
28+
<div className="App">
29+
<header className="App-header">
30+
<GroceryList items={items} removeItem={removeItem} />
31+
<GroceryForm addItem={addItem} />
32+
Grocery Items
33+
</header>
34+
</div>
35+
);
36+
}
37+
38+
export default App;

0 commit comments

Comments
 (0)