Scribd
Upload
11 views7 pages

Zee Web 2 Lab 5

The document describes how to create a CV using React. It includes code for App.js, Card.js and Accordian.js components. App.js renders the Card component. Card.js displays personal details and uses the Accordian component. Accordian.js contains contact information, education history and skills in an accordion style layout. The CV includes name, date of birth, gender, phone, email, address, degrees, institutes, skills and progress bars.

Uploaded by

Zeeshan Hassan
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
11 views7 pages

Zee Web 2 Lab 5

The document describes how to create a CV using React. It includes code for App.js, Card.js and Accordian.js components. App.js renders the Card component. Card.js displays personal details and uses the Accordian component. Accordian.js contains contact information, education history and skills in an accordion style layout. The CV includes name, date of birth, gender, phone, email, address, degrees, institutes, skills and progress bars.

Uploaded by

Zeeshan Hassan
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 7

NATIONAL UNIVERSITY OF MODERN LANGUAGES

Web Engineering II
Submitted to
Ma’am Huma Nadeem
Submitted by
Muhammad Zeeshan Hassan
SECTION “A”(MOR)
1. Create a CV using react:
App.js:
import './App.css';
import Card from './components/Card';

function App() {
return (
<div className="app">
<Card/>
</div>
);
}

export default App;

Card.js:
import React from "react";
import Accordian from "./Accordian";
import "./Styles.css";

export default function Card() {


return (
<div className="card">
<img src="./img/My-Pic.jpg" />
<table style={{width:"80%", textAlign: 'left', marginLeft: 20}}>
<tr>
<td><b>Name:</b></td>
<td>Muhammad Zeeshan Hassan</td>
</tr>

<tr>
<td><b>Date of Birth:</b></td>
<td>03/02/1999</td>
</tr>

<tr>
<td><b>Gender:</b></td>
<td>Male</td>
</tr>
</table>
<div className="card-body">
<Accordian/>
</div>
</div>
);
}

Accordian.js:
import React from "react";
import Progress from "./Progress";

export default function Accordian(props) {


return (
<div>
<div className="accordion" id="accordionExample">
<div className="accordion-item">
<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"
>
Contact
</button>
</h2>
<div
id="collapseOne"
className="accordion-collapse collapse show"
aria-labelledby="headingOne"
data-bs-parent="#accordionExample"
>
<div className="accordion-body">
<table style={{width: "100%", textAlign: 'left'}}>
<tr>
<td><b>Phone Number</b></td>
<td>+92 3476000631</td>
</tr>
<tr>
<td><b>Email</b></td>
<td>[email protected]</td>
</tr>

<tr>
<td><b>Address</b></td>
<td>Kharian, Punjab, Pakistan</td>
</tr>
</table>
</div>
</div>
</div>
<div className="accordion-item">
<h2 className="accordion-header" id="headingTwo">
<button
className="accordion-button collapsed"
type="button"
data-bs-toggle="collapse"
data-bs-target="#collapseTwo"
aria-expanded="false"
aria-controls="collapseTwo"
>
Education
</button>
</h2>
<div
id="collapseTwo"
className="accordion-collapse collapse"
aria-labelledby="headingTwo"
data-bs-parent="#accordionExample"
>
<div className="accordion-body">
<table style={{width: "100%"}}>
<tr>
<th>Degree</th>
<th>Institute</th>
<th>CGPA/Grade</th>
</tr>

<tr>
<td>BS Software Engineering</td>
<td>National University of Modern Languages</td>
<td>3.0</td>
</tr>
<tr>
<td>Higher Secondary School Certificate</td>
<td>Army Public School, Kharian Cantt</td>
<td>A</td>
</tr>

<tr>
<td>Secondary School Certificate</td>
<td>Army Public School, Kharian Cantt</td>
<td>A</td>
</tr>
</table>
</div>
</div>
</div>
<div className="accordion-item">
<h2 className="accordion-header" id="headingThree">
<button
className="accordion-button collapsed"
type="button"
data-bs-toggle="collapse"
data-bs-target="#collapseThree"
aria-expanded="false"
aria-controls="collapseThree"
>
Skills
</button>
</h2>
<div
id="collapseThree"
className="accordion-collapse collapse"
aria-labelledby="headingThree"
data-bs-parent="#accordionExample"

>
<div>
<table className="skill" style={{width: "97%", textAlign: 'left',
margin: 10}}>
<tr>
<td>React</td>
<td><Progress level="80%"/></td>
<td>React Native</td>
<td><Progress level="85%"/></td>
</tr>
<tr>
<td>C#</td>
<td><Progress level="85%"/></td>
<td>Python</td>
<td><Progress level="70%"/></td>
</tr>

<tr>
<td>MongoDB</td>
<td><Progress level="75%"/></td>
<td>Node JS</td>
<td><Progress level="60%"/></td>
</tr>
</table>
</div>
</div>
</div>
</div>
</div>
);
}

Index.js:
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';

ReactDOM.render(
<React.StrictMode>
<App />
</React.StrictMode>,
document.getElementById('root')
);

reportWebVitals();
Output:

You might also like