efatha / efatha/Multi-step-Challenge
Add Next Step and Go Back Navigation Using JavaScript
- Dominant language
- CSS
- Stars
- 1
- Forks
- 0
- PR merge metrics
- No merged PRs in 30d
Description
The structure and styling of the form are already in place. The next step is to make the form **interactive** by allowing users to move between the different steps.
For this task, you will use **JavaScript** to control the navigation between the form sections. The **Next Step** button should move the user forward to the next part of the form, while the **Go Back** button should return the user to the previous step.
Start by observing how the steps are organized in the HTML. Each step is inside a section with a class like `.step`, and the visible one has the class `.active-step`. This class is what controls which step is shown on the screen.
Using JavaScript, you will:
- Detect when the **Next Step** button is clicked
- Hide the current step
- Show the **next step** by updating the `.active-step` class
You should also make the **Go Back** button work by reversing the process and showing the previous step.
Try to think about the problem in small pieces:
- First, select the navigation buttons with JavaScript.
- Then select all the step sections.
- Track which step is currently active.
- When a button is clicked, update the active step accordingly.
The goal is that **only one step should be visible at a time**, and the user should be able to move forward and backward through the form smoothly.
Take your time to explore the HTML structure and experiment with JavaScript to control which step is currently displayed.
Contributor guide
No contributing guide indexed for this repository
Assessment
This issue has not been assessed yet.