MUHAMMAD MUJTABA
SP22-BCS-171
WEB
TECHNOLOGIES
LAB FINAL
SUBMITTED TO : MAA’M
SADAF RIAZ
QUESTION#01 CLO-5-6 (MARKS: 25)
PART (a)
Code :
import React, { useState, useEffect } from 'react';
const App = () => {
const [formData, setFormData] = useState({
name: '',
email: '',
country: '',
gender: '',
subjects: [],
address: '',
});
const [errors, setErrors] = useState({});
const [isValid, setIsValid] = useState(false);
const emailRegex = /^\w(\.?[\w-])*@\w(\.?[\w-])*\.[a-z]{2,6}(\.[a-z]{2})?$/i;
useEffect(() => {
validateForm();
}, [formData]);
const validateForm = () => {
const newErrors = {};
let valid = true;
if (!formData.name) {
newErrors.name = 'Name is required.';
valid = false;
if (!formData.email || !emailRegex.test(formData.email)) {
newErrors.email = 'Please enter a valid email.';
valid = false;
if (!formData.country) {
newErrors.country = 'Country is required.';
valid = false;
if (!formData.gender) {
newErrors.gender = 'Please select a gender.';
valid = false;
}
if (formData.subjects.length < 1) {
newErrors.subjects = 'Please select at least one subject.';
valid = false;
if (!formData.address) {
newErrors.address = 'Address is required.';
valid = false;
setErrors(newErrors);
setIsValid(valid);
};
const handleChange = (e) => {
const { name, value, type, checked } = e.target;
if (type === 'checkbox') {
setFormData(prevState => {
const subjects = checked
? [...prevState.subjects, value]
: prevState.subjects.filter(item => item !== value);
return { ...prevState, subjects };
});
} else {
setFormData(prevState => ({ ...prevState, [name]: value }));
};
const handleSubmit = (e) => {
e.preventDefault();
if (isValid) {
console.log('Form submitted successfully:', formData);
setFormData({
name: '',
email: '',
country: '',
gender: '',
subjects: [],
address: '', // Reset address field
});
} else {
console.log('Form has errors:', errors);
};
return (
<div>
<h1>Registration Form</h1>
<form onSubmit={handleSubmit}>
<div>
<label>Name:</label>
<input
type="text"
name="name"
value={formData.name}
onChange={handleChange}
/>
{errors.name && <span style={{ color: 'red' }}>{errors.name}</span>}
</div>
<div>
<label>Email:</label>
<input
type="email"
name="email"
value={formData.email}
onChange={handleChange}
/>
{errors.email && <span style={{ color: 'red' }}>{errors.email}</span>}
</div>
<div>
<label>Country:</label>
<select
name="country"
value={formData.country}
onChange={handleChange}
>
<option value="">--Please choose an option--</option>
<option value="US">United States</option>
<option value="CA">Canada</option>
<option value="MX">Mexico</option>
<option value="GB">United Kingdom</option>
<option value="AU">Australia</option>
</select>
{errors.country && <span style={{ color: 'red' }}>{errors.country}</span>}
</div>
<div>
<label>Gender:</label>
<input
type="radio"
name="gender"
value="male"
checked={formData.gender === 'male'}
onChange={handleChange}
/> Male
<input
type="radio"
name="gender"
value="female"
checked={formData.gender === 'female'}
onChange={handleChange}
/> Female
{errors.gender && <span style={{ color: ' red' }}>{errors.gender}</span>}
</div>
<div>
<label>Subjects:</label>
<div>
<input
type="checkbox"
name="subjects"
value="Math"
checked={formData.subjects.includes('Math')}
onChange={handleChange}
/> Math
<input
type="checkbox"
name="subjects"
value="Science"
checked={formData.subjects.includes('Science')}
onChange={handleChange}
/> Science
<input
type="checkbox"
name="subjects"
value="History"
checked={formData.subjects.includes('History')}
onChange={handleChange}
/> History
</div>
{errors.subjects && <span style={{ color: 'red' }}>{errors.subjects}</span>}
</div>
<div>
<label>Address:</label> {/* Added address input */}
<input
type="text"
name="address"
value={formData.address}
onChange={handleChange}
/>
{errors.address && <span style={{ color: 'red' }}>{errors.address}</span>}
</div>
<button type="submit">Save</button>
</form>
</div>
);
};
export default App;
Screenshots :
PART (b)
Code :
USER COMPONENT :
import React from 'react';
const User = ({ name }) => {
return (
<div>
<h1>Hello, {name ? name : 'Guest'}</h1>
</div>
);
};
export default User;
APP COMPONENT :
import React from 'react';
import User from './User ';
const App = () => {
const userName = " MUHAMMAD MUJTABA ";
return (
<div>
<User name={userName} /> {/* Pass the name prop */}
<User /> {/* This will display the default message "Hello, Guest" */}
</div>
);
};
export default App;
MAIN CODE:
import React from 'react';
function User({ name }) {
return <h1>Hello, {name || "Guest"}</h1>;
}
function App() {
return (
<div>
<User name="MUHAMMAD MUJTABA" /> {/* Passing name prop */}
<User /> {/* No name prop, so defaults to "Guest" */}
</div>
);
}
export default App;
Screenshots :
PART (c)
Code :
import React, { useState } from 'react';
const InformationData = () => {
const [message, setMessage] = useState('');
const handleChange = (event) => {
setMessage(event.target.value); // Update the state with the input value
};
return (
<div>
<h2>Message Input</h2>
{/* Input field for typing a message */}
<input
type="text"
placeholder="Type your message here..."
value={message}
onChange={handleChange}
/>
{/* Display the current message in real-time */}
<p>Current Message: {message}</p>
</div>
);
};
export default InformationData;
Screenshots :
