PetAdoption Assignment complete ( excluding Advance task )

week-9/petAdoption/package.json

@@ -10,8 +10,10 @@
     "preview": "vite preview"
   },
   "dependencies": {
+    "prop-types": "^15.8.1",
     "react": "^18.3.1",
-    "react-dom": "^18.3.1"
+    "react-dom": "^18.3.1",
+    "react-router-dom": "^6.27.0"
   },
   "devDependencies": {
     "@eslint/js": "^9.11.1",

week-9/petAdoption/src/App.css

@@ -1,42 +0,0 @@
-#root {
-  max-width: 1280px;
-  margin: 0 auto;
-  padding: 2rem;
-  text-align: center;
-}
-
-.logo {
-  height: 6em;
-  padding: 1.5em;
-  will-change: filter;
-  transition: filter 300ms;
-}
-.logo:hover {
-  filter: drop-shadow(0 0 2em #646cffaa);
-}
-.logo.react:hover {
-  filter: drop-shadow(0 0 2em #61dafbaa);
-}
-
-@keyframes logo-spin {
-  from {
-    transform: rotate(0deg);
-  }
-  to {
-    transform: rotate(360deg);
-  }
-}
-
-@media (prefers-reduced-motion: no-preference) {
-  a:nth-of-type(2) .logo {
-    animation: logo-spin infinite 20s linear;
-  }
-}
-
-.card {
-  padding: 2em;
-}
-
-.read-the-docs {
-  color: #888;
-}

week-9/petAdoption/src/App.jsx

@@ -1,11 +1,32 @@
+import { useState } from 'react';
+import { BrowserRouter as Router, Routes, Route } from 'react-router-dom';
 import './App.css';
+import Header from './components/Header';
+import PetAdoptionForm from './components/PetAdoptionForm';
+import DataPage from './pages/DataPage'; 
+
+const App = () => {
+  const [formDataList, setFormDataList] = useState([]);
+
+
 
-function App() {
   return (
-    <div className="app-container">
-      <h1>Pet Adoption Project</h1>
-    </div>
+    <Router>
+      <div className="app-container">
+        <Header />
+        <Routes>
+          <Route 
+            path="/" 
+            element={<PetAdoptionForm  onSubmit={(data) => setFormDataList((prevList) => [...prevList, data])} />} 
+          />
+          <Route
+            path="/data"
+            element={<DataPage data={formDataList} />} 
+          />
+        </Routes>
+      </div>
+    </Router>
   );
-}
+};
 
 export default App;

week-9/petAdoption/src/components/Header.jsx

@@ -1,8 +1,21 @@
-import React from 'react'
+
+
+const header_styles = {
+  textAlign: 'center', 
+  fontSize: '35px', 
+  fontWeight: 'bold', 
+  padding: '12px', 
+  backgroundColor: 'rgba(173, 76, 241, 0.64)', 
+  color: 'solid black', 
+  position: 'fixed', 
+  top: 0, 
+  width: '100%',
+  zIndex: 1000, 
+};
 
 const Header = () => {
   return (
-    <div>Header</div>
+    <div style={header_styles}>Pet Adoption Project</div>
   )
 }
 

week-9/petAdoption/src/components/PetAdoptionForm.jsx

@@ -1,9 +1,162 @@
-import React from 'react'
+import { useState } from 'react';
+import PropTypes from 'prop-types';
+import {useNavigate} from 'react-router-dom';
 
-const PetAdoptionForm = () => {
+const PetAdoptionForm = ({ onSubmit }) => {
+  const [formData, setFormData] = useState({
+    petName: '',
+    petType: '',
+    breed: '',
+    yourName: '',
+    email: '',
+    phone: '',  
+  });
+  const navigate = useNavigate();
+
+  const handleChange = (e) => {
+    const { name, value } = e.target;
+    setFormData({ ...formData, [name]: value });
+  };
+
+  const handleSubmit = (e) => {
+    e.preventDefault();
+    onSubmit( formData); 
+    setFormData({
+      petName: '',
+      petType: '',
+      breed: '',
+      yourName: '',
+      email: '',
+      phone: '',
+    });
+    navigate('/data'); 
+  };
   return (
-    <div>PetAdoptionForm</div>
-  )
-}
+    <div style={containerStyle}>
+    <form style={formStyle} onSubmit={handleSubmit}>
+
+      <label style={labelStyle}>Pet Name</label>
+      <input type="text" 
+        name="petName" 
+        value={formData.petName}
+        onChange={handleChange}
+        placeholder='Pet Name' 
+        style={inputStyle} />
 
-export default PetAdoptionForm
+      <label style={labelStyle}>Pet Type</label>
+      <select
+        name="petType"
+        value={formData.petType}
+        onChange={handleChange} 
+        style={selectStyle} 
+        >
+        <option value="" disabled >Select Pet Type</option>
+        <option>Dog</option>
+        <option>Cat</option>
+        <option>Bird</option>
+        <option>Other</option>
+      </select>
+
+      <label style={labelStyle}>Breed</label>
+      <input 
+        type="text" 
+        name='breed'
+        value={formData.breed}
+        onChange={handleChange}
+        placeholder="Breed" 
+        style={inputStyle} />
+
+      <label style={labelStyle}>Your Name</label>
+      <input 
+        type="text" 
+        name="yourName"
+        placeholder="Your Name" 
+        value={formData.yourName}
+        onChange={handleChange}
+        style={inputStyle} />
+
+      <label style={labelStyle}>Email</label>
+      <input 
+        type="email" 
+        name="email"
+        value={formData.email}
+        onChange={handleChange}
+        placeholder="Email" 
+        style={inputStyle} />
+
+      <label style={labelStyle}>Phone</label>
+      <input 
+        type="tel" 
+        name="phone"
+        value={formData.phone}
+        onChange={handleChange}
+        placeholder="Phone" 
+        style={inputStyle} />
+
+      <button type="submit" style={buttonStyle}>Submit</button>
+    </form>
+  </div>
+);
+};
+
+// Styles
+const containerStyle = {
+  display: 'flex',
+  justifyContent: 'center',
+  alignItems: 'center',
+  height: '80vh', 
+  width: '80vw', 
+  margin: '10vh auto', 
+  padding: '20px', 
+  boxSizing: 'border-box', 
+};
+
+const formStyle = {
+  backgroundColor: 'rgba(173, 76, 241, 0.64)',
+  padding: '60px',
+  borderRadius: '8px',
+  width: '400px',
+  boxShadow: '0 4px 8px rgba(0, 0, 0, 0.2)',
+  marginTop: '50px', 
+};
+
+const labelStyle = {
+display: 'block',
+marginBottom: '5px',
+fontWeight: 'bold',
+color: '#3A3A3A',
+fontSize: '14px',
+};
+
+const inputStyle = {
+  width: '100%',
+  padding: '10px',
+  marginBottom: '15px',
+  borderRadius: '4px',
+  border: '1px solid #ccc',
+  fontSize: '14px',
+  boxSizing: 'border-box', 
+};
+
+
+const selectStyle = {
+  ...inputStyle, 
+  appearance: 'none', 
+};
+
+const buttonStyle = {
+width: '100%',
+padding: '10px',
+backgroundColor: '#2F4F2F',
+color: '#fff',
+border: 'none',
+borderRadius: '4px',
+cursor: 'pointer',
+fontSize: '16px',
+};
+PetAdoptionForm.propTypes = {
+  onSubmit: PropTypes.func.isRequired,
+  formDataList: PropTypes.array
+};
+
+export default PetAdoptionForm