Skip to content

Commit 3ae358d

Browse files
yashika51yashika51
authored
Merge pull request #15 from citruscai/add_new_experience
Create ability for user to add and view work experience
2 parents bd764f8 + 958d8a0 commit 3ae358d

14 files changed

+613
-95
lines changed

‎package.json

+1-1
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,7 @@
88
"@testing-library/user-event": "^13.2.1",
99
"eslint": "^8.40.0",
1010
"eslint-plugin-react": "^7.32.2",
11-
"react": "^18.2.0",
11+
"react": "^18.3.1",
1212
"react-dom": "^18.2.0",
1313
"react-scripts": "5.0.1",
1414
"web-vitals": "^2.1.0"

‎public/index.html

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
<!DOCTYPE html>
1+
<!doctype html>
22
<html lang="en">
33
<head>
44
<meta charset="utf-8" />

‎src/App.css

+141-1
Original file line numberDiff line numberDiff line change
@@ -13,7 +13,11 @@ body {
1313
margin: 0 auto 20px;
1414
max-width: 600px;
1515
border-radius: 15px;
16-
box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23);
16+
box-shadow:
17+
0 3px 6px rgba(0, 0, 0, 0.16),
18+
0 3px 6px rgba(0, 0, 0, 0.23);
19+
margin-bottom: 20px;
20+
1721
color: black;
1822
}
1923

@@ -41,6 +45,142 @@ button:hover {
4145
margin-top: 10px;
4246
}
4347

48+
.experienceForm .modal {
49+
position: fixed;
50+
top: 50%;
51+
left: 50%;
52+
transform: translate(-50%, -50%);
53+
background-color: white;
54+
padding: 20px;
55+
max-width: 90%;
56+
width: 400px;
57+
height: 450px;
58+
max-height: 90vh;
59+
overflow-y: auto;
60+
border-radius: 8px;
61+
box-shadow: 0px 4px 15px rgba(0, 0, 0, 0.2);
62+
display: flex;
63+
flex-direction: column;
64+
z-index: 1000;
65+
}
66+
67+
.experienceForm .modal-overlay {
68+
position: fixed;
69+
top: 0;
70+
left: 0;
71+
width: 100vw;
72+
height: 100vh;
73+
background: rgba(0, 0, 0, 0.5);
74+
display: flex;
75+
justify-content: center;
76+
align-items: center;
77+
z-index: 999;
78+
}
79+
80+
.experienceForm .close-button {
81+
position: absolute;
82+
top: 10px;
83+
right: 10px;
84+
background-color: transparent;
85+
border: none;
86+
font-size: 20px;
87+
cursor: pointer;
88+
}
89+
90+
.experienceForm {
91+
display: flex;
92+
flex-direction: column;
93+
gap: 15px;
94+
max-width: 100%;
95+
margin: 0 auto;
96+
}
97+
98+
.experienceForm .row {
99+
display: flex;
100+
flex-direction: column;
101+
gap: 10px;
102+
}
103+
104+
@media (min-width: 600px) {
105+
.experienceForm .row {
106+
flex-direction: row;
107+
justify-content: space-between;
108+
}
109+
}
110+
111+
.experienceForm label {
112+
display: flex;
113+
flex-direction: column;
114+
flex: 1;
115+
}
116+
117+
.experienceForm .fullWidth {
118+
flex: 1;
119+
text-align: center;
120+
}
121+
122+
.experienceForm .logoPreview {
123+
max-width: 100px;
124+
margin-bottom: 10px;
125+
}
126+
127+
.experienceForm .buttonRow {
128+
display: flex;
129+
gap: 10px;
130+
justify-content: space-between;
131+
}
132+
133+
.experienceForm button {
134+
padding: 8px 16px;
135+
background-color: #f8b92a;
136+
border: none;
137+
border-radius: 4px;
138+
cursor: pointer;
139+
}
140+
141+
.experienceForm button:hover {
142+
background-color: #dc8937;
143+
}
144+
145+
.experienceForm .fileUploadContainer {
146+
display: flex;
147+
justify-content: center;
148+
margin: 20px 0;
149+
}
150+
151+
.experienceForm .logoPreviewContainer {
152+
display: flex;
153+
justify-content: center;
154+
margin: 20px 0;
155+
}
156+
157+
.experienceForm .logoPreview {
158+
max-width: 50px;
159+
max-height: 50px;
160+
width: auto;
161+
height: auto;
162+
object-fit: contain;
163+
margin-bottom: 10px;
164+
}
165+
166+
.experienceForm .fileUploadContainer label {
167+
display: flex;
168+
flex-direction: column;
169+
align-items: center;
170+
}
171+
172+
.experienceForm .buttonRow {
173+
display: flex;
174+
gap: 10px;
175+
justify-content: center;
176+
}
177+
178+
@media (min-width: 600px) {
179+
.experienceForm .buttonRow {
180+
justify-content: flex-end;
181+
}
182+
}
183+
44184
.modal-overlay {
45185
position: fixed;
46186
top: 0;

‎src/App.js

+113-83
Original file line numberDiff line numberDiff line change
@@ -6,109 +6,139 @@ import SkillEditPage from "./components/skills/SkillEditPage";
66
import EducationForm from "./components/education/EducationForm";
77
import EducationView from "./components/education/EducationView";
88
import EducationEditPage from "./components/education/EducationEditPage";
9+
import ExperienceForm from "./components/experience/ExperienceForm";
10+
import ViewExperience from "./components/experience/ViewExperience";
911
import User from "./components/User/page";
1012

1113
function App() {
12-
const [showAddSkillForm, setShowAddSkillForm] = useState(false);
13-
const [showSkillEditPage, setShowSkillEditPage] = useState(false);
14-
const [skills, setSkills] = useState([]);
15-
1614
const [showEducationForm, setShowEducationForm] = useState(false);
1715
const [showEducationEditPage, setShowEducationEditPage] = useState(false);
1816
const [education, setEducation] = useState([]);
17+
const [showAddSkillForm, setShowAddSkillForm] = useState(false);
18+
const [showSkillEditPage, setShowSkillEditPage] = useState(false);
19+
const [skills, setSkills] = useState([]);
20+
const [experiences, setExperiences] = useState([]);
21+
const [showExperienceForm, setShowExperienceForm] = useState(false);
1922

20-
const handleAddSkillClick = () => {
21-
setShowAddSkillForm(!showAddSkillForm);
23+
const handleAddExperience = () => {
24+
setShowExperienceForm(true);
2225
};
2326

24-
const handleFormSubmit = (newSkill) => {
25-
setSkills([...skills, newSkill]);
26-
setShowAddSkillForm(false);
27+
const handleSubmitExperience = (experienceData) => {
28+
setExperiences([...experiences, experienceData]);
29+
setShowExperienceForm(false);
2730
};
2831

29-
const toggleSkillEditPage = () => {
30-
setShowSkillEditPage(!showSkillEditPage);
32+
const handleCancel = () => {
33+
setShowExperienceForm(false);
3134
};
35+
36+
const handleAddSkillClick = () => {
37+
setShowAddSkillForm(!showAddSkillForm);
38+
};
3239

33-
const handleSkillUpdate = (updatedSkills) => {
34-
setSkills(updatedSkills);
35-
setShowSkillEditPage(false);
36-
};
40+
const handleFormSubmit = (newSkill) => {
41+
setSkills([...skills, newSkill]);
42+
setShowAddSkillForm(false);
43+
};
3744

38-
const handleAddEducationClick = () => {
39-
setShowEducationForm(!showEducationForm);
40-
};
45+
const toggleSkillEditPage = () => {
46+
setShowSkillEditPage(!showSkillEditPage);
47+
};
4148

42-
const handleEducationFormSubmit = (newEducation) => {
43-
setEducation([...education, newEducation]);
44-
setShowEducationForm(false);
45-
};
49+
const handleSkillUpdate = (updatedSkills) => {
50+
setSkills(updatedSkills);
51+
setShowSkillEditPage(false);
52+
};
4653

47-
const toggleEducationEditPage = () => {
48-
setShowEducationEditPage(!showEducationEditPage);
49-
};
54+
const handleAddEducationClick = () => {
55+
setShowEducationForm(!showEducationForm);
56+
};
5057

51-
const handleEducationUpdate = (updatedEducation) => {
52-
setEducation(updatedEducation);
53-
setShowEducationEditPage(false);
54-
};
58+
const handleEducationFormSubmit = (newEducation) => {
59+
setEducation([...education, newEducation]);
60+
setShowEducationForm(false);
61+
};
5562

56-
return (
57-
<div className="App">
58-
<h1>Resume Builder</h1>
59-
<div className="resumeSection">
60-
<h2>User</h2>
61-
<p>Add User Information</p>
62-
<User />
63-
<br></br>
64-
</div>
65-
<div className="resumeSection">
66-
<h2>Experience</h2>
67-
<p>Experience Placeholder</p>
68-
<button>Add Experience</button>
69-
<br />
70-
</div>
71-
<div className="resumeSection">
72-
<h2>Education</h2>
73-
<EducationView education={education} />
74-
<div className="button-group">
75-
<button onClick={handleAddEducationClick}>
76-
{showEducationForm ? "Hide" : "Add Education"}
77-
</button>
78-
<button onClick={toggleEducationEditPage}>
79-
{showEducationEditPage ? "Hide Edit Education" : "Edit Education"}
80-
</button>
63+
const toggleEducationEditPage = () => {
64+
setShowEducationEditPage(!showEducationEditPage);
65+
};
66+
67+
const handleEducationUpdate = (updatedEducation) => {
68+
setEducation(updatedEducation);
69+
setShowEducationEditPage(false);
70+
};
71+
72+
return (
73+
<div className="App">
74+
<h1>Resume Builder</h1>
75+
<div className="resumeSection">
76+
<h2>User</h2>
77+
<p>Add User Information</p>
78+
<User />
79+
<br></br>
8180
</div>
82-
{showEducationForm && (
83-
<EducationForm onSubmit={handleEducationFormSubmit} />
84-
)}
85-
{showEducationEditPage && (
86-
<EducationEditPage
87-
education={education}
88-
onUpdate={handleEducationUpdate}
89-
/>
90-
)}
91-
</div>
92-
<div className="resumeSection">
93-
<h2>Skills</h2>
94-
<SkillView skills={skills} />
95-
<div className="button-group">
96-
<button onClick={handleAddSkillClick}>
97-
{showAddSkillForm ? "Hide" : "Add Skill"}
98-
</button>
99-
<button onClick={toggleSkillEditPage}>
100-
{showSkillEditPage ? "Hide Edit Skills" : "Edit Skills"}
101-
</button>
81+
<div className="resumeSection">
82+
<h2>Experience</h2>
83+
84+
{showExperienceForm ? (
85+
<ExperienceForm
86+
onSubmit={handleSubmitExperience}
87+
onCancel={handleCancel}
88+
/>
89+
) : (
90+
<>
91+
<button onClick={handleAddExperience}>Add Experience</button>
92+
<ViewExperience experiences={experiences} />
93+
</>
94+
)}
95+
</div>
96+
97+
<div className="resumeSection">
98+
<h2>Education</h2>
99+
100+
<EducationView education={education} />
101+
<div className="button-group">
102+
<button onClick={handleAddEducationClick}>
103+
{showEducationForm ? "Hide" : "Add Education"}
104+
</button>
105+
<button onClick={toggleEducationEditPage}>
106+
{showEducationEditPage ? "Hide Edit Education" : "Edit Education"}
107+
</button>
108+
</div>
109+
{showEducationForm && (
110+
<EducationForm onSubmit={handleEducationFormSubmit} />
111+
)}
112+
{showEducationEditPage && (
113+
<EducationEditPage
114+
education={education}
115+
onUpdate={handleEducationUpdate}
116+
/>
117+
)}
118+
</div>
119+
120+
<div className="resumeSection">
121+
<h2>Skills</h2>
122+
123+
<SkillView skills={skills} />
124+
<div className="button-group">
125+
<button onClick={handleAddSkillClick}>
126+
{showAddSkillForm ? "Hide" : "Add Skill"}
127+
</button>
128+
<button onClick={toggleSkillEditPage}>
129+
{showSkillEditPage ? "Hide Edit Skills" : "Edit Skills"}
130+
</button>
131+
</div>
132+
{showAddSkillForm && <AddSkillForm onSubmit={handleFormSubmit} />}
133+
{showSkillEditPage && (
134+
<SkillEditPage skills={skills} onUpdate={handleSkillUpdate} />
135+
)}
102136
</div>
103-
{showAddSkillForm && <AddSkillForm onSubmit={handleFormSubmit} />}
104-
{showSkillEditPage && (
105-
<SkillEditPage skills={skills} onUpdate={handleSkillUpdate} />
106-
)}
137+
138+
<br />
139+
<button>Export</button>
107140
</div>
108-
<br />
109-
<button>Export</button>
110-
</div>
111-
);
112-
}
141+
);
142+
};
113143

114144
export default App;

0 commit comments

Comments
 (0)