Skip to content

Commit c305fa4

Browse files
yashika51yashika51
authored
Merge pull request #24 from Kingscliq/edit-feature
Add Edit feature to experience form
2 parents cc9abb7 + 567e534 commit c305fa4

14 files changed

+3074
-2285
lines changed

‎README.md

+6
Original file line numberDiff line numberDiff line change
@@ -72,3 +72,9 @@ This section has moved here: [https://facebook.github.io/create-react-app/docs/d
7272
### `yarn build` fails to minify
7373

7474
This section has moved here: [https://facebook.github.io/create-react-app/docs/troubleshooting#npm-run-build-fails-to-minify](https://facebook.github.io/create-react-app/docs/troubleshooting#npm-run-build-fails-to-minify)
75+
76+
What the project goals are
77+
78+
What does it look like
79+
80+
What are the prerequisites that are required (for example node v12+)

‎package-lock.json

+1,278-846
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json

+18-2
Original file line numberDiff line numberDiff line change
@@ -9,15 +9,28 @@
99
"axios": "^1.7.7",
1010
"eslint": "^8.40.0",
1111
"eslint-plugin-react": "^7.32.2",
12-
1312
"husky": "^9.1.6",
1413
"react": "^18.2.0",
15-
1614
"react-dom": "^18.2.0",
1715
"react-dropzone": "^14.2.6",
1816
"react-scripts": "5.0.1",
17+
"uuid": "^10.0.0",
1918
"web-vitals": "^2.1.0"
2019
},
20+
"jest": {
21+
"transform": {
22+
"^.+\\.(js|jsx|ts|tsx)$": "babel-jest"
23+
},
24+
"transformIgnorePatterns": [
25+
"/node_modules/(?!axios)"
26+
]
27+
},
28+
"babel": {
29+
"presets": [
30+
"@babel/preset-env",
31+
"@babel/preset-react"
32+
]
33+
},
2134
"scripts": {
2235
"start": "react-scripts start",
2336
"build": "react-scripts build",
@@ -47,6 +60,9 @@
4760
]
4861
},
4962
"devDependencies": {
63+
"@babel/preset-env": "^7.25.8",
64+
"@babel/preset-react": "^7.25.7",
65+
"babel-jest": "^29.7.0",
5066
"eslint-config-prettier": "^8.8.0",
5167
"prettier": "2.8.8"
5268
}

‎src/App.css

+175-5
Original file line numberDiff line numberDiff line change
@@ -13,9 +13,7 @@ body {
1313
margin: 0 auto 20px;
1414
max-width: 600px;
1515
border-radius: 15px;
16-
box-shadow:
17-
0 3px 6px rgba(0, 0, 0, 0.16),
18-
0 3px 6px rgba(0, 0, 0, 0.23);
16+
box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23);
1917
margin-bottom: 20px;
2018

2119
color: black;
@@ -45,7 +43,179 @@ button:hover {
4543
margin-top: 10px;
4644
}
4745

48-
.experienceForm .modal {
46+
.experienceForm {
47+
display: flex;
48+
flex-direction: column;
49+
gap: 15px;
50+
max-width: 600px;
51+
margin: 0 auto;
52+
}
53+
54+
.experienceForm .row {
55+
display: flex;
56+
justify-content: space-between;
57+
gap: 20px;
58+
}
59+
60+
.experienceForm label {
61+
display: flex;
62+
flex-direction: column;
63+
flex: 1;
64+
}
65+
66+
.experienceForm .fullWidth {
67+
flex: 1;
68+
text-align: center;
69+
}
70+
71+
.experienceForm .logoPreview {
72+
max-width: 100px;
73+
margin-bottom: 10px;
74+
}
75+
76+
.experienceForm buttonRow {
77+
display: flex;
78+
gap: 10px;
79+
justify-content: space-between;
80+
}
81+
82+
.experienceForm button {
83+
padding: 8px 16px;
84+
background-color: #f8b92a;
85+
border: none;
86+
border-radius: 4px;
87+
cursor: pointer;
88+
margin-right: 10px;
89+
}
90+
91+
.experienceForm button:hover {
92+
background-color: #dc8937;
93+
}
94+
.experienceForm .fileUploadContainer {
95+
display: flex;
96+
justify-content: center;
97+
margin: 20px 0;
98+
}
99+
.experienceForm .logoPreviewContainer {
100+
display: flex;
101+
justify-content: center;
102+
margin: 20px 0;
103+
}
104+
105+
.experienceForm .logoPreview {
106+
max-width: 50px;
107+
max-height: 50px;
108+
width: auto;
109+
height: auto;
110+
object-fit: contain;
111+
margin-bottom: 10px;
112+
align-items: center;
113+
}
114+
115+
.experienceForm .fileUploadContainer label {
116+
display: flex;
117+
flex-direction: column;
118+
align-items: center;
119+
}
120+
121+
.experienceTable {
122+
display: flex;
123+
flex-direction: column;
124+
width: 100%;
125+
gap: 10px;
126+
max-width: 900px;
127+
margin: 0 auto;
128+
}
129+
130+
.experienceRow {
131+
display: flex;
132+
align-items: center;
133+
padding: 10px;
134+
background-color: #f9f9f9;
135+
border: 1px solid #ddd;
136+
border-radius: 8px;
137+
transition: box-shadow 0.3s ease;
138+
}
139+
140+
.experienceRow:hover {
141+
box-shadow: 0px 4px 12px rgba(0, 0, 0, 0.1);
142+
}
143+
144+
.experienceLogo {
145+
flex: 0 0 100px;
146+
display: flex;
147+
justify-content: center;
148+
align-items: center;
149+
}
150+
151+
.experienceLogo img {
152+
width: 80px;
153+
height: 80px;
154+
object-fit: cover;
155+
border-radius: 8px;
156+
}
157+
158+
.noLogo {
159+
width: 80px;
160+
height: 80px;
161+
display: flex;
162+
justify-content: center;
163+
align-items: center;
164+
background-color: #ddd;
165+
border-radius: 8px;
166+
font-size: 12px;
167+
color: #777;
168+
}
169+
170+
.experienceDetails {
171+
flex-grow: 1;
172+
padding: 0 15px;
173+
}
174+
175+
.experienceTitle {
176+
font-size: 18px;
177+
font-weight: bold;
178+
color: #333;
179+
}
180+
181+
.experienceCompany {
182+
font-size: 16px;
183+
color: #777;
184+
margin-bottom: 5px;
185+
}
186+
187+
.experienceDates {
188+
font-size: 14px;
189+
color: #666;
190+
margin-bottom: 5px;
191+
}
192+
193+
.experienceDescription {
194+
font-size: 14px;
195+
color: #555;
196+
line-height: 1.5;
197+
}
198+
199+
.experienceActions {
200+
flex: 0 0 120px;
201+
display: flex;
202+
justify-content: space-evenly;
203+
}
204+
205+
.experienceActions button {
206+
padding: 5px 10px;
207+
background-color: #007bff;
208+
color: white;
209+
border: none;
210+
border-radius: 4px;
211+
cursor: pointer;
212+
}
213+
214+
.experienceActions button:hover {
215+
background-color: #0056b3;
216+
}
217+
218+
/* .experienceForm .modal {
49219
position: fixed;
50220
top: 50%;
51221
left: 50%;
@@ -173,7 +343,7 @@ button:hover {
173343
display: flex;
174344
gap: 10px;
175345
justify-content: center;
176-
}
346+
} */
177347

178348
@media (min-width: 600px) {
179349
.experienceForm .buttonRow {

0 commit comments

Comments
 (0)