Scribd
Upload
7 views

Form Using React

Uploaded by

wajeeha4804
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
7 views

Form Using React

Uploaded by

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

UNIVERSITY OF ENGINNERING AND TECHNOLOGY,

TAXILA

Subject: WE LAB
LAB TASK 8
Dated: 18/10/2024(Friday)

Submitted By:
Wajeeha Islam (22-SE-18)

Submitted To:

Ma’am Sidra Shafi

Department of Software Engineering,


UET TAXILA
File Name: About.js
import React from 'react';
function About(props) {
return(
<div>
<h2>About Me</h2>
<p> Name: {props.username}</p>
<p> Aspiring Software Engineer with a focus on frontend development, currently learning
React and improving coding skills.</p>
</div>
);
}
export default About;

File Name: Education.js


import React from 'react';

function Education(){
return(
<div>
<h2>Educatin</h2>
<table>

<thead>
<tr><th>Degree</th>
<th>Institution</th>
<th>Year</th>
<th>Grade</th></tr>
</thead>

<tbody>
<tr><td>Bachelor's in Software Engineering</td>
<td>UET Taxila</td>
<td>2022 - Present</td>
<td>A</td>
</tr>

<tr>
<td>Intermediate in Pre-Engineering</td>
<td>Jinnah Education System College</td>
<td>2020 - 2022</td>
<td>A+</td>
</tr>
<tr>
<td>Matriculation in Science</td>
<td>Jinnah Education System School</td>
<td>2018 - 2020</td>
<td>A</td>
</tr>
</tbody>

</table>
</div>
);
}

export default Education;

File Name: Experince.js

import React from 'react';

function Experience(){
return(
<div>
<h2>Experience</h2><ul>
<li>Member of AICP UET Taxila (2023 - Present)</li>
<li>Intern at Orcard Tech Solutions (Summer 2023)</li>
<li>Freelance Web Developer - Personal Projects (2022-Present)</li>
</ul>
</div>
);
}

export default Experience;

File Name: App.js

import './App.css';
import React from 'react';
import About from './About';
import Experience from './Experience';
import Education from './Education';
function App() {
const objective = "A highly motivated Software Engineering student seeking to enhance skills
in software development and project mangement.";

return(
<div className="App">
<h1>Curriculum Vitae</h1>
<p>{objective}</p>
<About username="Wajeeha Islam"/>
<Experience/>
<Education/>
</div>
);
}

export default App;

File Name: App.css


.App {
text-align: center;
font-family: Arial, sans-serif;
}

h1 {
margin-bottom: 20px;
}

h2 {
color: #2c3e50;
margin-top: 20px;
}

table {
color: darkgrey;
width: 60%;
margin: 20px auto;
border-collapse: collapse;
}

table, th, td {
color: grey;
border: 1px solid #ddd;
}

th, td {
padding: 8px;
text-align: left;
}
th {
background-color: #f2f2f2;
}

OUTPUT:

You might also like