### Creating Workout Form Component with React In this task, we'll create a workout form component using React that will allow users to log their workouts. This form will be the foundation for collecting workout data, which will later be stored in our MongoDB database and displayed in various visualizations. #### Step 1: Create a New React Component First, let's create a new React component called `WorkoutForm`. This component will handle the form submission and manage the state of the form data. ```jsx // src/components/WorkoutForm.jsx import React, { useState } from 'react'; import './WorkoutForm.css'; const WorkoutForm = ({ onSubmit }) => { const [workout, setWorkout] = useState({ type: '', duration: '', intensity: '', caloriesBurned: '', notes: '' }); const handleChange = (e) => { const { name, value } = e.target; setWorkout((prevWorkout) => ({ ...prevWorkout, [name]: value })); }; const handleSubmit = (e) => { e.preventDefault(); onSubmit(workout); // Reset form after submission setWorkout({ type: '', duration: '', intensity: '', caloriesBurned: '', notes: '' }); }; return (

Workout Type:

Duration (minutes):

Intensity:

Calories Burned:

Notes:

</div>

<button type="submit" className="submit-button">Log Workout</button>
    </form>
  );
};

export default WorkoutForm;
```

#### Step 2: Create CSS Module for Styling

Create a new CSS file for styling the form:

```css
/* src/components/WorkoutForm.css */
.workout-form {
  max-width: 500px;
  margin: 0 auto;
  padding: 20px;
  background-color: #f5f5f5;
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.form-group {
  margin-bottom: 15px;
}

.form-group label {
  display: block;
  margin-bottom: 5px;
  font-weight: bold;
}

.form-group input,
.form-group select,
.form-group textarea {
  width: 100%;
  padding: 8px;
  border: 1px solid #ddd;
  border-radius: 4px;
  box-sizing: border-box;
}

.form-group textarea {
  height: 100px;
}

.submit-button {
  background-color: #4CAF50;
  color: white;
  padding: 10px 20px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-size: 16px;
}

.submit-button:hover {
  background-color: #45a049;
}
```

#### Step 3: Integrate with Parent Component

To use this form component, you'll need to import it into your main workout page component and handle the form submission:

```jsx
// src/pages/WorkoutPage.jsx
import React from 'react';
import WorkoutForm from '../components/WorkoutForm';

const WorkoutPage = () => {
  const handleWorkoutSubmit = (workoutData) => {
    // Here you'll handle the submission
    // This could be sending data to your backend API
    console.log('Workout submitted:', workoutData);
  };

return (
    <div className="workout-container">
      <h1>Log Your Workout</h1>
      <WorkoutForm onSubmit={handleWorkoutSubmit} />
    </div>
  );
};

export default WorkoutPage;
```

#### Explanation of the Code

1. **Component Structure:**
   - We created a functional component `WorkoutForm` that uses the `useState` hook to manage the form data.
   - The form includes fields for workout type, duration, intensity, calories burned, and notes.

2. **Form Handling:**
   - The `handleChange` function updates the state as the user interacts with the form.
   - The `handleSubmit` function is called when the form is submitted. It prevents default form behavior and calls the `onSubmit` prop with the workout data.

3. **Styling:**
   - We used CSS module styling to keep the styles scoped to the component.
   - The form has a clean, modern design with proper spacing and responsive layout.

4. **Integration:**
   - The form component is designed to be reusable and can be easily integrated into any parent component.
   - The submission handler (`handleWorkoutSubmit`) can be connected to your backend API in the next steps.

#### Next Steps

1. **Form Validation:**
   - Add front-end validation for required fields
   - Implement validation for numerical inputs
   - Add error messages for invalid inputs

2. **Connect to Backend:**
   - Integrate the form with your Express.js backend
   - Send workout data to your MongoDB database
   - Handle API responses and errors

3. **State Management:**
   - Connect the form to your React Context or Redux store
   - Manage form state globally if needed

#### Resources for Further Reading

- [React Forms Best Practices](https://react.dev/reference/react/useState#forms)
- [Styling React Components](https://react.dev/learn/styling-css)
- [React Context API](https://react.dev/learn/context)

This form component provides a solid foundation for collecting workout data. In the next task, we'll focus on adding form validation to ensure data integrity before submission.</article></body></html>