Scribd
Upload
12 views

Lab 4 Web Engineering II

Uploaded by

Muhammad Mubashir Joya
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
12 views

Lab 4 Web Engineering II

Uploaded by

Muhammad Mubashir Joya
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/ 9

WEB ENGINEERING II

Lab : 04

Submitted By:

Muhammad Mubashir 12389

Submitted To:

Ms. Nabeela Bibi


Code for pictures:

import React from 'react';


import './App.css';

const PicturesWebPage = () => {


return (
<div style={styles.container}>
<h1>Evolution of Transportation</h1>

<div style={styles.imageContainer} className='imageContainer'>


<div style={styles.imageWrapper}>
<img
src="https://th.bing.com/th/id/R.11f55c5dfc2979dc2db67e69
07dac81b?rik=zIgsCvIonP9dNw&pid=ImgRaw&r=0"
alt="Camel"
style={styles.image}
className='image'
/>
<div className='overlay'>
<span style={styles.overlayText}>Camel</span>
</div>
</div>
<div style={styles.box}>
<p style={styles.description} className='description'>
Camels are large, even-toed ungulates that are well
adapted to life in arid environments.
Known as the "ships of the desert," they are capable of
traveling long distances without water.
</p>
</div>
</div>

<div style={styles.imageContainer} className='imageContainer'>


<div style={styles.imageWrapper}>
<img
src="https://th.bing.com/th/id/R.af307eea32ac9692bdbc65ff
390ee298?rik=4hku9sT%2fkxaMrA&pid=ImgRaw&r=0"
alt="Audi A6"
style={styles.image}
className='image'
/>
<div className='overlay'>
<span style={styles.overlayText}>Audi A6</span>
</div>
</div>
<div style={styles.box}>
<p style={styles.description} className='description'>
The Audi A6 is a luxury sedan that combines elegance with
performance.
With advanced technology and a refined interior, it
offers a smooth driving experience.
</p>
</div>
</div>

<div style={styles.imageContainer} className='imageContainer'>


<div style={styles.imageWrapper}>
<img
src="https://imgproc.airliners.net/photos/airliners/0/2/9
/1085920.jpg?v=v40"
alt="Boeing Airplane"
style={styles.image}
className='image'
/>

<div className='overlay'>
<span style={styles.overlayText}>Boeing Airplane</span>
</div>
</div>
<div style={styles.box}>
<p style={styles.description} className='description'>
Boeing airplanes are renowned for their innovative design
and engineering.
They play a crucial role in global transportation,
connecting people and places around the world.
</p>
</div>
</div>
</div>
);
};

const styles = {
container: {
textAlign: 'center',
padding: '20px',
},
imageContainer: {
margin: '20px 2px',
display: 'inline-block',
transition: 'transform 0.2s',
width: '300px',
},
imageWrapper: {
position: 'relative',
overflow: 'hidden',
},
image: {
width: '100%',
height: 'auto',
borderRadius: '8px',
transition: 'transform 0.2s',
},
overlayText: {
color: '#fff',
fontSize: '20px',
fontWeight: 'bold',
},
box: {
display: 'block',
padding: '10px',
marginTop: '10px',
borderRadius: '8px',
backgroundColor: '#f9f9f9',
boxShadow: '0 4px 8px rgba(0, 0, 0, 0.1)',
transition: 'transform 0.2s, box-shadow 0.2s',
cursor: 'default',
userSelect: 'none',
},
description: {
maxWidth: '300px',
margin: '0 auto',
textAlign: 'left',
},
};

export default PicturesWebPage;

Code for Age Calculator:

import React, { useState } from 'react';


import './App.css';

const AgeCalculator = () => {


const [dob, setDob] = useState('');
const [age, setAge] = useState(null);

const calculateAge = (dateString) => {


const birthDate = new Date(dateString);
const today = new Date();

let years = today.getFullYear() - birthDate.getFullYear();


const monthDifference = today.getMonth() - birthDate.getMonth();

if (monthDifference < 0 || (monthDifference === 0 && today.getDate() <


birthDate.getDate())) {
years--;
}

const lastBirthday = new Date(birthDate);


lastBirthday.setFullYear(today.getFullYear());

if (today < lastBirthday) {


lastBirthday.setFullYear(lastBirthday.getFullYear() - 1);
}

const days = Math.floor((today - lastBirthday) / (1000 * 60 * 60 * 24));


return { years, days };
};

const handleSubmit = (e) => {


e.preventDefault();
if (dob) {
const { years, days } = calculateAge(dob);
setAge({ years, days });
}
};

return (
<div style={styles.container}>
<h2>Age Calculator</h2>
<form onSubmit={handleSubmit} style={styles.form}>
<input
type="date"
value={dob}
onChange={(e) => setDob(e.target.value)}
style={styles.input}
required
/>
<button type="submit" style={styles.button}>Calculate
Age</button>

</form>
{age && (
<div style={styles.result}>
<p>Your age is: <strong>{age.years}</strong> years,
<strong>{age.days}</strong> days</p>
</div>
)}
</div>
);
};

const styles = {
container: {
textAlign: 'center',
padding: '20px',
backgroundColor: '#f9f9f9',
borderRadius: '8px',
boxShadow: '0 4px 8px rgba(0, 0, 0, 0.1)',
margin: '20px auto',
maxWidth: '400px',
},
form: {
display: 'flex',
flexDirection: 'column',
alignItems: 'center',
marginBottom: '20px',
},
input: {
padding: '10px',
borderRadius: '4px',
border: '1px solid #ccc',
marginBottom: '10px',
width: '100%',
maxWidth: '300px',
},
button: {
padding: '10px 20px',
borderRadius: '4px',
border: 'none',
backgroundColor: '#007BFF',
color: '#fff',
cursor: 'pointer',
transition: 'background-color 0.3s',
},
result: {
marginTop: '10px',
fontSize: '18px',
},
};

export default AgeCalculator;

CSS Code:

body {
user-select: none;
}

.imageContainer:hover .image {
transform: scale(1.03);
}

.overlay {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: rgba(0, 0, 0, 0.6);
display: flex;
align-items: center;
justify-content: center;
opacity: 0;
transition: opacity 0.2s;
user-select: none;
}

.imageContainer:hover .overlay {
opacity: 1;
}

.box:hover {
transform: translateY(-1px);
box-shadow: 0 6px 12px rgba(0, 0, 0, 0.2);
}

.imageContainer:hover .description {
color: teal;
}

App.js Code:

import PicturesWebPage from './PicturesWebPage';


import AgeCalculator from './AgeCalculator';
import './App.css';

function App() {
return (
<>
<PicturesWebPage />
<AgeCalculator />
</>
);
}

export default App;

Output:

You might also like