Skip to content

Commit

Permalink
added the functionality to update the general information
Browse files Browse the repository at this point in the history
  • Loading branch information
@himanshugupta2168
himanshugupta2168 committed Dec 5, 2023
1 parent 327f5a5 commit e92fb3b
Show file tree
Hide file tree
Showing 7 changed files with 162 additions and 68 deletions.
14 changes: 11 additions & 3 deletions src/App.jsx
View file
Original file line number Diff line number Diff line change
@@ -1,15 +1,23 @@
import React from 'react'
import {GeneralInformation, Header, SaveResume, Education, Project} from "./components"
import React, { useState } from 'react'
import {GeneralInformation, Header, SaveResume, Education, Project, CoCurricular} from "./components"

function App() {
const [generalInformation, SetGeneralInformation]= useState({
fullName:"",
phoneNumber:0,
email:"",
description:"",
});
console.log(generalInformation)
return (
<div className='bg-wallpaper flex m-10 gap-x-14'>
<Header/>
<ul className='flex flex-col gap-4'>
<li><SaveResume/></li>
<li><GeneralInformation/></li>
<li><GeneralInformation generalInformation={generalInformation} SetGeneralInformation={SetGeneralInformation}/></li>
<li><Education/></li>
<li><Project/></li>
<li><CoCurricular/></li>
</ul>
</div>
)
Expand Down
Binary file added src/assets/icons/Certificates.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
55 changes: 55 additions & 0 deletions src/components/Certifications.jsx
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,55 @@
import React, { useState } from "react";
import Certificates from "../assets/icons/Certificates.png"
import expandMore from "../assets/icons/expand-more.png";
import expandLess from "../assets/icons/expand-less.png";

function CoCurricular() {
const [visible, setVisible] = useState(false);
const toggleForm = () => {
setVisible(visible);
};

const formHandler = (e) => {
e.preventDefault();
console.log(fullName);
};
return (
<div className="wrapper w-[480px] min-h-[100px] shadow-lg shadow-gray-500 bg-white rounded-lg flex flex-col justify-start gap-4 ">
<div
className="header flex flex-row items-center justify-around mt-6"
onClick={toggleForm}
>
<img className="w-[50px]" src={Certificates} alt="person" />
<p className="text-lg font-bold">Certifications</p>
<img
onClick={toggleForm}
src={visible ? expandLess : expandMore}
className="expand-icon w-[20px] cursor-pointer "
/>
</div>
{visible &&(
<form onSubmit={formHandler} className='px-10 pb-4' >
<div className='flex flex-col py-1'>
<label htmlFor="fullName" className='font-bold opacity-70'>Full Name </label>
<input type="text" name="fullName" placeholder='Enter your Full Name' id="fullName" className='bg-[#eef0f4] px-2 py-2 rounded-md outline-none'/>
</div>
<div className='flex flex-col py-1'>
<label htmlFor="phoneNumber" className='font-bold opacity-70'>Phone Number</label>
<input type="number" name="email" placeholder='Enter your Contact Number' id="phoneNumber" className='bg-[#eef0f4] px-2 py-2 rounded-md outline-none' maxLength={10}/>
</div>
<div className='flex flex-col py-1'>
<label htmlFor="email" className='font-bold opacity-70'>Email</label>
<input type="email" name="emai;" placeholder='Enter your Email Address' id="email" className='bg-[#eef0f4] px-2 py-2 rounded-md outline-none' />
</div>
<div className='flex flex-col py-1'>
<label htmlFor="desc" className='opacity-70 font-bold'>Description</label>
<textarea name="" id="" cols="30" rows="5" className='resize-none p-2 border-gray-500 border-2 rounded-md'></textarea>
</div>
<input type="submit" value="Save " className='bg-red-700 text-white px-4 py-3 rounded-full font-bold hover:bg-red-600 transition-all duration-300 mt-4' />
</form>
)}
</div>
);
}

export default CoCurricular;
36 changes: 18 additions & 18 deletions src/components/Education.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -64,45 +64,45 @@ function Education() {
<input type="text" name="stream" placeholder='Enter the stream pursued/ pursuing' id="stream" className='bg-[#eef0f4] px-2 py-2 rounded-md outline-none' maxLength={10}/>
</div>
<div className='flex flex-col py-1'>
<label htmlFor="grades" className='font-bold'>Percentage(%)</label>
<input type="number" name="cgpa" placeholder='Enter your Percentage' id="grades" className='bg-[#eef0f4] px-2 py-2 rounded-md outline-none' maxLength={10}/>
<label htmlFor="grades_12" className='font-bold'>Percentage(%)</label>
<input type="number" name="percentage_12" placeholder='Enter your Percentage' id="grades_12" className='bg-[#eef0f4] px-2 py-2 rounded-md outline-none' maxLength={10}/>
</div>
<div className='flex flex-col py-1'>
<label htmlFor="city" className='font-bold opacity-70'>City</label>
<input type="text" name="hSchoolCity" placeholder='Enter The Institution City' id="city" className='bg-[#eef0f4] px-2 py-2 rounded-md outline-none' />
<label htmlFor="hSchoolCity" className='font-bold opacity-70'>City</label>
<input type="text" name="hSchoolCity" placeholder='Enter The Institution City' id="hSchoolCity" className='bg-[#eef0f4] px-2 py-2 rounded-md outline-none' />
</div>
<div className="dates flex justify-around">
<div>
<label htmlFor="startDate" className='block opacity-70 font-bold'>Start Date</label>
<input type="date" name="startDate" id="startDate" className='outline py-2 px-2 rounded-md'/>
<label htmlFor="startDate_12" className='block opacity-70 font-bold'>Start Date</label>
<input type="date" name="hSchoolStartDate" id="startDate_12" className='outline py-2 px-2 rounded-md'/>
</div>
<div>
<label htmlFor="endDate" className='block opacity-70 font-bold'>End Date</label>
<input type="date" name="endDate" id="endDate" className='outline py-2 px-2 rounded-md'/>
<label htmlFor="hSchoolEndDate" className='block opacity-70 font-bold'>End Date</label>
<input type="date" name="hSchoolEndDate" id="hSchoolEndDate" className='outline py-2 px-2 rounded-md'/>
</div>
</div>
{/* new qualification */}
<h2 className="font-bold my-6"> Secondary Schooling Details <span className='text-red-600'>*</span></h2>
<div className='flex flex-col py-1'>
<label htmlFor="school" className='font-bold opacity-70'>School</label>
<input type="text" name="schoolName" placeholder='Enter the name of School' id="school" className='bg-[#eef0f4] px-2 py-2 rounded-md outline-none'/>
<label htmlFor="school_10" className='font-bold opacity-70'>School</label>
<input type="text" name="schoolName" placeholder='Enter the name of School' id="school_10" className='bg-[#eef0f4] px-2 py-2 rounded-md outline-none'/>
</div>
<div className='flex flex-col py-1'>
<label htmlFor="grades" className='font-bold'>Percentage (%)</label>
<input type="number" name="gpa" placeholder='Enter your Precentage ' id="grades" className='bg-[#eef0f4] px-2 py-2 rounded-md outline-none' maxLength={10}/>
<label htmlFor="grades_10" className='font-bold'>Percentage (%)</label>
<input type="number" name="percentage_10" placeholder='Enter your Precentage ' id="grades_10" className='bg-[#eef0f4] px-2 py-2 rounded-md outline-none' maxLength={10}/>
</div>
<div className='flex flex-col py-1'>
<label htmlFor="city" className='font-bold opacity-70'>City</label>
<input type="text" name="schoolCity" placeholder='Enter The School City' id="city" className='bg-[#eef0f4] px-2 py-2 rounded-md outline-none' />
<label htmlFor="SchoolCity" className='font-bold opacity-70'>City</label>
<input type="text" name="schoolCity" placeholder='Enter The School City' id="SchoolCity" className='bg-[#eef0f4] px-2 py-2 rounded-md outline-none' />
</div>
<div className="dates flex justify-around">
<div>
<label htmlFor="startDate" className='block opacity-70 font-bold'>Start Date</label>
<input type="date" name="startDate" id="startDate" className='outline py-2 px-2 rounded-md'/>
<label htmlFor="SchoolStartDate" className='block opacity-70 font-bold'>Start Date</label>
<input type="date" name="SchoolStartDate" id="SchoolStartDate" className='outline py-2 px-2 rounded-md'/>
</div>
<div>
<label htmlFor="endDate" className='block font-bold opacity-70'>End Date</label>
<input type="date" name="endDate" id="endDate" className='outline py-2 px-2 rounded-md'/>
<label htmlFor="SchoolEndDate" className='block font-bold opacity-70'>End Date</label>
<input type="date" name="SchoolEndDate" id="SchoolEndDate" className='outline py-2 px-2 rounded-md'/>
</div>
</div>
<input type="submit" value="Save " className='bg-red-700 text-white px-4 py-3 rounded-full font-bold hover:bg-red-600 transition-all duration-300 mt-4' />
Expand Down
49 changes: 38 additions & 11 deletions src/components/GeneralInformation.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,16 +3,44 @@ import personal from "../assets/icons/personal.png"
import expandMore from '../assets/icons/expand-more.png'
import expandLess from "../assets/icons/expand-less.png"

function GeneralInformation() {
function GeneralInformation({generalInformation, SetGeneralInformation}) {
const [visible, setVisible]= useState(false);
const { fullName, phoneNumber, email, description } = generalInformation;

const formHandler= (e) => {
const { name, value } = e.target;
switch (name) {
case 'fullName':
SetGeneralInformation({
...generalInformation,
fullName:value,
})
break;
case 'PhNumber':
SetGeneralInformation({
...generalInformation,
phoneNumber:value,
})
break;
case 'email':
SetGeneralInformation({
...generalInformation,
email:value,
})
break;
default:
SetGeneralInformation({
...generalInformation,
description:value,
})
break;
}
};

const toggleForm=()=>{
setVisible(!visible);
}

const formHandler=(e)=>{
e.preventDefault();
console.log(fullName);
}

return (
<div className='wrapper w-[480px] min-h-[100px] shadow-lg shadow-gray-500 bg-white rounded-lg flex flex-col justify-start gap-4 '>
<div className="header flex flex-row items-center justify-around mt-6" onClick={toggleForm} >
Expand All @@ -28,21 +56,20 @@ function GeneralInformation() {
<form onSubmit={formHandler} className='px-10 pb-4' >
<div className='flex flex-col py-1'>
<label htmlFor="fullName" className='font-bold opacity-70'>Full Name </label>
<input type="text" name="fullName" placeholder='Enter your Full Name' id="fullName" className='bg-[#eef0f4] px-2 py-2 rounded-md outline-none'/>
<input type="text" name="fullName" value={fullName} placeholder='Enter your Full Name' id="fullName" className='bg-[#eef0f4] px-2 py-2 rounded-md outline-none' onChange={formHandler}/>
</div>
<div className='flex flex-col py-1'>
<label htmlFor="phoneNumber" className='font-bold opacity-70'>Phone Number</label>
<input type="number" name="email" placeholder='Enter your Contact Number' id="phoneNumber" className='bg-[#eef0f4] px-2 py-2 rounded-md outline-none' maxLength={10}/>
<input type="tel" name="PhNumber" value={phoneNumber} placeholder='Enter your Contact Number' id="phoneNumber" className='bg-[#eef0f4] px-2 py-2 rounded-md outline-none' maxLength={10} onChange={formHandler}/>
</div>
<div className='flex flex-col py-1'>
<label htmlFor="email" className='font-bold opacity-70'>Email</label>
<input type="email" name="emai;" placeholder='Enter your Email Address' id="email" className='bg-[#eef0f4] px-2 py-2 rounded-md outline-none' />
<input type="email" name="email" value={email} placeholder='Enter your Email Address' id="email" className='bg-[#eef0f4] px-2 py-2 rounded-md outline-none'onChange={formHandler} />
</div>
<div className='flex flex-col py-1'>
<label htmlFor="desc" className='opacity-70 font-bold'>Description</label>
<textarea name="" id="" cols="30" rows="5" className='resize-none p-2 border-gray-500 border-2 rounded-md'></textarea>
<textarea name="description" id="" cols="30" value={description} rows="5" className='resize-none p-2 border-gray-500 border-2 rounded-md' onChange={formHandler}></textarea>
</div>
<input type="submit" value="Save " className='bg-red-700 text-white px-4 py-3 rounded-full font-bold hover:bg-red-600 transition-all duration-300 mt-4' />
</form>
)}
</div>
Expand Down
Loading

0 comments on commit e92fb3b

Please sign in to comment.