Scribd
Upload
104 views4 pages

Step Progress Bar HTML CSS JS

This document contains code for a multi-step progress bar including HTML, CSS, and JavaScript. The HTML contains the progress bar markup with four numbered steps. The CSS styles the progress bar and buttons. The JavaScript controls the progress bar by adding and removing a "completed" class from the bullet points on next and previous clicks to change the active step being displayed.

Uploaded by

vatsal
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
104 views4 pages

Step Progress Bar HTML CSS JS

This document contains code for a multi-step progress bar including HTML, CSS, and JavaScript. The HTML contains the progress bar markup with four numbered steps. The CSS styles the progress bar and buttons. The JavaScript controls the progress bar by adding and removing a "completed" class from the bullet points on next and previous clicks to change the active step being displayed.

Uploaded by

vatsal
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 4

WEBTECH Assignment

CECSC04

Screenshot –

HTML –

<!DOCTYPE html>
<html>
    <head>
        <title>2019UCO1710</title>
        <link rel="stylesheet" href="CSS/style.css">
    </head>
    <body>
        <div class="container">
            <div id="stepProgressBar">
                <div class="step">
                    <p class="step-text">Step 1</p>
                    <div class="bullet">1</div>
                </div>
                <div class="step">
                    <p class="step-text">Step 2</p>
                    <div class="bullet">2</div>
                </div>
                <div class="step">
                    <p class="step-text">Step 3</p>
                    <div class="bullet">3</div>
                </div>
                <div class="step">
                    <p class="step-text">Complete</p>
                    <div class="bullet" id="comp">4</div>
                </div>
            </div>
            <div id="main">
                <button id="previousBtn" >Previous</button>
                <button id="nextBtn">Next</button>
            </div>
        </div>
        <script src="JS/main.js"></script>
    </body>
</html>

CSS –

#stepProgressBar  {
    display:  flex;
    justify-content:  space-between;
    align-items:  flex-end;
    width:  300px;
    margin:  0  auto;
    margin-bottom:  40px;
}

.step  {
    text-align:  center;
}

.step-text  {
    margin-bottom:  10px;
    color:  #28a745;
}

.bullet {
    border: 1px solid green;
    height: 20px;
    width: 20px;
    border-radius: 100%;
    color:green;
    display: inline-block;
    position: relative;
    line-height:20px;
}

.bullet.completed  {
    color:  white;
    background-color: green;
}

.bullet.completed::after {
    content: '';
    position: absolute;
    right: -60px;
    bottom: 10px;
    height: 1px;
    width: 54px;
    background-color: green;
}

button  {
    padding:  5px  10px;
    border:  1px  solid  black;
    
}

.text-center  {
    text-align:  center;
}
  
.container  {
    max-width:  400px;
    margin:  0  auto;
    margin-top:  20px;
    padding:  40px;
}

JavaScript –

const  previousBtn  =  document.getElementById('previousBtn');
const  nextBtn  =  document.getElementById('nextBtn');
const  bullets  =  [...document.querySelectorAll('.bullet')];
const  comp = document.getElementById('comp');

let currentStep = 1;

nextBtn.addEventListener('click',  ()  =>  {
    if(currentStep != 4) {
        bullets[currentStep  -  1].classList.add('completed');
        currentStep  +=  1;
    }
    else {
        comp.style.backgroundColor = "green";
        comp.style.color = "white";
        currentStep++;
    }
});

previousBtn.addEventListener('click',  ()  =>  {
    if(currentStep != 1) {
        if(currentStep == 5) {
            comp.style.backgroundColor = "white";
            comp.style.color = "green";
            currentStep--;
        }
        else {
            bullets[currentStep  -  2].classList.remove('completed');
            currentStep  -=  1;
        }
    }
});

You might also like