Giter Club home page Giter Club logo

adaptive-multistep-form-react's Introduction

Adaptive Multi-Step Form

This project consists of a multi-step form that adapts itself by reading a structure file with all the information.

Form Json File Structure

  • form

    • id - The unique identifier of the form (Required)
    • title - The title for the form (Required)
    • description - The description for the form (Optional)
    • groups - Array of object type "group" (Required)
    • outro - Object of type "outro"
  • group

    • id - The unique identifier of the form (Required)
    • title - The title of the group (Required)
    • description - The description of the group (Optional)
    • questions - Array of object type "question"
  • question

    • id - The unique identifier of the question (Required)
    • title - The title of the question (Required)
    • description - The description of the question (Optional)
    • type - One of the questions types allowed in string form (Required)
  • Question Types Allowed

    • text - For all questions that need a text spelling answer
    • number - For all questions that need a number input
    • date - For all questions that need a date type of input
    • boolean - For all questions that need a "yes" or "no" answer

Json Example

{
  "form": {
    "id": 1,
    "title": "Personal Info",
    "description": "( This is form was created to gather basic personal info )",
    "groups": [
      {
        "id": 1,
        "title": "Basic Info",
        "description": "( Please answer the questions bellow )",
        "questions": [
          {
            "id": 1,
            "title": "What is your first name?",
            "description": "(Please enter only your first name)",
            "type": "text"
          },
          { "id": 2, "title": "When were you born?", "type": "date" }
        ]
      },
      {
        "id": 2,
        "title": "Users Family Situation",
        "description": "( Please answer the questions bellow about your family situation )",
        "questions": [
          {
            "id": 3,
            "title": "Do you live with your family?",
            "description": "( Select the proper answer )",
            "type": "boolean"
          },
          {
            "id": 4,
            "title": "With how many family members do you live with?",
            "type": "number"
          }
        ]
      }
    ],
    "outro": {
      "title": "Thank you for completing the form!",
      "description": "Please press submit, to submit your answers!"
    }
  }
}

UI Images

Screenshot 2022-12-21 at 00 34 00

Screenshot 2022-12-21 at 00 34 20

Screenshot 2022-12-21 at 00 34 35

Screenshot 2022-12-21 at 00 43 47

How to run this project

 git clone "project link"

 cd adaptive-multistep-form-react

 npm install

 npm run dev

Technologies

  • Javascript
  • VsCode
  • Html
  • CSS
  • React
  • JSX
  • Json
  • Custom Hooks
  • Styled-Components
  • React Context
  • React PropTypes

Collaborators

Mario Vieira

adaptive-multistep-form-react's People

Contributors

mariowork avatar

Watchers

 avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.