Skip to content
Share
Explore

MAD 6114 W23 Lab Test 2

Peter Sigurdson
Last edited 691 days ago by System Writer.

How to hand this in:

Create a Word Document named: StudentNameStudentID.txt

Paste your code, or a Github link to your code, into that file.
Provide a Screen Shot of your Working App Code.

If you deploy to EXPO (This is Optional but you know how to do it!) Provide your QR CODE so I can enjoy seeing your Running App!


Upload the file to:
https://www.dropbox.com/request/g94aLn3OdbqTo16d1TeG
⁠
⁠

Lab Test Instructions

Refer to the Lab work you did in the first part of class on Monday March 13.

Create a React app using npx create-react-app command.
Install Tailwind CSS by running npm install tailwindcss.
Create a tailwind.config.js file in the root directory of your app.
In the tailwind.config.js file, add the following:


module.exports = {
purge: [],
darkMode: false,
theme: {
extend: {},
},
variants: {
extend: {},
},
plugins: [],
};



Import the Tailwind CSS file in your index.js file by adding the following line:


import './index.css';



In the index.css file, add the following:


@tailwind base;
@tailwind components;
@tailwind utilities;



Create a ProductTable component that displays a table of products.
The ProductTable component should receive a products prop that is an array of product objects.
Map over the products array and create a row in the table for each product.
Each row should display the productId, productName, productCategory, supplier, and price of the product.
Use Tailwind CSS classes to style the table and its content. For example:


const ProductTable = ({ products }) => {
return (
<table className="table-auto w-full">
<thead>
<tr>
<th className="px-4 py-2">Product ID</th>
<th className="px-4 py-2">Product Name</th>
<th className="px-4 py-2">Product Category</th>
<th className="px-4 py-2">Supplier</th>
<th className="px-4 py-2">Price</th>
</tr>
</thead>
<tbody>
{products.map((product) => (
<tr key={product.productId}>
<td className="border px-4 py-2">{product.productId}</td>
<td className="border px-4 py-2">{product.productName}</td>
<td className="border px-4 py-2">{product.productCategory}</td>
<td className="border px-4 py-2">{product.supplier}</td>
<td className="border px-4 py-2">{product.price}</td>
</tr>
))}
</tbody>
</table>
);
};



Create an AddProductForm component that allows the user to add a new product to the table.
The AddProductForm component should have inputs for productName, productCategory, supplier, and price.
On form submission, add the new product object to the products array using setProducts([...products, product]).
Use Tailwind CSS classes to style the form and its content. For example:


const AddProductForm = ({ onSubmit }) => {
const [product, setProduct] = useState({
productId: '',
productName: '',
productCategory: '',
supplier: '',
price: '',
});

const handleChange = (event) => {
const { name, value } = event.target;
setProduct({ ...product, [name]: value });
};

const handleSubmit = (event) => {
event.preventDefault();
onSubmit(product);
setProduct({
productId: '',
productName: '',
productCategory: '',
supplier: '',
price: '',
});
};

return (
<form onSubmit={handleSubmit} className="bg-white shadow-md rounded px-8 pt-6 pb-8 mb-4">
<div className="mb-4">
<label className="block text-gray-700 font-bold mb-2" htmlFor="productName">
Product Name
</label>
<input
className="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline"
id="productName"
type="text"
name="productName"
value={product.productName}
onChange={handleChange}
/>
</div>
<div className="mb-4">
<label className="block text-gray-700 font-bold mb-2" htmlFor="productCategory">
Product Category
</label>
<input
className="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline"
id="productCategory"
type="text"
name="productCategory"
value={product.productCategory}
onChange={handleChange}
/>
</div>
<div className="mb-4">
<label className="block text-gray-700 font-bold mb-2" htmlFor="supplier">
Supplier
</label>
<input
className="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline"
id="supplier"
type="text"
name="supplier"
value={product.supplier}
onChange={handleChange}
/>
</div>
<div className="mb-4">
<label className="block text-gray-700 font-bold mb-2" htmlFor="price">
Price
</label>
<input
className="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline"
id="price"
type="text"
name="price"
value={product.price}
onChange={handleChange}
/>
</div>
<div className="flex items-center justify-between">
<button
className="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded focus:outline-none focus:shadow-outline"
type="submit"
>
Add Product
</button>
</div>
</form>
);
};



Display the AddProductForm component above the ProductTable component.
Test the app by adding new products and verifying that they appear in the table.
How to hand this in:
Create a Word Document named: StudentNameStudentID.txt
If you deploy to EXPO (This is Optional but you know how to do it!) Provide your QR CODE so I can enjoy seeing your Running App!
Lab Test Instructions
Want to print your doc?
This is not the way.
Try clicking the ··· in the right corner or using a keyboard shortcut (
CtrlP
) instead.