React Form

Readme.md

Form

This is a simple form component created using React. It is used to collect data from the user and submit it to the server.

Features

This component has the following features:

• Input fields for project name, email, project charge code, region, request type, and target deadline
• Validation of input fields (e.g. project charge code must start with e, i, or m)
• Submit button to send data to the server

Usage

To use this component, simply import it into your React application and render it.

import React from 'react';
import Form from './Form';

const App = () => {
  return (
    <div>
      <Form />
    </div>
  );
};

export default App;

The form will then render in the application. The user can then fill out the form and submit it to the server.

form.jsx

import React, { useRef, useState } from "react";
import './index.css';

const Form = () => {
    const form = useRef();
    let [projectName, setProjectName] = useState("");
    let [email, setEmail] = useState("");
    // START WITH e i or m
    let [projectChargeCode, setProjectChargeCode] = useState("");
    let [region, setRegion] = useState("");
    let [requestType, setRequestType] = useState("");
    let [targetDeadline, setTargetDeadline] = useState("");
    const [letterCheck, setLetterCheck] = useState(true);
    const [formSubmitted, setFormSubmitted] = useState(false);
    const [formSubmitSuccessful, setFormSubmitSuccessful] = useState(false);


    const checkLetters = (firstletter) => {
        if (firstletter === "i" || firstletter === "o" || firstletter === "m") {
            setLetterCheck(true);
        } else {
            setLetterCheck(false);
        }
    };

    // should return true if errors for validation
    const checkForm = () => {
        if (
            projectName.length < 1 ||
            projectName.length > 50 ||
            projectChargeCode.length < 10 ||
            letterCheck ||
            region.length < 1 ||
            requestType.length < 1 ||
            targetDeadline.length < 1
        ) {
            return true;
        } else {
            return false;
        }
    };

    const sendEmail = (e) => {
        e.preventDefault();
        console.log('HI')

    };
    return (
        <div className="App">
            {!formSubmitted && (
                <form ref={form} onSubmit={sendEmail} className="App">

                    <input
                        id="feedback-entry"
                        name="feedback-entry"
                        className="input"
                        value={projectName}
                        placeholder="Project Name"
                        onChange={(event) => setProjectName(event.target.value)}
                    />

                    <input
                        id="feedback-entry"
                        name="feedback-entry"
                        className="input"
                        value={email}
                        placeholder="Your Email"
                        onChange={(event) => setEmail(event.target.value)}
                    />

                    <input
                        id="feedback-entry"
                        name="feedback-entry"
                        className="input"
                        value={projectChargeCode}
                        placeholder="Project Charge Code"
                        onChange={(event) => {
                            setProjectChargeCode(event.target.value);
                            let firstletter = projectChargeCode.charAt(0);
                            checkLetters(firstletter);
                        }}
                    />

                    {/* Needs to be dropdown  with other/defined*/}
                    <input
                        id="feedback-entry"
                        name="feedback-entry"
                        className="input"
                        value={region}
                        placeholder="Region"
                        onChange={(event) => setRegion(event.target.value)}
                    />

                    <input
                        id="feedback-entry"
                        name="feedback-entry"
                        className="input"
                        value={requestType}
                        placeholder="Request Type"
                        onChange={(event) => setRequestType(event.target.value)}
                    />

                    <input type="submit" value="Send" disabled={checkForm()} />
                </form>
            )}

            {formSubmitted && formSubmitSuccessful && (
                <>
                    <h2>
                        Thank you for submitting a project with our team! We will reach out
                        to discuss the project in more detail.
                    </h2>
                    <button
                        className="button"
                        onClick={() => {
                            setFormSubmitted(false);
                            setProjectName("");
                            setEmail("");
                            setProjectChargeCode("");
                            setRegion("");
                            setRequestType("");
                            setTargetDeadline("");
                        }}
                    >
                        {" "}
                        Submit Again{" "}
                    </button>
                </>
            )}
        </div>
    )
}

export default Form;

index.css

App {
  font-family: sans-serif;
  font-size: 12;
  align-items: center;
  justify-content: center;
  height: "100%";
  display: flex;
  flex-direction: column;
  padding: 20;
  margin: 20;
}

.form {
  padding: 1rem;
  height: "80%";
  flex-direction: column;
  background-color: gray;
  display: flex;
  margin: 40;
  margin-bottom: 1rem;
}

.input {
  padding: 1rem;
  margin: 40;
  margin-bottom: 1rem;
}

.react-datepicker-container {
  background-color: maroon;
  display: flex;
  height: 100;
}

.button {
  margin-top: 20;
  padding-top: 20;
  padding: 1rem;
  margin: 1rem;
}