smig/odin-codespace
1
0
Fork 0
mirror of https://gitea.smigz.com/smiggiddy/odin-codeprojects.git synced 2024-12-26 22:30:44 -05:00
Code Issues Projects Releases Packages Wiki Activity Actions

feat(styling): colors, btns, etc

Browse source
This commit is contained in:
Mike 2024-06-23 14:53:04 -04:00
parent 10e4fb79d8
commit eb98bc2905
4 changed files with 83 additions and 68 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

17
cv-project/src/App.jsx
View file

@ -7,6 +7,7 @@ import ExperienceDisplay from "./components/experienceDisplay";
import "./App.css";
import { useState } from "react";
import Button from "./components/button";
function App() {
const [basicInfo, setBasicInfo] = useState({
@ -26,16 +27,18 @@ function App() {
<div className="form">
<GeneralInfoForm setBasicInfo={setBasicInfo} basicInfo={basicInfo} />
<div className="btn-group">
<button
<Button
onClick={() => {
setEducationItemActive(!educationItemActive);
}}
>
Add Education Info
</button>
<button onClick={() => setShowJobForm(!showJobForm)}>
Add Employer Info
</button>
text="Add Education"
className="normal-btn"
/>
<Button
onClick={() => setShowJobForm(!showJobForm)}
text="Add Employment"
className="normal-btn"
/>
</div>
<EducationInfoForm
educationInfo={educationInfo}

80
cv-project/src/components/educationInfoForm.jsx
View file

@ -1,5 +1,6 @@
import { useState, useEffect } from "react";
import Input from "./input";
import Button from "./button";
export default function EducationInfoForm(props) {
return (
@ -78,48 +79,49 @@ function EducationForm({
value={fieldOfStudy}
onChange={(e) => setFieldOfStudy(e.target.value)}
/>
<button
type="submit"
onClick={(e) => {
e.preventDefault();
const updatedSchools = [...educationInfo];
if (schoolId !== -1 && schoolId !== null) {
updatedSchools[schoolId] = {
schoolName: schoolName,
graduationDate: graduationDate,
fieldOfStudy: fieldOfStudy,
};
setEducationInfo(updatedSchools);
} else {
setEducationInfo([
...educationInfo,
{
<div className="btn-group">
<Button
onClick={(e) => {
e.preventDefault();
setGraduationDate("");
setSchoolName("");
setFieldOfStudy("");
schoolId = null;
}}
text="Clear"
/>
<Button
type="submit"
className="submit-btn"
onClick={(e) => {
e.preventDefault();
const updatedSchools = [...educationInfo];
if (schoolId !== -1 && schoolId !== null) {
updatedSchools[schoolId] = {
schoolName: schoolName,
fieldOfStudy: fieldOfStudy,
graduationDate: graduationDate,
id: crypto.randomUUID(),
},
]);
}
fieldOfStudy: fieldOfStudy,
};
setEducationInfo(updatedSchools);
} else {
setEducationInfo([
...educationInfo,
{
schoolName: schoolName,
fieldOfStudy: fieldOfStudy,
graduationDate: graduationDate,
id: crypto.randomUUID(),
},
]);
}
setGraduationDate("");
setSchoolName("");
setFieldOfStudy("");
}}
>
Submit
</button>
<button
onClick={(e) => {
e.preventDefault();
setGraduationDate("");
setSchoolName("");
setFieldOfStudy("");
schoolId = null;
}}
>
Clear
</button>
setGraduationDate("");
setSchoolName("");
setFieldOfStudy("");
}}
text="Submit"
/>
</div>
</form>
</div>
) : null}

44
cv-project/src/components/experienceForm.jsx
View file

@ -1,5 +1,6 @@
import { useState } from "react";
import Input from "./input";
import Button from "./button";
export default function ExperienceForm(props) {
return (
@ -94,27 +95,28 @@ function JobForm({ isActive, jobs, setJobs }) {
onChange={(e) => setJobDescription(e.target.value)}
/>
</div>
<button
onClick={(e) => {
e.preventDefault();
clear();
}}
>
Clear
</button>
<button
onClick={(e) =>
handleSubmit(e, {
employer,
jobTitle,
jobDescription,
employmentStart,
employmentEnd,
})
}
>
Submit
</button>
<div className="btn-group">
<Button
onClick={(e) => {
e.preventDefault();
clear();
}}
text="Clear"
/>
<Button
onClick={(e) =>
handleSubmit(e, {
employer,
jobTitle,
jobDescription,
employmentStart,
employmentEnd,
})
}
className="submit-btn"
text="Submit"
/>
</div>
</form>
</div>
) : null}

10
cv-project/src/styles/input.css
View file

@ -15,5 +15,13 @@
}
.input input {
font-size: 1.3rem;
font-size: 1.1rem;
padding: 0.5rem;
border-radius: 0.4rem;
outline: 1px solid hsl(var(--light-gray));
border: none;
}
.input input:focus {
outline: 2px solid hsl(var(--dark-gray));
}