add load example and print functionality

melkamu372 · Sep 14, 2023 · a4b47a8 · a4b47a8
1 parent d60434b
commit a4b47a8
Show file tree

Hide file tree

Showing 4 changed files with 85 additions and 44 deletions.
diff --git a/src/component/App.jsx b/src/component/App.jsx
@@ -1,28 +1,37 @@
-import React, { useState } from 'react'
-import PersonalDetails from './GeneralInfo/PersonalDetails'
-import DisplayPersonalDetail from './GeneralInfo/DisplayPeronalDetail'
-import Education from '../component/Education/Education'
-import DisplayEducation from '../component/Education/DisplayEducation'
-import Experience from '../component/Experience/Experience'
-import DisplayExperience from './Experience/DisplayExperience'
+import React, { useState } from "react";
+import PersonalDetails from "./GeneralInfo/PersonalDetails";
+import DisplayPersonalDetail from "./GeneralInfo/DisplayPeronalDetail";
+import Education from "../component/Education/Education";
+import DisplayEducation from "../component/Education/DisplayEducation";
+import Experience from "../component/Experience/Experience";
+import DisplayExperience from "./Experience/DisplayExperience"
+import Button from "./Button";
 function App() {
   const [person, setPerson] = useState({
     fullname: "",
-    title: '',
+    title: "",
     tel: "",
     email: "",
     address: "",
-    about:""
+    about: "",
   });
-  const defauleducation={
+  const defauleducation = {
     school: "Bahir Dar Institute of Technology",
     level: " BSC ",
     department: "Software Engineering",
+    start: "2014-10-16",
+    end: "2019-07-14",
+    location: "Bahir Dar, Ethiopia",
+  };
+  const defaulExperience= {
+    company: "Leapfrog Technology",
+    position: " Full Stack Developer  ",
+    responsibility: "Design,Builld,implement and Test Ezi bus Application ",
     start: '2014-10-16',
     end: '2019-07-14',
-    location: "Bahir Dar, Ethiopia",
+    location: "Addis Ababa, Ethiopia",
   };
- const updatePerson = (updatedPerson) => {
+  const updatePerson = (updatedPerson) => {
     setPerson(updatedPerson);
   };
   const [educationData, setEducationData] = useState([]);
@@ -32,39 +41,70 @@ function App() {
   const [experience, setExperience] = useState([]);
   const updateExperience = (data) => {
     setExperience(data);
-  };
-
+  }
+
+  function Print_cv(){
+    const divContents = document.getElementById('printResume').innerHTML;
+    const originalContents = document.body.innerHTML;
+    document.body.innerHTML = divContents;
+    window.print();
+    document.body.innerHTML = originalContents
+  }
 
+  function LoadDefault(){
+    setEducationData([defauleducation]);
+    setExperience([defaulExperience]);
+  }
+  function cleanDefault(){
+    setEducationData([]);
+    setExperience([]);
+  }
   return (
     <>
       <div className="container">
+      <div className="row">
+        <div className="col-6"> 
+        <Button clickMe={LoadDefault} btnClass="bi bi-box-arrow-down btn btn-success btn-sm p-2 m-1 fs-6"
+              text="Load Default"/>
+              <Button clickMe={cleanDefault} btnClass="bi bi-trash btn btn-primary btn-sm p-2 m-1 fs-6"
+              text=" Clear "/>
+        </div>
+        <div className="col-6"> 
+        <Button clickMe={Print_cv} btnClass="bi bi-printer btn btn-dark fs-6 p-2"
+              text=" Print "/>
+        </div>
+        </div>
+
         <div className="row">
           <div className="col-md-6">
             <div className="accordion" id="accordionExample">
               <div className="accordion-item">
-                <h2 className="accordion-header">
-                  <button
-                    className="accordion-button"
+                <h2 className="accordion-header" id="headingOne">
+                  <button className="accordion-button"
                     type="button"
                     data-bs-toggle="collapse"
                     data-bs-target="#collapseOne"
                     aria-expanded="true"
                     aria-controls="collapseOne"
                   >
-                    Personal Information
+                    <span className="badge text-bg-info fs-5"> Personal Information</span>
+
                   </button>
                 </h2>
-                <div
-                  id="collapseOne"
+                <div id="collapseOne"
                   className="accordion-collapse collapse show"
-                  data-bs-parent="#accordionExample"
-                >
+                  aria-labelledby="headingOne"
+                  data-bs-parent="#accordionExample">
                   <div className="accordion-body">
-                    <PersonalDetails person={person} updatePerson={updatePerson} />
+                  <PersonalDetails
+                      person={person}
+                      updatePerson={updatePerson}/>
                   </div>
                 </div>
               </div>
+            </div>
 
+            <div className="accordion" id="accordionExample">
               <div className="accordion-item">
                 <h2 className="accordion-header">
                   <button
@@ -75,7 +115,8 @@ function App() {
                     aria-expanded="false"
                     aria-controls="collapseTwo"
                   >
-                    Education
+
+                    <span className="badge text-bg-success fs-5">Educational Experience</span>
                   </button>
                 </h2>
                 <div
@@ -84,42 +125,42 @@ function App() {
                   data-bs-parent="#accordionExample"
                 >
                   <div className="accordion-body">
-                  <Education formData={educationData} updateEducation={updateEducation} />
+                    <Education
+                      formData={educationData}
+                      updateEducation={updateEducation}
+                    />
                   </div>
                 </div>
               </div>
 
               <div className="accordion-item">
                 <h2 className="accordion-header">
-                  <button
-                    className="accordion-button collapsed"
+                  <button className="accordion-button collapsed"
                     type="button"
                     data-bs-toggle="collapse"
                     data-bs-target="#collapseThree"
                     aria-expanded="false"
-                    aria-controls="collapseThree"
-                  >
-                    Experience
+                    aria-controls="collapseThree">
+                    <span className="badge text-bg-dark fs-5">  Practical Experience </span>
                   </button>
                 </h2>
                 <div
                   id="collapseThree"
                   className="accordion-collapse collapse"
-                  data-bs-parent="#accordionExample"
-                >
+                  data-bs-parent="#accordionExample">
                   <div className="accordion-body">
-                    <Experience  updateExperience={updateExperience} />
+                    <Experience updateExperience={updateExperience} />
                   </div>
                 </div>
               </div>
             </div>
           </div>
 
-          <div className="col-md-6">
-             <div className='card'> 
-            <DisplayPersonalDetail person={person} />
-            <DisplayEducation education={educationData} />
-            <DisplayExperience experience={experience} />
+          <div className="col-md-6" id="printResume">
+            <div className="card">
+              <DisplayPersonalDetail person={person} />
+              <DisplayEducation education={educationData} />
+              <DisplayExperience experience={experience} />
             </div>
           </div>
         </div>
@@ -128,4 +169,4 @@ function App() {
   );
 }
 
-export default App;
+export default App;
diff --git a/src/component/Education/Education.jsx b/src/component/Education/Education.jsx
@@ -127,13 +127,13 @@ function Education({ updateEducation }) {
           <div className="col-md-4 offset-md-8 mr-auto">
             <Button
               clickMe={AddNewEducation}
-              btnClass="btn btn-primary btn-sm  m-1"
+              btnClass="bi bi-check-square btn btn-primary btn-sm  m-1"
               text="Add"
             />
 
             <Button
               clickMe={clear_form}
-              btnClass="btn btn-warning btn-sm  m-1"
+              btnClass="bi bi-trash btn btn-danger btn-sm  m-1"
               text="Clear"
             />
           </div>

diff --git a/src/component/Experience/Experience.jsx b/src/component/Experience/Experience.jsx
@@ -129,13 +129,13 @@ function Experience({ updateExperience }) {
           <div className="col-md-4 offset-md-8 mr-auto">
             <Button
               clickMe={AddExperience}
-              btnClass="btn btn-primary btn-sm  m-1"
+              btnClass="bi bi-check-square btn btn-success btn-sm  m-1"
               text="Add"
             />
 
             <Button
               clickMe={clear_form}
-              btnClass="btn btn-warning btn-sm  m-1"
+              btnClass="btn btn-danger bi bi-trash m-1"
               text="Clear"
             />
           </div>

diff --git a/src/component/GeneralInfo/PersonalDetails.jsx b/src/component/GeneralInfo/PersonalDetails.jsx
@@ -114,7 +114,7 @@ function PersonalDetails({updatePerson}) {
 
                   <Button
                     clickMe={clear_form}
-                    btnClass="btn btn-danger btn-lg p-2 m-1"
+                    btnClass="bi bi-trash btn btn-danger btn-lg p-2 m-1"
                     text="Clear"
                   />
                 </form>