Table of Contents
This project is a progress steps widget built using HTML5, CSS3, and JavaScript. The widget provides a visual representation of progress through a series of steps, allowing users to navigate between steps and track their progress.
To use the progress steps widget, follow these steps:
- Include the required HTML markup in your web page:
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="css/styles.css">
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div class="container">
<div class="progress-container">
<div class="progress" id="progress"></div>
<div class="circle active">1</div>
<div class="circle">2</div>
<div class="circle">3</div>
<div class="circle">4</div>
</div>
<button class="btn" id="#prev" type="button" disabled>Prev</button>
<button class="btn" id="#next" type="button">Next</button>
</div>
<script src="js/main.js"></script>
</body>
</html>- Link the CSS stylesheets by adding the following line within the section of your HTML file:
<link rel="stylesheet" href="css/styles.css">- Include the JavaScript code by adding the following line before the closing tag of your HTML file:
<script src="js/main.js"></script>-
Customize the number of steps by modifying the HTML markup. Add or remove
elements as needed, and update the corresponding JavaScript code accordingly. -
Run the web page in a web browser to see the progress steps widget in action. You should be able to navigate between steps using the "Prev" and "Next" buttons.
The JavaScript code included in the project provides the functionality for the progress steps widget. It allows users to move forward or backward through the steps and updates the visual representation of the progress.
The key JavaScript functions used in this project are:
-
next: This function is called when the "Next" button is clicked. It increments thecurrentActivevariable, ensuring it does not exceed the total number of steps. Then, it calls theupdatefunction to update the widget's appearance. -
prev: This function is called when the "Prev" button is clicked. It decrements thecurrentActivevariable, making sure it does not go below 1 (the first step). It then calls theupdatefunction to update the widget's appearance. -
update: This function updates the widget's appearance based on the current step (currentActive). It enables or disables the "Prev" and "Next" buttons as necessary, adds the "active" class to the circles representing completed steps, and adjusts the width of the progress bar based on the progress made.
Please note that if you want to modify the behavior or add more functionality to the progress steps widget, you can do so by modifying the JavaScript code accordingly.
The CSS styles provided in the styles.css file control the visual appearance of the progress steps widget. You can customize these styles to match your desired design.
The progress steps widget is a simple and intuitive way to guide users through a series of steps. By using HTML5, CSS3, and JavaScript, this project provides an easy-to-implement solution for incorporating progress tracking into your web pages. Feel free to modify and expand upon this project to suit your specific needs.
Distributed under the MIT License.
Alireza Mohafezatkar - https://www.linkedin.com/in/alireza-mohafezatkar/ - [email protected]
Project Link: https://github.com/mohafezatkar/simple-progress-steps-widget