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

feat: fixed

Browse source
This commit is contained in:
Mike 2024-06-16 20:44:25 -04:00
parent 18f5a11ed7
commit 5596492721
2 changed files with 103 additions and 42 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

25
cv-project/.eslintrc.cjs
View file

@ -2,20 +2,21 @@ module.exports = {
root: true,
env: { browser: true, es2020: true },
extends: [
'eslint:recommended',
'plugin:react/recommended',
'plugin:react/jsx-runtime',
'plugin:react-hooks/recommended',
"eslint:recommended",
"plugin:react/recommended",
"plugin:react/jsx-runtime",
"plugin:react-hooks/recommended",
],
ignorePatterns: ['dist', '.eslintrc.cjs'],
parserOptions: { ecmaVersion: 'latest', sourceType: 'module' },
settings: { react: { version: '18.2' } },
plugins: ['react-refresh'],
ignorePatterns: ["dist", ".eslintrc.cjs"],
parserOptions: { ecmaVersion: "latest", sourceType: "module" },
settings: { react: { version: "18.2" } },
plugins: ["react-refresh"],
rules: {
'react/jsx-no-target-blank': 'off',
'react-refresh/only-export-components': [
'warn',
"react/prop-types": "off",
"react/jsx-no-target-blank": "off",
"react-refresh/only-export-components": [
"warn",
{ allowConstantExport: true },
],
},
}
};

120
cv-project/src/components/educationInfo.jsx
View file

@ -1,42 +1,102 @@
import { useState } from "react";
export default function EducationInfo() {
const [education, setEducation] = useState([]);
const [educationItemActive, setEducationItemActive] = useState(false);
return (
<div>
{education.length <= 0 ? (
<>
<p>Add your Education info</p>
</>
) : (
<EducationDisplay schools={education} />
)}
<button
onClick={() => {
setEducationItemActive(!educationItemActive);
}}
>
Add Education Info
</button>
<EducationItem
isActive={educationItemActive}
schools={education}
setSchools={setEducation}
/>
</div>
);
}
function EducationDisplay(props) {
return (
<div>
{props.schools.map((item) => {
return (
<div key={item.school} className="education-info">
<h2>School: {item.school}</h2>
<p>
Graduation Date: {item.graduation + " "}
Field of Study: {item.concentration}
<button>edit</button>
<button>remove</button>
</p>
</div>
);
})}
</div>
);
}
function EducationItem({ isActive, schools, setSchools }) {
const [graduationDate, setGraduationDate] = useState("");
const [schoolName, setSchoolName] = useState("");
const [fieldOfStudy, setFieldOfStudy] = useState("");
return (
<div>
<div className="education-info-form">
<input
type="text"
placeholder="School Name"
value={schoolName}
onChange={(e) => setSchoolName(e.target.value)}
/>
<input
type="text"
placeholder="Graduation Date"
value={graduationDate}
onChange={(e) => setGraduationDate(e.target.value)}
/>
<input
type="text"
placeholder="Field of Study"
value={fieldOfStudy}
onChange={(e) => setFieldOfStudy(e.target.value)}
/>
<button>Submit</button>
</div>
<div className="education-info">
<h2>School: {schoolName}</h2>
<p>
Graduation Date: {graduationDate}
<br /> Field of Study: {fieldOfStudy}
</p>
<button>remove</button>
<button>edit</button>
</div>
{isActive ? (
<div className="education-info-form">
<input
type="text"
placeholder="School Name"
value={schoolName}
onChange={(e) => setSchoolName(e.target.value)}
/>
<input
type="text"
placeholder="Graduation Date"
value={graduationDate}
onChange={(e) => setGraduationDate(e.target.value)}
/>
<input
type="text"
placeholder="Field of Study"
value={fieldOfStudy}
onChange={(e) => setFieldOfStudy(e.target.value)}
/>
<button
type="submit"
onClick={(e) => {
e.preventDefault();
setSchools([
...schools,
{
school: schoolName,
concentration: fieldOfStudy,
graduation: graduationDate,
},
]);
setGraduationDate("");
setSchoolName("");
setFieldOfStudy("");
}}
>
Submit
</button>
</div>
) : null}
</div>
);
}