Challenge: Vuejs Forms

Introduction

Purpose: This challenge is part of your application process at SocyList. The focus is not only on task completion but also on how well you communicate your process and planning. So before you start, read all the steps carefully and answer the questions below for yourself:-

Pre-task Questions:

1. What is the (end) goal?
2. What do I already understand, and what needs further information?
>>>Communicate your schedule before you actually start!

Required Software

List of Tools: To complete this challenge, you’ll need the following software:

1. Node.js & NPM: A dependency manager for Node.js. Download Node.js.
2. Visual Studio Code (or another IDE).

Instructions

Setup Steps

1. Understand Multi-Step Forms
- Read this guide on Creating a Multi-Step Form to familiarize yourself with the concept.

Required Steps

2. Define a Simple Use-Case for a Multi-Step Form
- Design a Multi-Step Form with at least three steps, considering the following:
  - Each step should have no more than two input fields or questions.
  - The input fields should be clear and easy to use.
  - The form should visually indicate progress to the user.
3. Start a New Vue Project
- Follow this Vue Project Setup Guide to begin.
4. Create a VueJS Component for the Multi-Step Form
- Design the form based on your use-case from Step 1.
5. Display the Form Component on a Page
- Test the form by running npm run dev in your development environment. Refer to this guide on Building an SPA in Vue.

Optional Steps

6. Use Subcomponents: Structure the form using subcomponents where possible. See Vue Import Components Guide.
7. Add Memory Functionality: Implement functionality to retain user responses in each step, allowing them to revisit previous steps with their answers saved.

Testing Requirements

8. Test each form step for accurate input capture and display.
9. Verify that the form’s progress indicator updates correctly as users proceed.

Submission Steps

-> Submit via WeTransfer: Deliver the complete project as a downloadable file on WeTransfer.
-> Include all required files: like code, tests, screenshots, & any other relevant documentation.

Good luck!