made working button

Author: FrenchFry36

web/src/App.jsx

@@ -2,10 +2,14 @@ import { TaskList } from './components/domains/task/TaskList/TaskList';
 import { TaskForm } from './components/domains/task/TaskForm/TaskForm';
 
 function App() {
+  function createTask() {
+    console.log('it works');
+  }
+
   return (
     <>
       <TaskList />
-      <TaskForm />
+      <TaskForm handleClick={createTask} />
     </>
   );
 }

web/src/components/domains/task/TaskForm/TaskForm.jsx

@@ -1,52 +1,64 @@
 import styles from './TaskForm.module.css';
-import PropTypes from 'prop-types';
+import { PropTypes } from 'prop-types';
 
-export function TaskForm() {
+function TaskForm(props) {
   return (
-    <>
-      <div className={styles.formWrapper}>
-        <form>
-          <h1 className={styles.headingStyle}>New Task</h1>
-          <fieldset>
-            {/* Task title */}
-            <label htmlFor="taskTitle" className={styles.taskLabelStyle}>
-              Title
-              <input
-                type="text"
-                name="taskTitle"
-                className={styles.taskInputStyle}
-                required
-              />
-            </label>
+    <form className={styles.formWrapper}>
+      <h1 className={styles.headingStyle}>New Task</h1>
+      <fieldset className={styles.fieldsetStyle}>
+        {/* Task title */}
+        <label htmlFor="taskTitle" className={styles.taskLabelStyle}>
+          Title
+          <input
+            type="text"
+            name="taskTitle"
+            className={styles.taskInputStyle}
+            required
+          />
+        </label>
 
-            {/* Project name */}
-            <label htmlFor="taskProject" className={styles.taskLabelStyle}>
-              Project
-              <input
-                type="text"
-                name="taskProject"
-                className={styles.taskInputStyle}
-                required
-              />
-            </label>
+        {/* Project name */}
+        <label htmlFor="taskProject" className={styles.taskLabelStyle}>
+          Project
+          <input
+            type="text"
+            name="taskProject"
+            className={styles.taskInputStyle}
+            required
+          />
+        </label>
 
-            {/* Priority */}
-            <label htmlFor="taskPriority" className={styles.taskLabelStyle}>
-              Priority
-              <select
-                name="taskPriority"
-                className={styles.taskInputStyle}
-                required
-              >
-                <option value>(select one)</option>
-                <option value="1">Low</option>
-                <option value="2">Medium</option>
-                <option value="3">High</option>
-              </select>
+        {/* 
+        <label htmlFor="taskPriority" className={styles.taskLabelStyle}>
+          Priority
+          <fieldset className={styles.radios}>
+            <label htmlFor="low">
+              <input type="radio" name="low" id="lowPriority" />
+              {' Low'}
+            </label>
+            <label htmlFor="medium">
+              <input type="radio" name="medium" id="mediumPriority" />
+              {' Medium'}
+            </label>
+            <label htmlFor="high">
+              <input type="radio" name="high" id="highPriority" />
+              {' High'}
             </label>
           </fieldset>
-        </form>
-      </div>
-    </>
+        </label> */}
+      </fieldset>
+      <input
+        type="button"
+        value="Add task"
+        className={styles.formButton}
+        onClick={props.handleClick}
+      />
+    </form>
   );
 }
+
+export { TaskForm };
+
+TaskForm.propTypes = {
+  handleClick: PropTypes.func.isRequired,
+};

web/src/components/domains/task/TaskForm/TaskForm.module.css

@@ -0,0 +1,41 @@
+.formWrapper {
+  background-color: var(--light-grey);
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: right;
+  padding: 40px;
+  gap: 10px;
+  border-radius: 10px;
+  margin: 50px;
+}
+
+.fieldsetStyle {
+  display: flex;
+  flex-wrap: wrap;
+  border: none;
+  gap: 40px;
+}
+
+.taskLabelStyle {
+  flex-grow: 1;
+  display: flex;
+  flex-direction: column;
+}
+
+.taskInputStyle {
+  border-radius: 7px;
+  border: 2px solid black;
+  padding: 5px;
+  margin-top: 7px;
+}
+
+.formButton {
+  text-align: center;
+  border-radius: 15px;
+  width: fit-content;
+  padding: 5px;
+  background-color: var(--light-blue);
+  margin-top: 10px;
+  padding: 10px;
+}

web/src/components/domains/task/TaskItem/TaskItem.module.css

@@ -21,6 +21,7 @@
 .priorityStyle {
   text-align: center;
   border-radius: 15px;
+  background-color: var(--light-blue);
   width: fit-content;
   padding: 5px;
 }