 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) => {

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 }) => {

export default User;

const App = () => {

return (
<div>
<User name={userName} /> {/* Pass the name prop */}
<User /> {/* This will display the default message "Hello, Guest" */}
</div>
 );
};

export default App;

function User({ name }) {

function App() {
return (
<div>
<User name="MUHAMMAD MUJTABA" /> {/* Passing name prop */}
<User /> {/* No name prop, so defaults to "Guest" */}
</div>
);
}

export default App;

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 :