مینی پروژه جاوا اسکریپت : Progress Steps

سلام سلام سلام

توی این مقاله قراره یه پروژه کوچیک ولی باحال و با هم کار کنیم.

یه مدت خودم دنبال اینجور چیزی بودم ولی پیداش نکردم واسه همین تصمیم گرفتم خودم بنویسمش.

حرف دیگه بسه بریم سراغ کدمون.



https://aparat.com/v/eQS0b

خیلی سریع می ریم سراغ فایل Html :

<html lang=&quoten&quot>
<head>
<meta charset=&quotUTF-8&quot>
<meta http-equiv=&quotX-UA-Compatible&quot content=&quotIE=edge&quot>
<meta name=&quotviewport&quot content=&quotwidth=device-width, initial-scale=1.0&quot>
<link rel=&quotstylesheet&quot href=&quotstyle.css&quot>
<title>progress steps</title>
</head>
<body>
    <div class=&quotcontainer&quot>
        <div class=&quotprogress-container&quot>
            <div class=&quotprogress&quot id=&quotprogress&quot></div>
            <div class=&quotcircle active&quot>1</div>
            <div class=&quotcircle&quot>2</div>
            <div class=&quotcircle&quot>3</div>
            <div class=&quotcircle&quot>4</div>
        </div>
        <button class=&quotbtn&quot id=&quotprev&quot disabled>قبلی</button>
        <button class=&quotbtn&quot id=&quotnext&quot>بعدی</button>
    </div>
<script src=&quotscript.js&quot>
</body>
</html>

خوب همونجور که دیدین چیز سختی نداشت تا اینجا

حالا بریم سراغ فایل css تا یه خورده خوشگل تر کنیم کارمونو:

اول سه سری استایل اولیه میدیم به کارمون در ضمن ما به یه سری رنگ نیاز داریم که اونارم توی root تعریف می کنیم چون که زیاد باهاشون کار داریم:

:root {
--line-border-fill: #3498db;
--line-border-empty: #e0e0e0;
}

* {
box-sizing: border-box;
font-family: 'Vazir', sans-serif;
margin: 0;
padding: 0;
}

body {
background-color: #f6f7fb;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
}


حالا بریم container هامونو مشخص کنیم:

.container {
text-align: center;
}
.progress-container {
position: relative;
display: flex;
justify-content: space-between;
max-width: 100%;
width: 350px;
margin: 30px;
}

واسه این که ازالمنت اضافه استفاده نکنیم میایم و از sudo element کمک میگیریم:

.progress-container::before {
content: '';
background-color: var(--line-border-empty);
position: absolute;
top: 50%;
left: 0;
transform: translateY(-50%);
height: 3px;
width: 100%;
z-index: -1;
}

می ریم سراغ خطی که قراره پر بشه و میزان پیشرفت و به ما نشون بده :

.progress {
background-color: var(--line-border-fill);
position: absolute;
top: 50%;
left: 0;
transform: translateY(-50%);
height: 3px;
width: 0%;
z-index: -1;
transition: .4s ease;
}

حالا دایره هایی رو درست می کنیم که قراره نشون بدن که ما الان کدوم مرحله ایم:

.circle {
width: 30px;
height: 30px;
border-radius: 50%;
background-color: #fff;
border: 3px solid var(--line-border-empty);
display: flex;
justify-content: center;
color: #999;
align-items: center;
}
.circle.active {
border-color: var(--line-border-fill);
}

حالا اون دکمه های قبلی و بعدی رو قشنگ ترشون می کنیم:

.btn {
padding: 8px 30px;
background-color: var(--line-border-fill);
color: #fff;
transition: .4s ease;
border-radius: 4px;
}
.btn:active {
transform: scale(.98);
}
.btn:disabled {
background-color: var(--line-border-empty);
cursor: not-allowed;
color: #000;
}

تا اینجا خیلی خوب پیش اومدیم حالا بریم سر وقت جاوا اسکریپت:

اول نیاز داریم 5 تا متغیر تعریف کنیم:

const progress = document.getElementById(&quotprogress&quot);
const next = document.getElementById(&quotnext&quot);
const prev = document.getElementById(&quotprev&quot);
const circles = document.querySelectorAll(&quot.circle&quot);
let currentActive = 1;

حالا توی دکمه ها event کلیک تعریف می کنیم:

next.addEventListener(&quotclick&quot, () => {
    currentActive++;
    if (currentActive > circles.length) {
        currentActive = circles.length;
    }
    update();
});

prev.addEventListener(&quotclick&quot, () => {
    currentActive--;
    if (currentActive < 1) {
        currentActive = 1;
    }
    update();
});

حالا اون متد update رو تعریف می کنیم:

function update() {
    circles.forEach((circle, index) => {
        if (index < currentActive) {
            circle.classList.add(&quotactive&quot);
    } else {
        circle.classList.remove(&quotactive&quot);
    }
    });
    const actives = document.querySelectorAll(&quot.active&quot);
    progress.style.width =
    ((actives.length - 1) / (circles.length - 1)) * 100 + &quot%&quot
    if (currentActive === 1) {
        prev.disabled = true;
    } else if (currentActive === circles.length) {
        next.disabled = true;
    } else {
        prev.disabled = false;
        next.disabled = false;
    }
}

اینم از این پروژه باحال

حتما سعی کنید خودتون کدشو بزنید تا یاد بگیرید.

اگه فایل پروژه رو میخواید می تونید به گیت هاب من بیاید.

تا پروژه بدی بدروود.